4

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?

4

3 回答 3

1

我想也许你忘记运行 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文件夹并重新运行

于 2021-01-05T08:15:07.203 回答
0

我有类似的问题，这是因为rnpm包中的已折旧，我通过创建react-native.config.js文件解决了它，然后我运行了链接命令：

这是react-native.config.js文件。

module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: ['./resources/fonts'],
};

创建文件并添加上述代码片段后，运行以下命令：

react-native link

于 2021-04-12T05:04:54.207 回答
-1

如果您更喜欢将图标用作 SVG，有一种更简单的方法可以做到这一点。我希望react-icomoon对你有用。

创建图标组件

import IcoMoon from "react-icomoon";
import { Svg, Path } from "react-native-svg";
const iconSet = require("./selection.json");

const Icon = (props) => (
  <IcoMoon
    native
    SvgComponent={Svg}
    PathComponent={Path}
    iconSet={iconSet}
    {...props}
  />
);

export default Icon;

然后使用

import Icon from "./Icon";

<Icon icon="pencil" size={20} color="orange" />
于 2022-02-19T08:21:16.973 回答