自定义字体图标在 react-native

问题描述

我正在尝试在 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

并且图标在图标位置显示☒。

如果有人有解决方案，请分享，谢谢。

解决方法

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

react-native react-native-vector-icons svg