编程

vue-cli3配置svg图标

chenmo · 10月8日 · 2021年 · · 370次已读
vue-cli3与svg

Vue-cli3引入封装Svg图标

前言

在前端项目中使用图标,除了字体图标以外,最喜欢用的应该就是svg图标了,不仅放大不失真,而且可以和字体图标一样随意更改颜色。之前都是使用的vue-cli2项目引入svg图标,后来开始使用vue-cli3了,配置有些不同,但大体相似,在此做个记录,避免重复造轮子。

使用方法

安装插件

安装svg-sprite-loader

创建组件

components文件夹下创建svgIcon文件夹,并在svgIcon文件夹中创建一个新的组件,名字为SvgIcon.vue,内容如下:

创建图标文件夹

src文件夹下创建icons文件夹,并在icons文件夹里创建svg文件夹,将需要的svg图标放在svg文件夹中。

随后在icons文件夹中创建index.js文件,用来使用webpack自动引入svg图标。index.js内容如下:

main.js中引入index.js:

自定义配置

vue-cli3项目需要自定义配置才可以使用svg-sprite-loader。在根目录(与src同级)创建名字为vue.config.js的文件,内容如下:

随后重启项目即可。

0 条回应

🎉 总访问量:247201 今日访问量:300 您是今天第:300 个访问者🎉