React-native-vector-icons + Icomoon 的自定义图标集问题

Question

我想将我的自定义图标与

react-native-vector-icons

和 Icomoon 一起使用。我用 Icomoon 生成了

.tff

和

selection.js

并用

react-native-link

将它们放入我的项目中，但我尝试使用的图标显示为空方块。

这是我的代码

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

这是我的

package.json

编辑：

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

这是图标截图：

注意：我将我的字体文件放在“./resources/fonts”下，并将selection.json放在我的“src”文件夹下，我使用“react-native链接react-native-vector-icons”代码来链接这些“

如何解决这个问题？

Answer 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 复制到 RN 项目的

./android/app/src/main/assets/fonts

文件夹中。

如果还是不显示

删除 android

build

文件夹并重新运行

Answer 2

我也遇到了类似的问题，这是因为包中的

rnpm

已被贬值，我通过创建

react-native.config.js

文件解决了它，然后我运行了链接命令：

这是

react-native.config.js

文件。

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

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

react-native link

Answer 3

如果您更喜欢使用图标作为 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" />