(转载简书文章，如果他不是原创请及时告知，谢谢)RN使用自定义图标的方法保存

react-native-vector-icons图标库中有很多图标，但并不是完全符合我们的需求，在开发过程中往往都是由美工给出效果图，我们根据效果图绘制UI界面，如此一来就会发生图标风格不匹配等问题，那有没有可能使用自定义图标呢？答案是肯定的，但必须是SVG格式且要借助于第三方网站如：阿里巴巴矢量图标库、icomoon.io等。

配置工作：

1.假设你已经成功配置了react-native-vector-icons，如果没有配置请移步React Native第三方组件之react-native-vector-icons。

---

2.登录阿里巴巴矢量图标库，搜索并选择你需要的图标，加入到项目中，如图1；

图1

 

---

 

 

3.选择好所有图标后，点击页面右上角购物车按钮（上面会显示你所选图标的总数），如图2；

图2

---

 

 

4.点击添加到项目按钮，如图3；

图3

---

 

 

5.将图标添加到项目，你可以选择已有项目，也可以新增项目，然后确定，如图4-5；

图4

图5

---

 

 

6.选择每一个图标上的编辑按钮可以调整图标的大小、位置、可以看到图标的16进制编码，全部调整好后，将文件下载到本地，如图6-7；

图6

图7

---

7.打开下载后的文件夹，找到 iconfont.ttf 文件，并将文件复制到react项目中的/node_modules/react-native-vector-icons/Fonts 目录下。

---

8.使用Terminal进入项目根目录，执行react-native link 命令，等待执行完成。

---

9.在/node_modules/react-native-vector-icons/glyphmaps/ 目录下新建iconfont.json 文件，文件内容如下：

{
  "home" : 58912,
  "category" : 58880,
  "cart" : 58892,
  "mine" : 58948
}

key是项目中使用的图片name字段，value就是最初上传图标后，图标下方的16进制转成10进制的数值。如何将16进制转成10进制请移步在线进制转换

---

10.在/node_modules/react-native-vector-icons/ 目录下新建iconfont.js 文件，文件内容如下：

/**
 * Created by ice on 2017/8/27.
 */
import createIconSet from './lib/create-icon-set';
import glyphMap from './glyphmaps/iconfont.json';

const iconSet = createIconSet(glyphMap, 'iconfont', 'iconfont.ttf');

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;

至此，配置工作全部完成，可以到项目中尽情的享用了。

---

使用

1.在页面中导入组件import Icon from 'react-native-vector-icons/iconfont';然后就可以使用了；

import React, { Component } from 'react';
import {AppRegistry,View} from 'react-native';
import Icon from 'react-native-vector-icons/iconfont';
export default class icons2 extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Icon name={'home'} size={26} color="red"/>
        <Icon name={'category'} size={26} color="red"/>
        <Icon name={'cart'} size={26} color="red"/>
        <Icon name={'mine'} size={26} color="red"/>
      </View>
    );
  }
}

AppRegistry.registerComponent('icons2', () => icons2);

2.以下是我使用react-navigation写的简单的页面跳转的Demo，其中的图标就是使用的自定义图标，源码就不献丑了，看看效果图吧。

 

 

作者：有情怀的程序员
链接：https://www.jianshu.com/p/502b88067804
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

==============================================================================================

这里面有一些变动，或者说自己尝试之后才完成自己的设想或者使用，

我的使用环境为createBottomTabNavigator 底部图标自定义图标，不适用系统自带的图标

这里面遇到了一个比较难缠的低级低智商问题，就是自定义组件首写字母一定要大写，

再其次引用之后自己可以现在其他页面使用一下 看看图标是否关联成功，如果关联成功了之后再在createBottomTabNavigator

上面进行使用，避免其他的一些猜忌，比如我图标不显示，我就再猜测文件是否关联成功。

其他的会写到自己的项目的readme里面

待整理完成之后发出github地址。

此文章仅记录一下。

如需删除请联系。