【问题标题】:How to integrate FontAwesome 5 Pro with React?如何将 FontAwesome 5 Pro 与 React 集成?
【发布时间】:2018-08-25 10:32:39
【问题描述】:

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

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

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

【问题讨论】:

  • @Tomasz:是的,我已经看到了,但这并没有真正的帮助,因为它不涉及专业(付费)版本。 FontAwesome 网站解释了如何在 React 中使用免费版本以及如何通过包含脚本标签来使用 Pro 版本,但它没有提到如何在 React 中使用 Pro 版本...

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


【解决方案1】:

以下是如何将 Font Awesome 5 Pro 与 React (2018) 集成:

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

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

    • @fortawesome/pro-solid-svg-icons
    • @fortawesome/pro-regular-svg-icons
    • @fortawesome/pro-light-svg-icons
  7. 现在请npm install @fortawesome/pro-&lt;MY_ICON_WEIGHT&gt;-svg-icons 安装您选择的专业包。
  8. 此后,继续使用 react-fontawesome 软件包提供的功能。如果您安装了轻量版并使用'Library' method by react-fontawesome,那么在您的反应代码中应该看起来像这样:

    // 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
    

    如果你喜欢 Typescript:

    // 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
    

【讨论】:

  • 这是一个相当累人的答​​案。我缺少的主要是@Beau Smith 提到的 NPM 令牌。我什至不知道这样的东西存在 :-) 关于你的回复,值得一提的是,如果你只使用 FontAwesome 中的几个图标,你不需要使用 library.add() 调用,你可以使用具体图标直接在 FontAwesomeIcon 组件中。 (节省一些千字节)
  • 我可以让图标显示,但我似乎无法对其应用任何样式
【解决方案2】:

您必须使用 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. 登录后导航到此分步教程,它将包含您在所有示例中的令牌:https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers#installing-pro
  3. 安装 react-fontawesome 并按照示例渲染图标:https://github.com/FortAwesome/react-fontawesome

注意:如果您希望在 React Native 中使用 Font Awesome Pro,请查看:react-native-fontawesome-pro

【讨论】:

    【解决方案3】:

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

    我今天遇到了这个问题,我认为如何使用专业版图标的主要问题尚未解决。官方文档没有太大帮助。这就是我使用 faFilePlus 图标时必须做的事情,精简版:

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

    然后:

    &lt;FontAwesomeIcon icon={faFilePlus} /&gt;

    注意使用@fortawesome/pro-light-svg-icons NPM 包。这在 FA 的官方文档中的任何地方都没有记录,我不得不通过几个地方来挖掘这个解决方案。官方文档只讨论了“免费”图标的使用,但没有说明在哪里可以找到与 light、regular 等等效的 NPM 包。

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

    【讨论】:

    • 无法解析'@fortawesome/pro-light-svg-icons/faFilePlus',这就是我得到的
    【解决方案4】:

    好的,我自己解决了。我所做的是导入@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} />
             ...
        );
    }
    

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

    【讨论】:

    • 这就是你一直在寻找的:stackoverflow.com/a/49565651/101290
    • 手动下载软件包可能会在以后的升级等中难以维护。请看看我的回答是否有帮助?谢谢!
    【解决方案5】:

    我认为您将能够使用它们将 JS 脚本和适当的 CSS 文件添加到您的 index.html

    假设你想在不安装任何软件包的情况下使用默认字体 awesome,那么直接在 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>

    【讨论】:

    • 我正在使用 React 和 Webpack。我只使用 index.html 来包含 React 根应用程序,所以我不能使用脚本标签。我需要用import 指令以某种方式将它包含到JS中。
    【解决方案6】:

    我设法让它工作,而不必导入每个图标,

    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}/>
    

    【讨论】:

    • 是的,我知道你可以这样做,但它只适用于公共图标。这些公共包不包含专业版包含的所有图标 - 例如,没有轻型版本(只有常规和纯色)。
    猜你喜欢
    • 2020-12-02
    • 2023-01-03
    • 2011-07-22
    • 1970-01-01
    • 2019-06-08
    • 2020-12-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多