fusion design 字体图标离线部署的正确姿势

829 阅读1分钟

背景

官方文档地址:离线部署字体 Icon

看了官方文档介绍,可能会有点摸不着头脑。现自己总结一下。

  • 使用的是ice.js 2.x版本创建的目录结构

  • 使用了自定义的主题包

  • 除了组件库的自己的icon,还使用了iconfont的图标

组件库中的自定义主题包中的字体图标

第一步:下载icon

首先在node_modules文件夹中找到自己的主题包,位置在node_modules/@alifd下面,找到主题包中的variables.scss 或者 variables.less文件,里面有个$icon-font-path变量,其值就是主题包用到了iconfont在线地址。

image.png

复制这个地址到浏览器中访问,分别下载.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文件夹,将下载的三个文件放置进去。如下图所示:

image.png

第三步:使用下载的icon

src/global.scss中最顶部添加 $icon-font-path变量

image.png

变量的值:本地开发的时候可以采用127.0.0.1:端口号的形式,如果部署到线上的话,那就修改线上的ip 端口号即可。

使用iconfont的图标

在iconfont官网将自己用给到的图标下载下来,解压之后找到iconfont.js文件,将iconfont.js文件放在public文件夹中,fusion design提供的使用iconfont图标的方法中,scriptUrl的值指向public里面的iconfont.js即可。

image.png