# 本地化定制icon组件

背景:iView 的图标使用开源项目 ionicons, 但是项目开发中,有时需要一些定制icon, 这时如果能本地部署一份属于项目的icon, 这也能减少对图片的处理,减少打包体积,方便开发

image

本地定制icon组件,采用的是阿里系的iconfont

写在前面

本文是在使用react ant-design,进行使用总结。

参考

开发简介

iconfont

1、利用github账户或者注册账户,创建账户
2、寻找或创建icon, 添加入项目(提前创建项目)
3、项目编辑

新建项目时FontClass/Symbol前缀和Font Family字段的填写需要注意,前缀不要和项目所使用的UI库字体前缀一样,预防命名冲突

4、下载图标至本地(文件名里面带有demo, 只是demo展示,放入项目中删除)

组件开发

使用所属库语法,开发本地icon组件

  • .css 文件样式放入组件,注意icon资源路径的修改
  • 组件命名语法冲突

参考使用

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