如何将FontAwesome 5 Pro与React集成?

时间:2018-03-16 11:10:53

标签: reactjs font-awesome font-awesome-5

有人可以建议我如何将FontAwesome 5 Pro 与React集成吗?

我知道有一些包@ fortawesome / react-fontawesome,例如@ fortawesome / fontawesome-free-regular但是有没有办法如何包含专业版的图标?

当我登录FontAwesome网站时,我可以下载专业版JS,但我想这在React中没用。

6 个答案:

答案 0 :(得分:8)

这是将Font Awesome 5 Pro与React(2018)集成的方法:

  1. Font Awesome's pricing page购买专业许可证
  2. 成功后,忽略成功页面。您应该登录到Font Awesome。在登录状态下,转到本指南:Font Awesome Installation Guide
  3. 如果您已登录并且帐户中具有有效的许可证密钥,则本教程中的每个代码段都将使用您的访问令牌。
  4. 现在,您可以通过(A)npm config set ...在全局安装许可证密钥,也可以通过(B).npmrc在每个项目本地安装许可证密钥。我建议(B),以便其他队友也可以安装专业版软件包。
  5. 对于(B),转到您的package.json目录并创建一个.npmrc文件。在该文件中,粘贴指南中提供的代码段。它应该看起来像这样:

    // .npmrc
    @fortawesome:registry=https://npm.fontawesome.com/
    //npm.fontawesome.com/:_authToken=<MY_AUTH_TOKEN_FROM_FONT_AWESOME>
    
  6. 完成后,您现在应该可以安装专业版软件包。它们是根据以下npm软件包提供的官方react适配器react-fontawesome

    • @ fortawesome / pro-solid-svg-icons
    • @ fortawesome / pro-regular-svg-icons
    • @ fortawesome / pro-light-svg-icons
  7. 因此,现在npm install @fortawesome/pro-<MY_ICON_WEIGHT>-svg-icons安装您选择的专业软件包。
  8. 此后,继续使用react-fontawesome软件包提供的用法。如果您安装了简易版并使用'Library' method by react-fontawesome,则在您的React代码中看起来应该像这样:

    // app.js
    import { library, config } from '@fortawesome/fontawesome-svg-core'
    import { fal } from '@fortawesome/pro-light-svg-icons'
    
    library.add(fal)
    
  9. 最后,用法在组件文件中看起来像这样(在JS和TS风格中均可用):

    // Foo.jsx
    import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
    
    const Foo = () => {
      return (
        <FontAwesomeIcon icon={['fal', 'utensils']} />
      )
    }
    
    export default Foo
    

    如果您喜欢打字稿:

    // Foo.tsx
    import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
    import { IconLookup } from '@fortawesome/fontawesome-svg-core'
    
    const Foo = () => {
      const icon: IconLookup = { prefix: 'fal', iconName: 'utensils' }
      return (
        <FontAwesomeIcon icon={icon} />
      )
    }
    
    export default Foo
    

答案 1 :(得分:3)

您必须使用TOKEN通过NPM访问Font Awesome Pro。

手动下载图标并在本地安装它们是一种反模式,而不是Font Awesome团队希望您将Font Awesome Pro与Node和NPM一起使用的方式。

访问Pro软件包需要您使用 TOKEN 配置@fortawesome范围以使用Font Awesome Pro NPM注册表,这可以在Font Awesome帐户设置中找到。

  1. 登录以查看您的令牌https://fontawesome.com/account/services
  2. 登录后
  3. 导航到此分步教程,它将在所有示例中包含您的令牌:https://fontawesome.com/how-to-use/use-with-node-js#pro
  4. 安装react-fontawesome 并按照示例渲染图标:https://github.com/FortAwesome/react-fontawesome
  5. 注意:如果您想在 React Native 中使用Font Awesome Pro,请查看:react-native-fontawesome-pro

答案 2 :(得分:2)

tldr; 使用@fortawesome/pro-light-svg-icons@fortawesome/pro-regular-svg-icons NPM软件包。

我今天遇到了这个问题,我认为有关Pro版本图标使用的主要问题尚未解决。官方文档并没有太大帮助。这是我使用faFilePlus图标(简易版)所要做的:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faFilePlus } from '@fortawesome/pro-light-svg-icons/faFilePlus';

然后:

<FontAwesomeIcon icon={faFilePlus} />

请注意使用@fortawesome/pro-light-svg-icons NPM软件包。 FA官方文档中的任何地方都没有记录这点,我不得不深入研究几个地方才能找到此解决方案。官方文档仅讨论“免费”图标的使用,但没有说明在哪里可以找到用于轻型,常规型等价的NPM软件包。

还请注意,这确实需要如答案之一中所述对NPM进行身份验证。

答案 3 :(得分:1)

好的,我自己解决了。我做的是导入@fortawesome/react-fontawesome。然后我手动下载了FontAwesome的pro包,从文件夹/advanced-options/use-with-node-js/fontawesome-pro-light我将所需的图标(有faUsers.js等JS文件)复制到我的项目文件夹中,并包含这些图标。

所以在文件的开头我有类似

的东西
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import faUser from '../font-awesome/faUser';

然后我用它

render() {
    return() (
         ...
         <FontAwesomeIcon icon={faUser} />
         ...
    );
}

这有点烦人,因为我需要手动导入每个图标,但我无法想到更好的解决方案。

答案 4 :(得分:0)

我认为您可以使用它们将JS脚本和相应的CSS文件添加到 index.html

假设您想在没有安装任何软件包的情况下使用默认字体,那么直接在 index.html 中包含文件,如下所示

<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/solid.js" integrity="sha384-+Ga2s7YBbhOD6nie0DzrZpJes+b2K1xkpKxTFFcx59QmVPaSA8c7pycsNaFwUK6l" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/fontawesome.js" integrity="sha384-7ox8Q2yzO/uWircfojVuCQOZl+ZZBg2D2J5nkpLqzH1HY0C1dHlTKIbpRz/LG23c" crossorigin="anonymous"></script>

答案 5 :(得分:0)

我设法让它无需导入每个图标,

import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import fontawesome from '@fortawesome/fontawesome'
import solid from '@fortawesome/fontawesome-pro-solid'
fontawesome.library.add(solid)

然后使用图标

<FontAwesomeIcon icon={solid.faPlusHexagon}/>