Vue3+Vite+Svg

以前使用Svg的时候会图简单直接将内容巨长的Svg代码粘贴在项目中,结果导致需要用Svg图标的部分代码巨长,今天写项目又需要使用Svg了,于是想着对其进行封装。

插件安装

使用vite-plugin-svg-icons插件。

安装:

1
npm i vite-plugin-svg-icons -D

src/assets/下新建icon文件夹,这个文件夹下存放我们以后要用的.svg文件。

配置vite.config.ts

 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';

封装SvgIcon组件

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>