码迷,mamicode.com
首页 > 其他好文 > 详细

在react-native项目中使用iconfont自定义图标库

时间:2018-05-25 21:08:06      阅读:1760      评论:0      收藏:0      [点我收藏+]

标签:oid   art   android   image   github   tool   lib   javascrip   ttf   

 

1. 安装react-native-vector-icons

yarn add react-native-vector-icons
react-native link

如果没有关联成功的话,可以参考官方文档手动配置一下

2. 将从阿里下载的iconfont.tff文件复制到以下目录

技术分享图片

3. 在android/app/build.gradle中添加:

project.ext.vectoricons = [
    iconFontNames: [‘iconfont.ttf‘ ] //添加你需要赋值的字符文件
]

技术分享图片

4. 在项目中创建字体配置文件

// DIYIcon.js

import createIconSet from ‘react-native-vector-icons/lib/create-icon-set‘;
import glyphMap from ‘./iconfont.json‘;

const iconSet = createIconSet(glyphMap, ‘DIYIcon‘, ‘iconfont.ttf‘);   //  ‘DIYIcon‘可自定义名称

export default iconSet;

export const Button = iconSet.Button;
export const TabBarItem = iconSet.TabBarItem;
export const TabBarItemIOS = iconSet.TabBarItemIOS;
export const ToolbarAndroid = iconSet.ToolbarAndroid;
export const getImageSource = iconSet.getImageSource;

  

// iconfont.json

{
  "glass": 61440,
  "music": 61441,
  "search": 61442,
  "envelope-o": 61443,
  "heart": 61444,
  "star": 61445,
  "star-o": 61446,
  "user": 61447,
  //等等...
}

5. 使用

import DIYIcon from ‘./diyicon/DIYIcon‘;

...

<DIYIcon name={‘glass‘} size={‘50‘} color={‘#ed4040‘} />

 

 

 

参考:

http://www.imbeta.cn/zai-react-nativezhong-you-ya-de-shi-yong-iconfont.html

https://segmentfault.com/a/1190000009939727

 

在react-native项目中使用iconfont自定义图标库

标签:oid   art   android   image   github   tool   lib   javascrip   ttf   

原文地址:https://www.cnblogs.com/ImaY/p/9090311.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!