时间戳

首页 > 解决方案 > Custom Icon Set Problem with React-native-vector-icons + Icomoon

reactjs - Custom Icon Set Problem with React-native-vector-icons + Icomoon

问题描述

I want to use my custom icons with react-native-vector-icons and Icomoon. I generated .tff and selection.js with Icomoon and put them into my project with react-native-link but The icons that I tried to use seen as empty square.

I will share with you my code and screenshoot.

Here is my import code

import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import selectionConfig from "../selection.json"
const Icon = createIconSetFromIcoMoon(selectionConfig,"icomoon","icomon.ttf");
<Icon name="bag" size={64} />

This is my package.json edit:

 "rnpm": {
    "assets": [
        "resources/fonts"
    ]
},

And this is the screenshot of icon: Screenshot

Note: I put my font files under "./resources/fonts" and put selection.json under my "src" folder and I used "react-native link react-native-vector-icons" code for link these"

How Can I solve this issue?

标签： reactjsreact-nativefontsreact-native-androidreact-native-vector-icons

解决方案

我想也许你忘记运行 react native 链接，如果你这样做了但仍然没有显示图标，请尝试删除构建文件并重试。

有两种方法可以让您的自定义图标正常工作，如果链接对您没有帮助，您可以尝试手动方式。

这里引用了这个答案：https ://medium.com/bam-tech/add-custom-icons-to-your-react-native-application-f039c244386c

a) React Native 链接

  1. 将您的 .ttf 放在项目基础的 ./resources/fonts 文件夹中

  2. 在 package.json 的第一级添加这段代码：

    “rnpm”：{“资产”：[“资源/字体”]}，

  3. 在您的终端中：react-native 链接

b) 手册

Android：将 .ttf 复制到./android/app/src/main/assets/fontsRN 项目的文件夹中。

如果还是不显示

删除android build文件夹并重新运行

推荐阅读