解决：颜色不能切换

1.使用插件

npm i svg-sprite-loader

2.webpack.base.conf.js 文件中配置

module: {rules: [{test: /\.svg$/,loader: "svg-sprite-loader",include: [resolve("src/icons/svg")], // include => 只处理指定的文件夹下的文件options: {symbolId: "icon-[name]"}},{test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,loader: "url-loader",exclude: [resolve("src/icons/svg")], // exclude => 不处理指定的文件夹下的文件options: {limit: 10000,name: utils.assetsPath("img/[name].[hash:7].[ext]")}},]}直接复制这里：{test: /\.svg$/,loader: "svg-sprite-loader",include: [resolve("src/icons/svg")], // include => 只处理指定的文件夹下的文件options: {symbolId: "icon-[name]"}},{test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,loader: "url-loader",exclude: [resolve("src/icons/svg")], // exclude => 不处理指定的文件夹下的文件options: {limit: 10000,name: utils.assetsPath("img/[name].[hash:7].[ext]")}},

3.src下新建一个icons文件夹

文件目录：

注意：

目录名称，位置可以看自己喜好，但是这里要和你创建的目录对应起来

svg文件夹就存放一些 .svg 文件

index.js: 直接复制

import Vue from "vue";import SvgIcon from "@/components/SvgIcon"; // svg组件// register ponent("svg-icon", SvgIcon);const requireAll = requireContext => requireContext.keys().map(requireContext);const req = require.context("./svg", false, /\.svg$/);requireAll(req);

4.main.js

import "./icons/index.js";

5.需要使用的组件

<svg-icon iconClass="bangzhu"></svg-icon>

iconClass： .svg文件的名字

className：相当于 class

6.成功

关于颜色不能改变

.svg文件style标签里的 fill:#fff 直接删掉

个别会有 stroke，也删掉

但是这种在编辑 css 的时候需要：

网上查了查，说是描边颜色，可能做 svg 的时候只是个描边，所以使用 color 没有效果

.icon{stroke: #fff;}

看实际情况是否添加 color 属性