Iconfont 在 React-native中的使用

相信很多人都已经用过了类似react-native-vector-icons这样的组件吧!但是在很多时候,我们会遇到诸如“怎么我需要的图标这个库里面找不到呀”,“我们自己的ui设计了一套图标怎么用起来呀”之类的问题。没错没错,这个时候我们就需要提到iconfont了!
iconfont,顾名思义,就是图标字体。它是将矢量图标做成字体,大大的减小了琐碎文件的个数,也方便了前端人员使用,而为大家所熟知的无疑就是阿里的iconfont网站啦[iconfont.cn], 在这个网站上存在着很多设计师们设计出来的好看的小图标,我们只需要将他们一个个的添加到购物车里再点击下载代码就可以得到ttf文件了!
到底如何使用这个ttf文件呢?接下来就进入到干货环节。首先打开解压出来的文件夹之中的demo_unicode.html,在这里可以看到很多的图标预览以及图标所对应的Unicode值。比如说是的,这个&#x意思就是宽字符,而e697则是宽字符的内容啦。在react-native中怎么使用呢?其实就是利用Text组件,设置fontFamily为设置过的字体之后,将内容设置为’\ue697’就可以展示图标了!color是颜色,fontSize是大小,是不是非常简单~
为了方便使用,我们可以将宽字符串做成一个map,key-value映射,这样就能非常方便的将其封装称组件并使用了,而不是每一次要使用的时候都要去查一遍对应的宽字符到底是什么。

let font
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值