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

目录概览

使用svg-sprite-loader好处
手把手图文教程：如何引入svg-sprite-loader
上iconfont上搜索需要的icon图标，下载svg格式文件，放入到src>icons>svg目录下
在页面里面引入icons
在页面中使用svg-sprite-loader图标。
最终演示效果如下：
参考文章
icons和SvgIcon目录下载

使用svg-sprite-loader好处

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

使用切图图片，没有办法自定义改变图标大小和颜色

使用iconfont图标，需要先注册账号，这时候如果公司有统一的账号管理还好，万一没有，需要开发者自己创建账号管理，以后离职了，怎么维护是个问题。

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

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

先用vue-cli创建一个空项目
使用vue create project-name命令创建一个默认的项目，这个是区别于cli2.0的，需要注意下
安装svg-sprite-loader依赖
在根目录创建，并在中输入如下配置

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目录下

在这里插入图片描述

注意：文件的命名注意区分开，后续组件直接通过class=“名字”找到对应的svg图标

在页面里面引入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类名，在这里随意修改图标大小和颜色

最终演示效果如下：

在这里插入图片描述
怎么样，是不是很简单！

参考文章

/post/6844903695478439949
/package/svg-sprite-loader

icons和SvgIcon目录下载

/download/eadio/12838059

秒客网