tinper-bee使用CDN修改字体图标——iconfont更新手册

[yangchch6]

在官网Icon组件示例中列举了tinper-bee的所有字体图标，本文总结了开发者更新字体图标的具体步骤。

前面的

• 关于字体图标，tinper-bee组件库默认加载cdn的地址，如果你的项目是私有化部署，不能访问外网资源的话，可以查阅这篇文章
• 关于字体文件，总的包括demo的html和css文件、iconfont的css、js以及各种字体文件，demo是使用说明，iconfont文件是使用这个图标库所必须的文件，可根据使用的具体方式引用相应文件
• tinper-bee-core是组件库的核心样式及公用方法库，新增的字体文件也需要在这里备一份

iconfont更新步骤

1. 更新tinper-bee-core的图标文件

• 用新的字体文件替换以下tinper-bee-core/scss目录下的文件，包括：

  • iconfont.eot
  • iconfont.js
  • iconfont.woff
  • iconfont.ttf
  • iconfont.svg

• 在新字体文件的iconfont.css中找到待增加的图标，复制添加到tinper-bee-core/util-iconfont.css对应的地方，如下：
  

• npm publish发布新版本

2. 更新CDN资源

== 图标字体要确认验证后再更新，不然影响面会较大。线上图标字体cdn资源更新得在晚上的时候进行，并且需要对之前的版本进行备份，以防出现异常可以快速回滚。==

OSS的资源路径：iuap-design-cdn/static/iconfont 以及 iuap-design-cdn/static/tinper-bee/latest/assets/fonts

然后刷新 CDN 缓存

3. 修改bee-icon组件

• npm i tinper-bee-core安装最新版本的bee-core

• 更新src/Icon.scss
  

• 更新demolist/Demo1.js
  

• 验证并发布新版本

npm publish

注：先发tinper-bee-core，再发bee-icon，否则图标会显示不出来

总结解决步骤

1. 更新tinper-bee-core并发版
2. 更新CDN资源
3. 更新bee-icon并发版

之后就可以愉快地使用bee-icon字体图标了