目录
业务背景:
当项目足够复杂时,本地管理icons资源的劣势变得愈加明显,首先是占用项目空间,其次以组件形式引入单个svg文件挺麻烦,其次使用iconfont的icon还需要创建一个文件,将svg内容复制粘贴到本地。以上方面展示了本地管理icons资源的空间和时间维护成本。因此我们希望在iconfont新建一个项目,托管我们使用到的所有外部icons。
解决办法:
1. 新建项目
1.1 进入我的项目页面
进入iconfont官网,
1.2 新建项目
2. 在线引入方式
2.1 添加购物车
找到满意的图标,鼠标聚标可以看到图标上出现购物车按钮,点击此按钮可以选择将该图表添加到购物车
2.2 添加到项目
添加到购物车成功后,会看到顶部栏的购物车上面出现红色的数字1,点击顶部栏的购物车
2.3 下载至本地
添加到项目之后,进入到项目页面,选择font class引入方式,点击下载至本地
2.4 解压缩
会看到以下文件目录:
2.5 复制到项目
将这些文件复制到项目icons目录,存放目录可以参考${relative_path_to_your_project}/static/icons
3. 全局引入 iconfont.css样式文件
在vue项目的main.js或App.vue文件引入,代码示例如下:
import '../static/icons/iconfont.css'
4. 使用iconfont
注意:
使用方式和引入iconfont的方式要一致,前面介绍了font class引入的方式,因此仅仅介绍font class的使用方式
4.1 font class方式
通过class使用图标,如:icon-daima;
<i class="iconfont icon-daima"></i>
注意:
引入时的icon-前缀是根据你创建项目时定义的前缀需要保持一致