vue 引入第三方icon库

在项目中引入第三方矢量图标库已经成为了非常常见的需求。这是因为矢量图不仅体积小,而且在放大时不会失真,颜色也可以轻松修改。相比于传统的方式去加载大量的图片(假设你没有用“雪碧图”组合图片),它还可以节省很多次http请求,给网页性能带来巨大的提升。

下面我们以非常流行的阿里巴巴库为例

1. 登录阿里巴巴矢量图标库官网

进入阿里巴巴矢量图标库官网 登录用户名

选择我的项目


image

在我的项目页面点击右侧“新建项目”图标新建一个项目:


image

这里最重要的是FontClass和Font Family这两个值,FontClass的值是该图标库中图标的前缀,比如这里的前缀写成了icon-,那么你在项目中就可以使用icon-xxx来引用图标库中的图标。Font Family是图表库的名字,默认情况下,一个i标签的class中必须要带这个类名,才能引用到该图标库中的图标,不过你可以通过修改生成的iconfont.css文件来以前缀作为图标库标识,这个我们后面会讲到。

项目创建完成后,你就可以去图标库中搜索你需要的图标,或者有条件的话可以自己做。鼠标放到图标上时会有三个选项,选择第一个购物车即可添加入库:


image

你可以将任意多的图标添加到购物车,然后回到“我的项目”,向下滑动,可以看到下图:


image

点击这个购物车,选择添加至项目:


image

好的,现在你已经构建了自己的第三方图标库。接下来就是需要把它引入到项目中。
image

首先选择Font class,然后点击下载至本地,就可以得到一个download.zip压缩包,然后把压缩包解压,打开至最内层,就可以看到所有相关的图标库文件。


image

一般来说我们只需要这几个文件即可。在项目的 assets 下新建一个文件夹 icon(如果没有使用webpack进行项目管理,可以将其放在任意位置,只要在需要引入图标库的HTML中可以用link标签引用到iconfont.css样式文件即可),如icon,然后把这几个文件全部粘贴进去。
//  main.js 引入字体图标
import './assets/icon/iconfont.css'

// 或者在html引入
<link rel="stylesheet" type="text/css" href="./assets/icon/iconfont.css">

假如你需要在项目中引入多个图标库,那么你需要保证这些图标库的Font Family不能重复。如果这些图标库使用相同的前缀,那么你就不可以像上面一样通过前缀来标识图标库,而需要按默认的格式,在class中加上图标库名,防止图标库冲突。如果它们的前缀各不相同,那么你仍然可以配置class,用前缀作为图标库标识。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。