npm i svg-sprite-loader -D

vue inspect --rule svg

const path = require("path");
// 引入path模塊
const resolve = dir => path.join(__dirname, dir);

module.exports = {
? ...,
? // 配置路徑別名
? chainWebpack: config => {
? ? // vue inspect --rule svg ?// 使用以上指令，可以獲取vue配置的loader規(guī)則
? ? // svg loader 取消src/icons目錄下的處理
? ? config.module.rule("svg").exclude.add(resolve("src/icons"));
? ? // 添加自定義loader規(guī)則 icons，只處理src/icons目錄
? ? config.module
? ? ? .rule("icons")
? ? ? .test(/\.svg$/)
? ? ? .include.add(resolve("src/icons")) // 上下文變化
? ? ? .end() // 返回上下文
? ? ? .use("svg-sprite-loader")
? ? ? .loader("svg-sprite-loader")
? ? ? .options({ symbolId: "icon-[name]" });
? },
? ...
};

/* 以下是我們修改后的svg loader規(guī)則 */
/* config.module.rule('svg') */
{
? test: /\.(svg)(\?.*)?$/,
? exclude: [
? ? '/Users/{UserName}/project/src/icons' /* 這個(gè)是不包含的目錄 */
? ],
? use: [
? ? /* config.module.rule('svg').use('file-loader') */
? ? {
? ? ? loader: '/Users/{UserName}/project/node_modules/file-loader/dist/cjs.js',
? ? ? options: {
? ? ? ? name: 'img/[name].[hash:8].[ext]'
? ? ? }
? ? }
? ]
}

// 以下是我們添加的icons loader規(guī)則
/* config.module.rule('icons') */
{
? test: /\.svg$/,
? include: [
? ? '/Users/{UserName}/project/src/icons' /* 這個(gè)是包含的目錄 */
? ],
? use: [
? ? /* config.module.rule('icons').use('svg-sprite-loader') */
? ? {
? ? ? loader: 'svg-sprite-loader',
? ? ? options: {
? ? ? ? symbolId: 'icon-[name]'
? ? ? }
? ? }
? ]
}

<template>
? <svg v-on="$listeners" :class="svgClass">
? ? <use :xlink:href="iconName" rel="external nofollow" ></use>
? </svg>
</template>

<script>
export default {
? name: "SvgIcon",
? props: {
? ? iconClass: {
? ? ? type: String,
? ? ? default: ""
? ? },
? ? className: {
? ? ? type: String,
? ? ? default: ""
? ? }
? },
? computed: {
? ? iconName() {
? ? ? return `#icon-${this.iconClass}`;
? ? },
? ? svgClass() {
? ? ? if (this.className) {
? ? ? ? return "svg-icon " + this.className;
? ? ? } else {
? ? ? ? return "svg-icon";
? ? ? }
? ? }
? }
};
</script>

<style scoped>
.svg-icon {
? width: 1em;
? height: 1em;
? vertical-align: -0.15em;
? fill: currentColor;
? overflow: hidden;
}
</style>

import Vue from "vue";
import SvgIcon from "@/components/SvgIcon.vue";
const isEnv = process.env.NODE_ENV === "development";
// 自動(dòng)加載 icons 目錄下的所有svg
const req = require.context("./svg", true, /\.svg$/);
const svgNameSet = new Set();
req.keys().map(url => {
? const pathSplit = url.split("/");
? const fileName = pathSplit[pathSplit.length - 1];
? isEnv && console.log(fileName);
? if (svgNameSet.has(fileName)) {
? ? isEnv && console.error("圖標(biāo)名稱重復(fù)，請(qǐng)檢查");
? } else {
? ? svgNameSet.add(fileName);
? ? return req(url); // 可以用于異步require
? }
});

// 全局注冊(cè)SvgIcon.vue組件
Vue.component("svg-icon", SvgIcon);

// install
npm i svgo-loader -D

// vue.config.js
// 接上面svg的配置
...
.end()
.use('svgo-loader')
.loader('svgo-loader')
.end()