vite-plugin-svg-qk-icon

插件作用

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

安装

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

配置

vite.config.js

import path from 'path';
import {vitePluginSvg} from "vite-plugin-svg-qk-icon";
import {defineConfig} from 'vite';
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        // ...other plugin
        
        vitePluginSvg({
            // 必要的。必须是绝对路径组成的数组。
            iconDirs: [
                path.resolve(__dirname, 'src/assets/icons'),
                path.resolve(__dirname, 'src/assets/other/icons'),
            ],

            //注册名称，主要为了解决使用qiankun时多应用使用svg，图标不显示的问题
            registerModuleName:'virtual:vite-plugin-svg-qrcode-register',
            // 必要的。入口script
            main: path.resolve(__dirname, 'src/main.js'),
            symbolIdFormat: 'icon-[name]'
        }),
    ]
});

示例：在vite+vue3中使用

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

<template>
    <svg class="SvgIcon" aria-hidden="true"><use :xlink:href="symbolId" /></svg>
</template>
<script>
import { defineComponent, computed } from 'vue';
export default defineComponent({
    name: 'SvgIcon',
    props: {
        name: {
            type: String,
            required: true,
        }
    },
    setup(props) {
        const symbolId = computed(() => `#icon-${props.name}`)
        return { symbolId }
    }
})
</script>
<style scoped>
    .SvgIcon {
        font-size: inherit;
        fill: currentColor;
        width: 1em;
        height: 1em;
        text-indent: 0;
    }
</style>

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

<template>
    <div>
        <SvgIcon name="ban"></SvgIcon>
    </div>
</template>
<script>
import { defineComponent } from 'vue';
import SvgIcon from './components/SvgIcon.vue';
export default defineComponent({
    components: { SvgIcon },
})
</script>
<style scoped>
    .SvgIcon  {
        font-size: 30px;
        color: blue;
    }
</style>