插件作用

使在vite中使用svg文件时更方便。支持热更新。

安装

1npm i @webxrd/vite-plugin-svg -D

使用示例：

目录结构

1src
2    assets
3        icons
4            user.svg
5            lock.svg
6            repeat.svg
7        other
8            icons
9                check.svg
10                circle.svg
11                repeat.svg
12main.js
13vite.config.js

vite.config.js

1import path from 'node:path';
2import {vitePluginSvg} from "@webxrd/vite-plugin-svg";
3// 如果需要热更新功能，可以安装：npm i vite-plugin-restart -D
4import ViteRestart from 'vite-plugin-restart'
5import {defineConfig} from 'vite';
6import vue from '@vitejs/plugin-vue';
7// https://vitejs.dev/config/
8export default defineConfig({
9    plugins: [
10        vue(),
11        // ...other plugin
12        
13        vitePluginSvg({
14            // 必要的。必须是绝对路径组成的数组。
15            // 重复的文件名，会按照后来优先原则覆盖。比如 other/icons/repeat.svg 会覆盖 icons/repeat.svg。
16            iconDirs: [
17                path.resolve(__dirname, 'src/assets/icons'),
18                path.resolve(__dirname, 'src/assets/other/icons'),
19            ],
20            symbolIdFormat: 'icon-[name]'
21        }),
22
23        // 热更新
24        ViteRestart({
25            restart: [
26                'src/assets/icons/**/*.svg',
27                'src/assets/other/icons/**/*.svg',
28            ]
29        }),
30    ]
31});
32

使用图标

配置完以后就可以轻松使用 src/assets/icons 里的的图标了

1<svg>
2    <use xlink:href="#icon-user" />
3</svg>
4<svg>
5    <use xlink:href="#icon-lock" />
6</svg>
7<svg>
8    <use xlink:href="#icon-check" />
9</svg>
10<svg>
11    <use xlink:href="#icon-circle" />
12</svg>
13<svg>
14    <use xlink:href="#icon-repeat" />
15</svg>

在vite+vue3中使用

封装公用组件：components/SvgIcon.vue

1<template>
2    <svg class="SvgIcon" aria-hidden="true"><use :xlink:href="symbolId" /></svg>
3</template>
4<script>
5import { defineComponent, computed } from 'vue';
6export default defineComponent({
7    name: 'SvgIcon',
8    props: {
9        name: {
10            type: String,
11            required: true,
12        }
13    },
14    setup(props) {
15        const symbolId = computed(() => `#icon-${props.name}`);
16        return {
17            symbolId,
18        }
19    }
20})
21</script>
22<style scoped>
23    .SvgIcon {
24        font-size: inherit;
25        fill: currentColor;
26        width: 1em;
27        height: 1em;
28        text-indent: 0;
29        vertical-align: bottom;
30    }
31</style>

在组件中使用。（或者注册在全局，使用起来更方便）

1<template>
2    <div>
3        <SvgIcon name="user"></SvgIcon>
4        <SvgIcon name="lock"></SvgIcon>
5        <SvgIcon name="check"></SvgIcon>
6        <SvgIcon name="circle"></SvgIcon>
7    </div>
8</template>
9<script>
10import { defineComponent } from 'vue';
11import SvgIcon from './components/SvgIcon.vue';
12export default defineComponent({
13    components: {
14        SvgIcon,
15    },
16})
17</script>
18<style scoped>
19    .SvgIcon  {
20        font-size: 30px;
21        color: blue;
22    }
23</style>