vue中引入icomoon彩色图标,stylus文件

1.进入https://icomoon.io/,选择右上角“IconMoon App”进入。
2. 点击import Icons,选择要生成图标的svg文件。
vue中引入icomoon彩色图标,stylus文件_第1张图片
3. 选择图标后,点击屏幕右下角 Generate Font,进入后可设置图标的名称。
vue中引入icomoon彩色图标,stylus文件_第2张图片
5. 在iconmoon中preferences选择Stylus。 Font Name可以用于下载后的文件名称。Class Prefix是之后每个图标都拥有的统一前缀。vue中引入icomoon彩色图标,stylus文件_第3张图片
6. 点击download,解压后有以下文件。
vue中引入icomoon彩色图标,stylus文件_第4张图片
7. 将fonts文件夹复制到src目录下common中。并在common目录中添加stylus文件夹。将style.styl文件和variables.styl文件复制进去。(可将style.styl改为icon.styl)我的项目目录如下:
vue中引入icomoon彩色图标,stylus文件_第5张图片
8. 更改variables.styl中icomoon-font-path ?= “…/fonts” 路径为fonts所在的路径。
9. 在main.js中引入import “./common/stylus/icon.styl”;
10. 完成后在项目中引用图标。



  1. 结果如下:
    vue中引入icomoon彩色图标,stylus文件_第6张图片

https://github.com/Gesj-yean/vue-demo-collection 记录了更多优秀插件的使用方法。有时间的同学请看我的置顶博客,可太感谢啦。

你可能感兴趣的:(vue中引入icomoon彩色图标,stylus文件)