@webxrd/vite-plugin-svg v1.1.2

插件作用

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

安装

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

使用示例：

目录结构

src
    assets
        icons
            user.svg
            lock.svg
            repeat.svg
        other
            icons
                check.svg
                circle.svg
                repeat.svg
main.js
vite.config.js

vite.config.js

import path from 'path';
import {vitePluginSvg} from "@webxrd/vite-plugin-svg";
// 如果需要热更新功能，可以安装：npm i vite-plugin-restart -D
import ViteRestart from 'vite-plugin-restart'
import {defineConfig} from 'vite';
import vue from '@vitejs/plugin-vue';
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        // ...other plugin
        
        vitePluginSvg({
            // 必要的。必须是绝对路径组成的数组。
            // 重复的文件名，会按照后来优先原则覆盖。比如 other/icons/repeat.svg 会覆盖 icons/repeat.svg。
            iconDirs: [
                path.resolve(__dirname, 'src/assets/icons'),
                path.resolve(__dirname, 'src/assets/other/icons'),
            ],
            symbolIdFormat: 'icon-[name]'
        }),

        // 热更新
        ViteRestart({
            restart: [
                'src/assets/icons/**/*.svg',
                'src/assets/other/icons/**/*.svg',
            ]
        }),
    ]
});

使用图标

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

<svg>
    <use xlink:href="#icon-user" />
</svg>
<svg>
    <use xlink:href="#icon-lock" />
</svg>
<svg>
    <use xlink:href="#icon-check" />
</svg>
<svg>
    <use xlink:href="#icon-circle" />
</svg>
<svg>
    <use xlink:href="#icon-repeat" />
</svg>

在vite+vue3中使用

封装公用组件：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;
        vertical-align: bottom;
    }
</style>

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

<template>
    <div>
        <SvgIcon name="user"></SvgIcon>
        <SvgIcon name="lock"></SvgIcon>
        <SvgIcon name="check"></SvgIcon>
        <SvgIcon name="circle"></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>