ReactNative使用iconfont

使用自定义图标

1. 下载iconfont图标文件

  • 在iconfont官网 --> 资源管理 --> 我的项目中下载文件
  • 下载解压后只需将iconfont.ttf图标文件放置在src/assets/fonts即可

2. 链接字体图标文件到android/ios文件夹下

  • 安装工具，执行yarn add react-native-asset
  • 项目根目录新建react-native.config.js文件
// assets 对应的是存放字体图标文件的路径

module.exports = {
  assets: ['./src/assets/fonts/']
};
  • 执行链接，执行yarn react-native-asset

3. 使用字体图标

  • fontFamily: 'iconfont'(必须)
  • {‘\ue75d’} 其中e75d为 iconfont 的 Unicode 的后四位
<Text style={{fontFamily: 'iconfont', color: 'red'}}>{'\ue75d'}</Text>
<Text style={{fontFamily: 'iconfont', color: 'blue'}}>{'\ue758'}</Text>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容