React-Native: react-native-vector-icons

所有图标示例网站 

react-native-vector-icons directory

安装 react-native-vector-icons

react-native-vector-icons - npm

iOS配置

1、在 /node_modules/react-native-vector-icons/Fonts 文件中复制要使用的 .ttf 文件名

2、在 ios/你的项目名/Info.plist 文件里面添加以下代码

	<key>UIAppFonts</key>
	<array>
		<string>AntDesign.ttf</string>
		<string>MaterialCommunityIcons.ttf</string>
	</array>

3、命令行进入 ios 目录执行 pod install

4、重新编译运行并使用

import AntDesign from 'react-native-vector-icons/AntDesign';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

<AntDesign name={'chrome'} />
<MaterialCommunityIcons name={'account'} />

 

---

Android配置

1、在 android/app/src/main/ 目录下创建 /assets/fonts 目录（一般是没有的需要自己创建）

2、 在 /node_modules/react-native-vector-icons/Fonts 选中你要使用的字体文件，复制、粘贴进第一步的fonts文件夹内，我这里另外两个字体是  @ant-design/react-native 里面的

3、 重新编译运行并使用

import AntDesign from 'react-native-vector-icons/AntDesign';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

<MaterialCommunityIcons name={'account'} size={36} color={'red'} />
<AntDesign name={'chrome'} size={36} color={'blue'} />

 

引入阿里巴巴图标 

1、在阿里巴巴矢量图标库里随便挑选几个图标，并下载代码。

2、解压后找到我们需要的两个文件 "iconfont.json" 跟 "iconfont.tff"。

3、在创建的项目根目录创建路径 src/assets/fonts，把第二步的两个文件复制粘贴到 fonts 目录下。

4、再在fonts目录下 新建 index.js 代码如下：

import {createIconSet} from 'react-native-vector-icons';
import fontJson from 'src/assets/fonts/iconfont.json';

const glyphMap = {};

fontJson.glyphs.forEach(item => {
  glyphMap['icon-' + item.font_class] = item.unicode_decimal;
});

export default createIconSet(glyphMap, fontJson.font_family, 'iconfont.ttf');

5、 使用

// 引入
import Iconfont from 'src/assets/fonts';

// 使用
<Iconfont name={'icon-a-changyong_fangdafuben'} size={36} color={'#fedefe'} />

6、 双端配置

6-1、iOS配置

6-1-1、使用Xcode打开ios目录下的 .xcworkspace 文件，按照下图所示，点击加号选择

可以选择项目内字体文件或者选择Add Other选择src/assets/fonts下的字体文件并选中下图所示：

6-1-2、按照下图所示增加一行

或者 使用Xcode增加，如下图所示： 

6-2、 Android 配置

6-2-1、把 src/assets/fonts 下的  iconfont.ttf 复制到项目根目录下的 android/app/src/main/assets/fonts 里面即可。

7、重新编译并运行，一定要重新编译运行。