在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的,需要注意下
    在这里插入图片描述
  2. 安装svg-sprite-loader依赖
    在这里插入图片描述
  3. 在根目录创建vue.config.js,并在vue.config.js中输入如下配置
    在这里插入图片描述
const path = require('path')

function resolve(
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值