丰富的互联网资源，用 svg 文件作为 icon 已经很常见了。这里使用 iconify 来处理 icon。 iconify 可以理解为一个管理封装各个 icon 的工具。
https://element-plus.org/zh-CN/component/icon.html
开始
# 安装
pnpm install unplugin-icons unplugin-vue-components -D
# 修改 vite.config.ts
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import Icons from "unplugin-icons/vite";
import IconsResolver from "unplugin-icons/resolver";
// https://vitejs.dev/config/
export default defineConfig({
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
css: {
preprocessorOptions: {
scss: {
additionalData: `
@use "@/assets/styles/element.scss";
@use "@/assets/styles/element-dark.scss";
@use "@/assets/styles/main.scss";
@use "@/assets/styles/preflight.scss";
`,
},
},
},
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver({
importStyle: "sass",
directives: true
})],
}),
Components({
dts: "./components.d.ts",
resolvers: [
IconsResolver({
prefix: "i", // 默认为i,设置为false则不显示前缀
enabledCollections: ["ep"],
alias: {
'icon': "ep", //配置别名
}
}),
ElementPlusResolver({
importStyle: "sass",
directives: true
})
],
}),
Icons({
autoInstall: true, // 是否自动安装对应的图标库，默认为true
scale: 1, // 图标缩放，默认为1
defaultStyle: "", // 图标style
defaultClass: "", // 图标class
compiler: 'vue3', // 编译方式，可选值：'vue2', 'vue3', 'jsx'
jsx: "react", // jsx风格：'react' or 'preact'
})
]
})
使用。
<el-input prefix-icon="IEpUser" placeholder="请输入用户名"></el-input>
<el-icon><IEpEdit /></el-icon>
<el-icon><i-ep-delete /> </el-icon>这里可以写成驼峰的方式，也可以写成大小写的方式。其实，是有三部分构成。 {prefix}-{collection}-{icon}。
- prefix：icon的前缀，默认值为'i',可设置成false,如果设置成false,那么组件使用就变成
。 - collection: iconify 唯一name;
- icon: 图标名字
enabledCollections 中配置的 ep，表示的是 element-plus 的图标。当然也可以设置成其他的图标。这里使用 element-plus，还是使用 element-plus 的图标比较好。
如果觉得名字比较长或不是自己喜欢的，可以设置 prefix 为 false，去掉前缀，并设置 alias 指定别名。这里将 prefix 设置为 false，别名设置为 icon (记得别名的 value 对应 collections 里的值)。修改是这样子的。
IconsResolver({
prefix: false, // 默认为i,设置为false则不显示前缀
enabledCollections: ["ep"],
alias: {
'icon': "ep", //配置别名
}
}),然后修改 view。
<el-icon><IconEdit /></el-icon>
<el-icon><icon-delete /> </el-icon>在 https://icon-sets.iconify.design/ 这里，可以找到更多的 icon。
这里是在线的 icon。某些时候，也需要离线的 icon。
离线使用 iconifly
这个是官方批量使用本地 svg 的介绍。
https://iconify.design/docs/icon-components/vue/add-collection.html
先安装 iconify/vue
pnpm add -D @iconify/vue再新建 assets/svg-icon/svg-icon.ts 文件，将示例里的代码原封不动的 copy 进去。
import { addCollection } from '@iconify/vue';
addCollection({
prefix: 'mdi',
icons: {
'account-box': {
body: '<path d="M6 17c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6m9-9a3 3 0 0 1-3 3a3 3 0 0 1-3-3a3 3 0 0 1 3-3a3 3 0 0 1 3 3M3 5v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2z" fill="currentColor"/>',
},
'account-cash': {
body: '<path d="M11 8c0 2.21-1.79 4-4 4s-4-1.79-4-4s1.79-4 4-4s4 1.79 4 4m0 6.72V20H0v-2c0-2.21 3.13-4 7-4c1.5 0 2.87.27 4 .72M24 20H13V3h11v17m-8-8.5a2.5 2.5 0 0 1 5 0a2.5 2.5 0 0 1-5 0M22 7a2 2 0 0 1-2-2h-3c0 1.11-.89 2-2 2v9a2 2 0 0 1 2 2h3c0-1.1.9-2 2-2V7z" fill="currentColor"/>',
},
'account': {
body: '<path d="M12 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4z" fill="currentColor"/>',
},
'home': {
body: '<path d="M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5z" fill="currentColor"/>',
},
},
width: 24,
height: 24,
});再新建一个 template/svgIcon/svgIcon.vue 模板。
<template>
<Icon :icon="icon" />
</template>
<script setup lang="ts">
import { Icon } from '@iconify/vue';
const props = defineProps({
icon: { type: String, required: true }
})
</script>在 main.ts 中导入 svg-icon。
import '@/assets/svg-icon/svg-icon.ts'然后在 homeview 中使用就好了。
<el-icon><svgIcon :icon="'mdi:home'" /></el-icon>运行发现 icon 已经展示出来了。
如果嫌弃 svg-icon.ts 中加入众多的 svg 的值太长了，不方便看。可以在文件夹中直接存放 svg 文件，读取后填充进去也可以。
还有，在自己封装的 svgIcon 中，可以添加更多的 props ，比如颜色，大小这些。会更丰满好用。
之所以要做本地的，就是后边要做的后台，导航栏是动态生成的。
提交版本
git add .
git commit -m '安装配置使用 iconify'