1、安装插件
npm add fast-glob -D //glob 工具库 一个传入的作用
npm install vite-plugin-svg-icons -D
2、配置 vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
export default defineConfig(({ mode }) => {
return {
plugins: [
vue(),
createSvgIconsPlugin({
iconDirs: [path.resolve(process.cwd(), 'src/svgIcon/svg')], //指定需要转换的图标文件 夹
symbolId: 'icon-[name]',
}),
]
}
})
3、创建svg文件夹和.vue文件
4、svgicon.vue组件
<template>
<div>
<svg :class="svgClass" aria-hidden="true">
<use :xlink:href="iconName" />
</svg>
</div>
</template>
<script setup>
import { computed } from 'vue';
const props = defineProps({
dataIconName: {
type: String,
required: true,
},
className: {
type: String,
default: '',
},
});
// 图标在 iconfont 中的名字
const iconName = computed(() => {
return `#icon-${props.dataIconName}`;
});
// 给图标添加上类名
const svgClass = computed(() => {
if (props.className) {
return `svg-icon ${props.className}`;
} else {
return 'svg-icon';
}
});
</script>
<style scoped>
.svg-icon {
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
5、/main.js引入脚本
import { createApp } from 'vue';
import App from './App.vue';
import SvgIcons from './common/Svgicon.vue';
const app = createApp(App);
app.component('SvgIcon', SvgIcons);
app.mount('#app');
6、需要引入svg的vue组件
<SvgIcon dataIconName="headerlogo" className="logoheader" />