按需使用
vue
<template>
<About class="app-icon" aria-label="关于" role="img" />
<Dashboard class="app-icon" aria-hidden="true" />
<Page404 class="empty-state" aria-label="页面不存在" role="img" />
</template>
<script setup lang="ts">
import { About, Dashboard, Page404 } from "@fast-element-plus/icons-vue";
</script>
<style scoped>
.app-icon {
width: 1em;
height: 1em;
fill: currentColor;
}
.empty-state {
width: 20rem;
height: auto;
}
</style>大多数单色图标可通过 fill: currentColor 跟随文字颜色。Page403、Page404 等多色插图的子元素保留原始填充色,并优先于根元素样式。
纯装饰图标应设置 aria-hidden="true";具有独立含义的图标应通过 aria-label 与 role="img" 提供可访问名称。
