解决：Svg图标，vue中使用 .svg 文件

解决：颜色不能切换

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 globally
Vue.component("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 属性