简体   繁体   English

如何添加下载的 fontawesome pro 图标以响应本机?

[英]How to add downloaded fontawesome pro icons to react native?

I am no longer a fontawesome pro customer but I still am able to download the pro icon set for web and desktop (svg / css / webfonts / sprites...) and I want to add some duotone and light pro icons to my project.我不再是 fontawesome pro 客户,但我仍然可以下载 web 和桌面的 pro 图标集(svg / css / webfonts / sprites ...),我想在我的项目中添加一些双色调和 light pro 图标。 But I've tried to add it to my expo project in multiple ways and it does not seem to work.但是我尝试以多种方式将它添加到我的博览会项目中,但它似乎不起作用。

  • I tried using react-native-svg and it didn't work as fontawesome svg can't be translated to svgr for some reason.我尝试使用 react-native-svg 但它不起作用,因为 fontawesome svg 由于某种原因无法转换为 svgr。

  • I tried using react-native-fontawesome but it only seems to work for regular solid and brands icons.我尝试使用 react-native-fontawesome 但它似乎只适用于常规的实体和品牌图标。

  • I can't use the fortAwesome library as my npm token has expired and therefore been revoked.我无法使用 fortAwesome 库,因为我的 npm 令牌已过期并因此被撤销。

Please help, how can I use the downloaded icons in my react native expo project ?请帮忙,如何在我的 react native expo 项目中使用下载的图标? Thank you in advance先感谢您

I found out how to do it.我发现了如何做到这一点。

I added the fontawesome pro fonts to my assets.我将 fontawesome pro 字体添加到我的资产中。 Loaded the fonts using Font.loadAsync().使用 Font.loadAsync() 加载字体。

Then I created a component and an array containing the names and the unicode values of each icon.然后我创建了一个组件和一个包含每个图标的名称和 unicode 值的数组。 (found at this link : font-awesome unicode and names (在此链接中找到: font-awesome unicode and names

My component is simply a component with a fontFamily corresponding to the fontFamily I want to use (in my case the fa-light-300, fa-duotone-900 and fa-brands-400).我的组件只是一个带有与我想要使用的 fontFamily 对应的 fontFamily 的组件(在我的例子中是 fa-light-300、fa-duotone-900 和 fa-brands-400)。 And the unicode value written like so :和 unicode 值这样写:

<Text style={{ fontFamily: "fa-light-300" }}>{"\uf164"}</Text>

I hope this helps if anyone comes across the same problem.如果有人遇到同样的问题,我希望这会有所帮助。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM