1.安装vite-plugin-svg-icons
npm i vite-plugin-svg-icons -D
2. 新建文件夹 src/assets/icons/svg来存放svg 图片
3.新建组件src/components/SvgIcon/index.vue
<template>
<svg :style="{width, height}">
<use :xlink:href="prefix + name" :fill="color"></use>
</svg>
</template>
<script setup lang="ts">
defineProps({
//前缀
prefix: {
type: String,
default: "#icon-"
},
//图标名称
name: String,
//颜色
color: {
type: String,
default: "#fff"
},
width: {
type: String,
default: "20px"
},
height: {
type: String,
default: "20px"
},
})
</script>
<style scoped></style>
4. 注册 新建src/assets/icons/index .vue
import SvgIcon from '@/components/SvgIcon/index.vue';
import type { App, Component } from 'vue';
const components: { [name: string]: Component } = { SvgIcon };
export default {
install(app: App) {
Object.keys(components).forEach((key: string) => {
app.component(key, components[key]);
})
}
}
5.vite.config.ts中配置
export default defineConfig({
//静态资源服务的文件夹
publicDir: 'public',
base: './',
plugins: [
vue(),
createSvgIconsPlugin({//svg配置
// iconDirs: [path.resolve(process.cwd(),'src/assets/icons/svg')],//导入路径为'src/assets/icons'
iconDirs: [fileURLToPath(new URL('src/assets/icons/svg', import.meta.url))],//导入路径为'src/assets/icons'
symbolId: 'icon-[dir]-[name]',//名称格式为‘icon-name’格式
})
],
...
})
6.main.ts 中配置
import IconComponents from '@/assets/icons'
//svg插件在主文件内需要的配置代码
import 'virtual:svg-icons-register'
...
InitCustomConfig().then(config => {
const app = createApp(App).use(IconComponents)
app.mount('#app')
...
})
7.直接使用
<svg-icon name="login-password"></svg-icon>
