svg雪碧图(svg-sprite-loader)方案

webpack使用svg-sprite-loader传送门
vite使用vite-plugin-svg-icons传送门

步骤、原理详细介绍在↑。
下面是步骤总结：

svg-sprite-loader:

1. 安装依赖：yarn add svg-sprite-loader -D
2. vue.config.js配置插件。需要先移除原先的svg规则，再单独处理。

const { defineConfig } = require("@vue/cli-service");
const path = require("path");function resolve(dir) {return path.join(__dirname, dir);
}
module.exports = defineConfig({chainWebpack: (config) => {config.module.rule("svg").exclude.add(resolve("src/assets/svg")).end();config.module.rule("svg-sprite-loader").test(/\.svg$/).include.add(resolve("src/assets/svg")) // 处理svg目录.end().use("svg-sprite-loader").loader("svg-sprite-loader").options({symbolId: "icon-[name]",});},
});

3. main.js全局导入目录下的svg。但不懂，为啥配置了插件后，仍需导入动作。

const req = require.context("/src/assets/svg", true, /\.svg$/);
req.keys().forEach(req);

4. 定义svgIcon.vue组件

<template><svg :class="svgClass" aria-hidden="true"><use :xlink:href="iconName" /></svg>
</template><script setup>
import { computed } from "vue";
const props = defineProps({name: {type: String,required: true,},className: {type: String,default: () => "",},
});const iconName = computed(() => {console.log(`#icon-${props.name}`);return `#icon-${props.name}`;
});
const svgClass = computed(() => {return props.className ? "svg-icon " + props.className : "svg-icon";
});
</script><style scoped lang="scss">
.svg-icon {width: 1em;height: 1em;vertical-align: middle;fill: currentColor;
}
</style>

5. 使用

<svg-icon name="cancel1" />

vite-plugin-svg-icons:

1. 安装依赖：yarn add vite-plugin-svg-icons fast-glob -D
2. vite.config.js 配置插件

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),vueJsx(),// 注册所有的svg文件生成svg雪碧图createSvgIconsPlugin({iconDirs: [fileURLToPath(new URL('./src/assets/svg', import.meta.url))], // icon存放的目录symbolId: 'icon-[name]', // symbol的idinject: 'body-last', // 插入的位置customDomId: '__svg__icons__dom__' // svg的id})],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}
})

4. main.js引入一个???

import "virtual:svg-icons-register"

5. 定义svg组件和使用。同上不重复了。