vue使用 svg图片以及修改svg图片颜色

一、如何使用svg

1.创建svg专用文件夹，里面只存放svg图片

2. 创建SvgIcon组件

 3.创建index.js

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component

// register globally
Vue.component('svg-icon', SvgIcon)

const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

4.main.js 引入 

import '@/icons' 

二、修改svg图片颜色

修改颜色的时候要注意，首先svg文件里面不能有fill属性，否则无法修改，例如：

 

 如果有的，需要把fill属性全部去掉。

但是下面这种格式，我去掉fill 也无法修改，只能重新切图了

 接下来就是使用修改颜色了（伪代码）：

  //使用
    //修改颜色
  .svg-icon {
        fill: rgba(0, 0, 0, 0.65);
  }