在vue-cli3项目中使用svg-sprite-loader

使用 svg-sprite-loader 好处

 

我用 vue-cli3.0 + elementUI 搭建项目，但是 elementUI 的 icon 组件提供的图标并不是很齐全，当我需要其他图标的时候，我是切图呢还是用 iconfont 呢？

1. 使用切图图片，没有办法自定义改变图标大小和颜色
2. 使用 iconfont 图标，需要先注册账号，这时候如果公司有统一的账号管理还好，万一没有，需要开发者自己创建账号管理，以后离职了，怎么维护是个问题。

后来，在 vue-admin-template 框架中看到有使用 svg-sprite-loader，这样我们就可以相当于在使用 icon 组件一样，只要图标颜色有更改，就可以通过 color 来改变, 又不需要注册账号管理

 

手把手图文教程：如何引入 svg-sprite-loader

 

1、先用 vue-cli 创建一个空项目

使用 vue create project-name 命令创建一个默认的项目，这个是区别于 cli2.0 的，需要注意下

vue create vue-demo
cd vue-demo

 

2、安装 svg-sprite-loader 依赖

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

 

3、在根目录创建 vue.config.js，并在 vue.config.js 中输入如下配置

 

注意图片 标注2 处：为 svg 图标存放目录

 

const path = require('path')

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

module.exports = {
  chainWebpack: config => {
    config.module.rules.delete("svg"); //重点:删除默认配置中处理svg,
    config.module
      .rule('svg-sprite-loader')
      .test(/\.svg$/)
      .include
      .add(resolve('src/icons')) //处理svg目录
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
  },
  configureWebpack: () => ({
  
  })
}