图标Icon
介绍
图标使用vite-plugin-svg-icons插件,将svg icon放到指定目录下src\assets\icons
使用方式
直接使用
name 为 icon 目录下的文件名称,需要自己控制其大小
<SvgIcon name="app-settings" />
使用 el-icon 包裹
大小尺寸颜色可有 el-icon 控制,更加统一
<SvgIcon
<SvgIcon name="app-settings" />
</el-icon>
其他注意事项
在 el-dropdown 组件中使用图标作为触发的元素，在不同主题下其变色可能不对，显示颜色将与背景色无法正常区分出来，使用element-plus的配套图标@element-plus/icons-vue 也是一样的情况，需要单独处理,使用var(--drop-down-icon-color)控制颜色
在使用时
1<el-dropdown trigger="click">
2 <el-icon
3 size="large"
4 color="var(--drop-down-icon-color)"
5 class="cursor-pointer"
6 >
7 <SvgIcon name="language" />
8 </el-icon>
9 <template #dropdown>
10 <el-dropdown-item
11 v-for="lang in langList"
12 :key="lang.k"
13 @click="setLang(lang.k)"
14 >
15 <span
16 :class="appStore.app.lang === lang.k ? 'font-bold' : 'font-normal'"
17 >
18 {{ lang.v }}
19 </span>
20 </el-dropdown-item>
21 </template>
22 </el-dropdown>
在src\assets\css\variable.scss 文件中的对应主题 配置 --drop-down-icon-color颜色单独控制
