自定义字体图标在 react-native 中显示交叉框

Question

我正在尝试在 React Native 中使用自定义字体。使用 Icomoon 转换自定义图标集中的 SVG，并尝试了 https://www.reactnative.guide/12-svg-icons-using-react-native-vector-icons/12.1-creating-custom-iconset.html.

中的所有步骤

react-native-vector-icons 已经安装。

使用react-native link react-native-vector-icons为项目设置矢量图标框架。

将 selection.json 和 Icomoon.ttf 文件放在 assets/fonts 文件夹中。

并在 package.json 文件中添加了 "rnpm": { "assets": [ "resources/fonts" ] }

创建了 CustomIcon.js 文件并添加了

import {createIconSetFromIcoMoon} from 'react-native-vector-icons';
import icoMoonConfig from './selection.json';
export default createIconSetFromIcoMoon(icoMoonConfig);

在App.js文件中添加如下

import CustomIcon from './components/CustomIcon.js'

<CustomIcon name='accounts' size={50} /> //To use the icon

图标处显示☒

如果有人有解决办法请分享，谢谢。

Answer 1

我已经尝试了很多但没有得到解决方案但最终我得到了解决方案每当我使用 react-native link react-native-vector-icons 命令时，它都无法正常工作。所以我检查了 android/app/src/main/assets/font 中的字体文件夹，发现那里没有我的 icomoon 字体文件。所以我复制了文件并手动粘贴到该位置 worked .

Answer 2

在 Android 平台图标中显示如下：

经过一段时间的排查，我终于找到了解决办法。

因为我使用了我自己的图标集，所以我通过 IcoMoon App 从 iconSet.svg 创建了 iconSet.ttf。

事实上我遵循了这个教程：https://medium.com/bam-tech/add-custom-icons-to-your-react-native-application-f039c244386c

IcoMoon App 创建了 *.ttf 和 selection.json，问题是 在 selection.json。

我将 *.ttf 文件重命名为 myIcons.ttf 但我 不得不 更改 fontFamily 和 name 文件末尾 selection.json 的名称与我命名的 *.ttf 文件相同。在我的例子中 myIcons.ttf 我在 selection.json 中将 name 和 fontFamily 重命名为 myIcons ]

自定义字体图标在 react-native 中显示交叉框

Custom font icons are showing cross in box in react-native

react-native

svg

react-native-vector-icons