使用vite-plugin-svg-icons插件
安装 (yarn or npm)
这里使用的是1.0.5版本
yarn add vite-plugin-svg-icons -D
or
npm i vite-plugin-svg-icons -D
添加配置
在vite.config.js中配置插件
import viteSvgIcons from 'vite-plugin-svg-icons';
import path from 'path';
export default () => {
return {
plugins: [
viteSvgIcons({
// 指定需要缓存的图标文件夹
iconDirs: [path.resolve(process.cwd(), 'src/icons')],
// 指定symbolId格式
symbolId: 'icon-[dir]-[name]',
}),
],
};
};
在 src/main.ts 内引入注册脚本
import 'virtual:svg-icons-register';
创建svg组件
创建文件夹/src/icons/SvgIcon.vue
<template>
<svg :class="svgClass" v-bind="$attrs" :style="{ color: color }">
<use :xlink:href="iconName"></use>
</svg>
</template>
<script setup lang="ts">
import { computed, defineProps } from 'vue'
const props = defineProps({
name: {
type: String,
required: true
},
color: {
type: String,
default: ''
}
})
const iconName = computed(() => `#icon-${ props.name }`)
const svgClass = computed(() => {
if(props.name) return `svg-icon icon-${ props.name }`
return 'svg-icon'
})
</script>
<style scoped>
.svg-icon{width: 1em;height: 1em;fill:currentColor; vertical-align: middle;}
</style>
全局导入
在mian.js中引入
import SvgIcon from "./icons/SvgIcon.vue";
const app = createApp(App)
app.component("Svg-icon",SvgIcon)
页面中使用
name这是svg图片的名字
<SvgIcon name="icon1"></SvgIcon>
在2版本之后引入方法
package.json
"fast-glob": "^3.2.12",
"vite-plugin-svg-icons": "^2.0.1"
vite.config
import {createSvgIconsPlugin} from 'vite-plugin-svg-icons';
import path from 'path';
// ↓插件配置
plugins: [
createSvgIconsPlugin({
// 指定需要缓存的图标文件夹
iconDirs: [path.resolve(process.cwd(), 'src/icons/svg')],
// 指定symbolId格式
symbolId: 'icon-[dir]-[name]',
}),
vue(),
],