Vue项目中使用svg图标

demo代码

安装依赖

安装svg-sprite-loader和svgo-loader依赖

npm install svg-sprite-loader svgo-loader --save-dev

配置vue.config.js文件

'use strict'
const path = require('path')


function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
    chainWebpack(config) {
        // set svg-sprite-loader
        config.module
        .rule('svg')
        .exclude.add(resolve('src/icons'))
        .end()

        config.module
        .rule('icons')
        .test(/\.svg$/)
        .include.add(resolve('src/icons'))
        .end()
        .use('svg-sprite-loader')
        .loader('svg-sprite-loader')
        .options({
            symbolId: 'icon-[name]'
        })
        .end()
        .before('svg-sprite-loader')
        .use('svgo-loader')
        .loader('svgo-loader')
        .options({
            plugins: [
                {removeAttrs: {attrs: 'path:fill'}}
            ]
        })
        .end();

    }
}

创建SvgIcon组件

在src/components下新建文件夹SvgIcon及文件index.vue，index.vue中内容如下：

创建svg文件夹和index.js

在src下新建icons文件夹，及icons文件夹下svg文件夹（用于存放svg图片）、index.js文件， index.js文件内容如下

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

在main.js中引入svg

在main.js文件中，引入全局index.js

import './icons'

使用svg组件

这样可以使用css设置color和background。