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

目录

使用svg-sprite-loader好处

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

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

安装svg-sprite-loader依赖

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

拷贝icons目录到src目录下，固定的。别急，下面会提供下载链接

贝SvgIcon目录到src目录下的components目录下，固定的。别急，下面会提供下载链接

上iconfont上搜索需要的icon图标，下载svg格式文件，放入到src>icons>svg目录下

---

使用svg-sprite-loader好处

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

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

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

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

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

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

安装svg-sprite-loader依赖

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

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: () => ({
  
  })
}

拷贝icons目录到src目录下，固定的。别急，下面会提供下载链接

贝SvgIcon目录到src目录下的components目录下，固定的。别急，下面会提供下载链接

上iconfont上搜索需要的icon图标，下载svg格式文件，放入到src>icons>svg目录下

在main.js页面里面引入icons

代码如下：

import '@/icons' // icon

在页面中使用svg-sprite-loader图标。

 使用代码如下：

//icon-class：对应的是iconfont下载的svg文件名
//class-name：对应的是自定义的css类名，在这里随意修改图标大小和颜色
<svg-icon icon-class="cert" class-name="green-cert"></svg-icon>

 icon-class：对应的是iconfont下载的svg文件名
class-name：对应的是自定义的css类名，在这里随意修改图标大小和颜色

 最终演示效果如下：