以前使用Svg的时候会图简单直接将内容巨长的Svg代码粘贴在项目中，结果导致需要用Svg图标的部分代码巨长，今天写项目又需要使用Svg了，于是想着对其进行封装。
使用vite-plugin-svg-icons插件。
安装：
1
| npm i vite-plugin-svg-icons -D
|
在src/assets/下新建icon文件夹，这个文件夹下存放我们以后要用的.svg文件。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| import {createSvgIconsPlugin} from 'vite-plugin-svg-icons';
export default defineConfig({
//...
plugins:[
//...
createSvgIconsPlugin({
iconDirs:[
// 自己的svg存放目录
path.resolve(process.cwd(),'src/assets/icon'),
],
symbolId:'icon-[name]', // 设置symbol的id
})
]
})
|
在main.ts中加入：
1
| import 'virtual:svg-icons-register';
|
在src/components/新建SvgIcon文件夹，在其中新建index.vue，内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <script lang="ts" setup>
const props = defineProps({
name: {
type: String,
required: true
},
color: {
type: String,
default: '#ccc'
},
width: {
type: String,
default: '1em'
},
height: {
type: String,
default: '1em'
},
});
const symbleId = `#icon-${props.name}`;
</script>
<template>
<svg aria-hidden="true" class="svg-icon" :width="width" :height="height">
<use :xlink:href="symbleId" :fill="color" />
</svg>
</template>
<style scoped>
</style>
|
之后就能在页面使用svg啦。
1
2
3
| <template>
<SvgIcon name="dashboard" color="red" width="50px" height="50px"/>
</template>
|