使用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"
    ]
},

这是图标：Screenshot的屏幕截图

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

我该如何解决这个问题？

Answer 1

我想你可能忘了运行react原生链接，如果你已经运行了，但仍然没有显示图标，请尝试删除构建文件，然后重试。

有两种方法可以让你的自定义图标工作，如果链接不能帮助你，你可以尝试手动方式。

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

a) React本地链接

1. 将字体放在项目

底部的./ .ttf /fonts文件夹中

1. 在package.json的第一级添加以下代码：

"rnpm"：{ "assets"：“资源/字体”}，

终端中的

1. ：react-native link

b)手册

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

如果它仍然没有显示

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

Answer 2

我遇到了类似的问题，因为包中的链接是链接，我通过创建react-native.config.js文件来解决它，然后我确实运行了rnpm命令：

这是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" />