背景
官方文档地址:离线部署字体 Icon
看了官方文档介绍,可能会有点摸不着头脑。现自己总结一下。
-
使用的是ice.js 2.x版本创建的目录结构
-
使用了自定义的主题包
-
除了组件库的自己的icon,还使用了iconfont的图标
组件库中的自定义主题包中的字体图标
第一步:下载icon
首先在node_modules文件夹中找到自己的主题包,位置在node_modules/@alifd下面,找到主题包中的variables.scss 或者 variables.less文件,里面有个$icon-font-path
变量,其值就是主题包用到了iconfont在线地址。
复制这个地址到浏览器中访问,分别下载.ttf
.woff
.woff2
三种格式的字体文件。
注意:
下载的时候后缀名需要自己添加,否则下载不到。例如复制下来的地址是//at.alicdn.com/t/font_2567334_oyj2tp93orq
, 那么你需要修改下url去下载:
http://at.alicdn.com/t/font_2567334_oyj2tp93orq.ttf
http://at.alicdn.com/t/font_2567334_oyj2tp93orq.woff
http://at.alicdn.com/t/font_2567334_oyj2tp93orq.woff2
第二步:归置icon
下载文件的时候可以自己定义下载下来字体文件的名字,例如叫iconFont.ttf
iconFont.woff
iconFont.woff2
, 在public文件夹下面新建fusion-icon文件夹,将下载的三个文件放置进去。如下图所示:
第三步:使用下载的icon
在src/global.scss
中最顶部添加 $icon-font-path
变量
变量的值:本地开发的时候可以采用127.0.0.1:端口号的形式,如果部署到线上的话,那就修改线上的ip 端口号即可。
使用iconfont的图标
在iconfont官网将自己用给到的图标下载下来,解压之后找到iconfont.js文件,将iconfont.js文件放在public文件夹中,fusion design提供的使用iconfont图标的方法中,scriptUrl的值指向public里面的iconfont.js即可。