vue3中配置svg

• 整体目标

实现一个在 Vue 项目中方便使用 SVG 图标，允许在页面中通过自定义标签直接引用 SVG 图标，无需手动引入每个图标文件。

• 具体步骤

1. 使用方式

页面中直接写标签，myicon是svg图片文件名，不需要引入。myicon文件放在指定的svg目录中即可。

<svg-icon icon-class="myicon" 

2. 实现方式

（1）新建vite文件夹，建一个plugins文件夹，新建一个svg-icon.js文件，内容如下

// 用到插件 "vite-plugin-svg-icons": "2.0.1" 自行下载依赖

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
import path from 'path';

// 此函数用于创建 SVG 图标插件实例
export default function createSvgIcon(isBuild) {
    // 返回一个通过 createSvgIconsPlugin 创建的插件实例
    return createSvgIconsPlugin({
        // iconDirs 是一个数组，指定了包含 SVG 图标的目录路径
        // 通过 path.resolve 和 process.cwd 获取当前工作目录，然后指向'src/assets/icons/svg'目录
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons/svg')],
        // symbolId 定义了生成的 SVG 图标的唯一标识符格式
        symbolId: 'icon-[dir]-[name]',
        // svgoOptions 根据传入的 isBuild 参数确定
        // 如果 isBuild 为 true，可能在构建阶段传递一些优化 SVG 的选项给 svgo
        svgoOptions: isBuild,
    });
}

（2）在plugins文件夹中，新建一个index.js文件, 引入刚才创建的svg-icon.js

import vue from '@vitejs/plugin-vue';
import createSvgIcon from './svg-icon';

// 此函数用于创建 Vite 插件数组
export default function createVitePlugins(viteEnv, isBuild = false) {
    // 定义一个数组来存储 Vite 插件
    const vitePlugins = [vue()];
    // 将创建 SVG 图标插件的函数结果添加到插件数组中
    vitePlugins.push(createSvgIcon(isBuild));
    // 如果是构建阶段（isBuild 为 true），将压缩插件函数的结果添加到插件数组中
    isBuild && vitePlugins.push(...createCompression(viteEnv));
    // 返回 Vite 插件数组
    return vitePlugins;
}

(3) 在vue.config.js文件中配置，如图

// 引入
import createVitePlugins from './vite/plugins';
plugins: createVitePlugins(env, command === 'build'),   // 用于指定要应用于项目构建过程的插件列表

 (4)在compenonts文件夹中建一个SvgIcon文件夹，新建index.js文件

import * as components from '@element-plus/icons-vue';

// 默认导出
export default {
    // install 方法用于将插件安装到 Vue 应用实例中
    install: (app) => {
        // 遍历从 '@element-plus/icons-vue' 导入的所有组件
        for (const key in components) {
            // 获取当前遍历到的组件的配置信息
            const componentConfig = components[key];
            // 将当前组件注册到 Vue 应用实例中，使用组件的名称作为注册名
            app.component(componentConfig.name, componentConfig);
        }
    },
};

(5) 在SvgIcon文件夹中，新建index.vue文件

<template>
    <!-- SVG 元素，用于显示图标 -->
    <svg :class="svgClass" aria-hidden="true">
        <!-- 使用 xlink:href 属性引用图标 -->
        <use :xlink:href="iconName" :fill="color" />
    </svg>
</template>


<script>
export default defineComponent({
    props: {
        // 接收传递进来的图标类名，类型为字符串，且是必需的属性
        iconClass: {
            type: String,
            required: true,
        },
        // 接收传递进来的额外的类名，类型为字符串，默认值为空字符串
        className: {
            type: String,
            default: '',
        },
        // 接收传递进来的颜色值，类型为字符串，默认值为空字符串
        color: {
            type: String,
            default: '',
        },
    },
    setup(props) {
        return {
            // 计算属性，根据传递进来的 iconClass 生成图标名称
            iconName: computed(() => `#icon-${props.iconClass}`),
            // 计算属性，根据是否有 className 属性来生成 SVG 的类名
            svgClass: computed(() => {
                if (props.className) {
                    return `svg-icon ${props.className}`;
                }
                return 'svg-icon';
            }),
        };
    },
});
</script>

<style scope lang="scss">
.sub-el-icon,
.nav-icon {
    display: inline-block;
    font-size: 15px;
    margin-right: 12px;
    position: relative;
}
.svg-icon {
    width: 1.15em;
    height: 1.15em;
    position: relative;
    fill: currentColor;
    vertical-align: -2px;
}
</style>

（6）main.js配置

import "virtual:svg-icons-register";
import SvgIcon from "@/components/SvgIcon";
import elementIcons from "@/components/SvgIcon/svgicon";

app.use(elementIcons);
app.component('svg-icon', SvgIcon);