Vite for Vue项目中使用vite-plugin-svg-icons插件加载svg图标为组件使用

版本

Vite：4.0.0
Vue：3.2.45
vite-plugin-svg-icons：2.0.1

直接加载Svg图标

在目前的版本中已支持在组件中直接渲染svg图标，如下：

<template>
    <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 23.03 23">
        <defs></defs>
        <path
            data-name="多边形 1"
            d="M1592.26,2439h-11.51l-5.76-10,5.76-10h11.51l5.76,10Zm-1.02-18h-9.5l-4.74,8,4.74,8h9.5l4.75-8Zm1.51,8.53a1,1,0,0,1-1.37-.37l-2.5-4.33a1,1,0,0,1,1.74-1l2.5,4.33A1.01,1.01,0,0,1,1592.75,2429.53Zm-6.25.47a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,1586.5,2430Zm-4.12,4.16-2.5-4.33a1,1,0,0,1,1.74-1l2.5,4.33A1,1,0,0,1,1582.38,2434.16Z"
            transform="translate(-1575 -2417.5)"
            fill="#fff" />
    </svg>
</template>

此时Vite项目中的渲染结果如下：

但一个一个将svg内容放入组件并不现实，这会浪费大量的人力以及增加大量的svg图标子组件，因此需要一个可以动态加载Svg图标的东西，而 vite-plugin-svg-icons 组件可以帮你做到这一步

插件使用方式

安装插件

yarn add vite-plugin-svg-icons -D
# or
npm i vite-plugin-svg-icons -D
# or
pnpm install vite-plugin-svg-icons -D

修改 vite.config.ts 配置文件

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
import path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        // 添加以下6行，并根据自己需求进行配置
        createSvgIconsPlugin({
            // 指定需要缓存的图标文件夹
            iconDirs: [path.resolve(process.cwd(), 'src/plugins/svg-icon/svgs')],
            // 指定symbolId格式
            symbolId: '[name]',
        }),
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url)),
        },
    },
});

修改 tsconfig.json 文件

如果你项目中没有使用TS，那么无需修改

"types": [
	...
    "vite-plugin-svg-icons/client"
]

在 src/plugins/svg-icon/ 目录下新建 SvgIcon.vue ，并添加如下内容

使用了setup语法糖写法

<template>
    <svg aria-hidden="true" :width="width" :height="height">
        <use :xlink:href="symbolId" :fill="fill" />
    </svg>
</template>

<!-- SvgIcon组件，可将svg图标直接当组件使用 -->
<script setup lang="ts">
import { computed } from 'vue';

/**
 * 输入属性             类型                默认值              是否必选                描述
 *  name              string             undefined              是                  svg图标名字
 *  width             number                19                  否                  svg图标宽度
 *  height            number                19                  否                  svg图标高度
 *  fill              string              #ffffff               否                  svg图标填充颜色
 */
const props = withDefaults(
    defineProps<{
        name: string;
        width?: number;
        height?: number;
        fill?: string;
    }>(),
    {
        width: 19,
        height: 19,
        fill: '#ffffff',
    }
);

// 获取svg图标名称，需要和vite.config.ts中的配置保持一致
const symbolId = computed(() => `#${props.name}`);
</script>

<style scoped lang="scss"></style>

在 src/plugins/svg-icon/ 目录下新建 svgs 文件夹，并将需要用到的svg图标放入其中

在 src/plugins/svg-icon/ 目录下新建 index.ts ，并添加如下内容

import { type App } from 'vue';
import SvgIcon from './SvgIcon.vue';
import 'virtual:svg-icons-register';
/**
 * Svg图标插件
 */
export default {
    install: (app: App): void => {
        app.component('svg-icon', SvgIcon);
    },
};

全局注册 SvgIcon 组件，在 main.ts 中新增

import svgIcon from './plugins/svg-icon';
....
const app = createApp(App);
app.use(svgIcon);

然后就可以在任意一个组件中直接使用该组件了

<template>
    <svg-icon name="model"></svg-icon>
</template>