如何将FontAwesome 5 Pro与React集成? [英] How to integrate FontAwesome 5 Pro with React?

问题描述

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

Could someone advice me on how to integrate FontAwesome 5 Pro with React?

我知道有@ fortawesome/react-fontawesome软件包，例如@ fortawesome/fontawesome-free-regular，但是有没有办法包含图标的 pro版本?

I know there are packages @fortawesome/react-fontawesome and for example @fortawesome/fontawesome-free-regular but is there a way how to include pro version of icons?

当我登录FontAwesome网站时，我可以下载pro-version JS，但是我想这在React中没有用.

When I log in to FontAwesome website, I can download the pro-version JS but I guess that's of no use in React.

推荐答案

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

Here's how to integrate Font Awesome 5 Pro with React (2018):

1. 从 Font Awesome的定价页面购买Pro许可证
2. 成功后，忽略成功页面.您应该登录到Font Awesome.在登录状态下，请转到本指南:

1. Purchase a Pro licence from Font Awesome's pricing page
2. Upon success, ignore the success pages. You should be logged into Font Awesome. In the login state, go to this guide: Font Awesome Installation Guide.
3. If you are logged in and have a valid license key in your account, every code snippet in this tutorial will use your access token.
4. Now, you can install your license key globally via (A) npm config set ... or locally per project via (B) .npmrc. I recommend (B) so other team-mates can also install the pro package.

5. For (B), Go to your package.json directory and create a .npmrc file. In that file, paste the code snippet provided in the guide. It should look something like this:

// .npmrc
@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=<MY_AUTH_TOKEN_FROM_FONT_AWESOME>

完成后，您现在应该可以安装专业版软件包.它们是根据官方的react adapter react-fontawesome 提供的，可通过以下npm软件包获得:

Once done, you should now be able to install the pro packages. They are according to the official react adapter react-fontawesome available as the following npm packages:

• @ fortawesome/pro-solid-svg-icons
• @ fortawesome/pro-regular-svg-icons
• @ fortawesome/pro-light-svg-icons

此后，继续使用react-fontawesome软件包提供的用法.如果您安装了简易版并使用库"方法，由react-fontawesome :

Thereafter, continue usage as provided by the react-fontawesome package. Which should look something like this in your react code if you installed the light version and using the '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)

最后，用法在组件文件中看起来像这样(在JS和TS风格中均可用):

Finally, usage looks something like this in a component file (available in both JS and TS flavours):

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

这篇关于如何将FontAwesome 5 Pro与React集成?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！