1.引用
npm install svg-sprite-loader -S
创建icons文件夹;
Vue.config.json中添加
const svgRule = config.module.rule("svg");
svgRule.uses.clear();
svgRule
.use("svg-sprite-loader")
.loader("svg-sprite-loader")
.options({
symbolId: "icon-[name]",
include: ["./src/icons"]
});
2.创建index.js文件,解析文件
import Vue from "vue";
import SvgIcon from "./svgIcon.vue";
//自定义全局组件
Vue.component("svg-icon", SvgIcon);
const req = require.context("./svg", false, /\.svg$/); //读取指定目录的文件第一个:目录第二个:是否遍历子级目录第三个:定义遍历文件规则
const requireAll = requireContext => {
return requireContext.keys().map(requireContext);
};
requireAll(req);
3.创建svgIcon.vue文件
<template>
<svg :class="svgClass" aria-hidden=