插件作用

在vite中使用svg文件时更方便。支持热更新。 注册名称，主要为了解决使用qiankun时多应用使用svg，图标不显示的问题

安装

1npm i vite-plugin-svg-qk-icon -D

配置

vite.config.js

1import path from 'path';
2import {vitePluginSvg} from "vite-plugin-svg-qk-icon";
3import {defineConfig} from 'vite';
4// https://vitejs.dev/config/
5export default defineConfig({
6    plugins: [
7        // ...other plugin
8        
9        vitePluginSvg({
10            // 必要的。必须是绝对路径组成的数组。
11            iconDirs: [
12                path.resolve(__dirname, 'src/assets/icons'),
13                path.resolve(__dirname, 'src/assets/other/icons'),
14            ],
15
16            //注册名称，主要为了解决使用qiankun时多应用使用svg，图标不显示的问题
17            registerModuleName:'virtual:vite-plugin-svg-qrcode-register',
18            // 必要的。入口script
19            main: path.resolve(__dirname, 'src/main.js'),
20            symbolIdFormat: 'icon-[name]'
21        }),
22    ]
23});
24

示例：在vite+vue3中使用

1、封装公用组件：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 { symbolId }
17    }
18})
19</script>
20<style scoped>
21    .SvgIcon {
22        font-size: inherit;
23        fill: currentColor;
24        width: 1em;
25        height: 1em;
26        text-indent: 0;
27    }
28</style>

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

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