1、安装依赖
npm i @element-plus/icons-vue -S
npm i vite-plugin-svg-icons -D
2、在vite.config.ts文件中
import path from 'path';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'; // 版本不同引入方式不同
export default defineConfig({
...
plugins: [
...
createSvgIconsPlugin({
// 指定需要缓存的图标文件夹
iconDirs: [path.resolve(process.cwd(), 'src/assets/icons/svg')],
// 指定symbolId格式
symbolId: 'icon-[dir]-[name]'
})
]
});
且按照iconDirs中路径准备好svg文件
image.png
3、创建引入全部element-plus文件，以及创建SvgIcon组件
在components文件夹下创建如下文件
image.png
components/SvgIcon/svgicon.ts文件内容如下
// 注册所有 @element-plus/icons-vue 图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
import { App } from 'vue';
export default {
install: (app: App<Element>) => {
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component);
}
}
};
components/SvgIcon/index.vue文件内容如下
// 注册自定义图标
<template>
<svg :class="svgClass" aria-hidden="true">
<use :xlink:href="iconName" :fill="color" />
</svg>
</template>
<script setup lang="ts">
import { computed } from 'vue';
const props = defineProps({
iconClass: { // 图标名称与assets/icon/svg下使用的文件名一致
type: String,
required: true
},
className: { // 给图标添加class
type: String,
default: ''
},
color: { // 设置图标颜色
type: String,
default: '#333'
}
});
const iconName = computed(() => {
return `#icon-${props.iconClass}`;
});
const svgClass = computed(() => {
if (props.className) {
return `svg-icon ${props.className}`;
}
return 'svg-icon';
});
</script>
<style scope lang="scss">
.sub-el-icon,
.nav-icon {
display: inline-block;
font-size: 15px;
margin-right: 12px;
position: relative;
}
.svg-icon {
width: 1em;
height: 1em;
position: relative;
fill: currentColor;
vertical-align: -2px;
}
</style>
4、在main.ts中引入
// 注册所有图标
import 'virtual:svg-icons-register'; // 引入注册脚本
import SvgIcon from '@/components/SvgIcon/index.vue';
import elementIcons from '@/components/SvgIcon/svgicon';
app.component('SvgIcon', SvgIcon);
app.use(elementIcons);
5、使用方法
// 自定义的svg图标
<svg-icon icon-class="lock" class="loack-icon"></svg-icon>
// element-plus图标
<el-icon><user-filled /></el-icon>
