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

发布时间：2020-12-15 20:29:22 所属栏目：百科来源：网络整理

导读：? 1. 安装react-native-vector-icons yarn add react-native-vector-iconsreact-native link 如果没有关联成功的话，可以参考官方文档手动配置一下 2. 将从阿里下载的iconfont.tff文件复制到以下目录 3.?在 android/app/build.gradle 中添加: project.ext.ve

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

http://www.voidcn.com/article/p-zsbarpqz-e.html

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!