Skip to content

按需使用

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 跟随文字颜色。Page403Page404 等多色插图的子元素保留原始填充色,并优先于根元素样式。

纯装饰图标应设置 aria-hidden="true";具有独立含义的图标应通过 aria-labelrole="img" 提供可访问名称。