文章目录

版本说明

• vue：2.6.11
• vuecli：4.5.7

一、项目目录

二、npm安装svg-sprite-loader

npm install svg-sprite-loader

三、vue.config.js添加配置

// 添加 svg loaderconst svgRule = config.module.rule(&＃39;svg&＃39;);svgRule.uses.clear();svgRule.test(/\.svg$/)// .include.add(resolve("src/assets/imgs")).include.add(path.resolve(__dirname, &＃39;./src/assets/svgs&＃39;)).end().use(&＃39;svg-sprite-loader&＃39;).loader(&＃39;svg-sprite-loader&＃39;).options({symbolId: &＃39;icon-[name]&＃39;}).end();

四、封装SvgIcon.vue组件

五、注册全局组件

    1：svgs文件夹下新建index.js

// 默认导入所有src文件夹下的icons文件(自动导入，不需手动一个个导入)
import Vue from "vue";
import SvgIcon from "@/components/SvgIcon.vue";Vue.component("svg-icon", SvgIcon);//写了组件在打开 用于注册组件const requireAll = requireCOntext=> requireContext.keys().map(requireContext);
const req = require.context("./svg", false, /.svg$/);
requireAll(req);

    2：main.js中引用index.js

import "@/assets/svgs/index.js";