1.安装vite-plugin-svg-icons
yarn add vite-plugin-svg-icons -D
npm i vite-plugin-svg-icons -D
2.在中进行配置
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
export default defineConfig({
plugins:[
vue(),
createSvgIconsPlugin({
// 指定需要缓存的图标文件夹(路径为存放所有svg图标的文件夹不单个svg图标)
iconDirs: [((), 'src/assets/icons/svg')],
// 指定symbolId格式
symbolId: 'icon-[dir]-[name]'
})
]
})
3.创建svg组件
文件路径:src/components/SvgIcon/
<template>
<svg :class="svgClass" aria-hidden="true">
<use :xlink:href="iconName" :fill="color"/>
</svg>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
iconClass: {
type: String,
required: true
},
className: {
type: String,
default: ''
},
color: {
type: String,
default: ''
}
})
const iconName = computed(() => {
return `#icon-${}`
})
const svgClass = computed(() => {
if () {
return `svg-icon ${}`
}
return 'svg-icon'
})
</script>
4.在中引入组件和脚本,并挂载组件
import { createApp } from 'vue'
import App from './'
// 引入注册脚本
import 'virtual:svg-icons-register'
// 引入组件
import SvgIcon from '@/components/SvgIcon/'
const app = createApp(App)
// 全局组件挂载
('svg-icon', SvgIcon)
('#app')
5.使用
// icon-class是svg图标名称,class-name是样式类名
<svg-icon class-name="search-icon" icon-class="search" />