引入common组件及icon配置(二)

阿里巴巴矢量库建立自己的项目

将要用的图标加入项目中,下载


图片.png

下载的文件夹内 iconfont.ttf文件是最重要的


图片.png

common组件中原本只有一个BaseIcon.ttf,ExtIcon.ttf是自己修改的名字后添加的
图片.png

icon的读取机制,读取BaseIcon的图标(这两个ttf实际上就是下载下来的iconfont.ttf文件)

在全局中添加


图片.png
import { Icon } from 'common';
//若无let ExtIcon这一句,icon只能读取基础图标,此处添加type="ExtIcon",读取ExtIcon.ttf的图标
let ExtIcon = Icon.set('ExtIcon', require('assets/fonts/ext/data'));
export default ExtIcon;

图标数据都添加在一个data中


图片.png

名字:十六进制转十进制
使用组件方法
<Icon name="xxx">

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,560评论 25 708
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 12,975评论 2 59
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AGI阅读 16,018评论 3 119
  • 草叶上露珠/摄影·达武旦 露珠 达武旦 那会是谁的眼泪 谁看见过暗夜它的流淌 向着一个黎明的汇聚 谁通过它可以伸向...
    达武旦阅读 444评论 0 1
  • #幸福是需要修出来的~每天进步1%~幸福实修14班~04组chfenj # 20180127(6/60) 【幸福实...
    chfenj阅读 155评论 0 1