web-dev-qa-db-ja.com

FontAwesome 5 ProをReactと統合する方法は？

FontAwesome 5 ProをReactと統合する方法について誰かにアドバイスしてもらえますか？

@ fortawesome/react-fontawesomeパッケージや@fortawesome/fontawesome-free-regularなどのパッケージがあることは知っていますが、アイコンのプロバージョンを含める方法はありますか？

FontAwesomeのWebサイトにログインすると、プロバージョンのJSをダウンロードできますが、Reactでは役に立たないと思います。

reactjsfont-awesomefont-awesome-5
5
samuelg0rd0n

Font Awesome 5Proを​​React（2018））と統合する方法は次のとおりです。

  1. Font Awesomeの価格設定ページ からProライセンスを購入する
  2. 成功したら、成功ページを無視します。 FontAwesomeにログインする必要があります。ログイン状態で、次のガイドに移動します： Font Awesomeインストールガイド 。
  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. 完了すると、proパッケージをインストールできるようになります。これらは、次の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'メソッドbyreact-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

    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
13
clodal

NPM経由でFontAwesome Proにアクセスするには、トークンを使用する必要があります。

アイコンを手動でダウンロードしてローカルにインストールすることはアンチパターンであり、FontAwesomeチームがFontAwesomeProをNodeおよびNPMで使用することを期待する方法ではありません。

Proパッケージにアクセスするには、[〜＃〜]トークン[〜＃〜]を使用してFont Awesome ProNPMレジストリを使用するように@fortawesomeスコープを構成する必要があります。 FontAwesomeアカウント設定で。

  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

注：Font Awesome ProをReact Nativeで使用する場合は、以下を確認してください： react-native -fontawesome-pro

3
Beau Smith

tldr;@fortawesome/pro-light-svg-icons、@fortawesome/pro-regular-svg-iconsNPMパッケージを使用します。

私は今日この問題に遭遇しました、そして私はアイコンのプロバージョンをどのように使用するかという主な質問は扱われていなかったと思います。公式ドキュメントはあまり役に立ちません。これは、ライトバージョンのfaFilePlusアイコンを使用するために私がしなければならなかったことです。

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

その後：

<FontAwesomeIcon icon={faFilePlus} />

@fortawesome/pro-light-svg-iconsNPMパッケージの使用に注意してください。これはFAの公式ドキュメントのどこにも文書化されておらず、この解決策にたどり着くにはいくつかの場所を掘り下げなければなりませんでした。公式ドキュメントでは、「無料」アイコンの使用についてのみ説明していますが、ライト、レギュラーなどの同等のNPMパッケージの場所については説明していません。

また、回答の1つに記載されているように、NPMを認証する必要があることにも注意してください。

2
PKK

OK、自分で解決しました。私がしたことは、@fortawesome/react-fontawesomeをインポートすることでした。次に、FontAwesomeのプロパッケージを手動でダウンロードし、フォルダー/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} />
         ...
    );
}

すべてのアイコンを手動でインポートする必要があるため、少し面倒ですが、これ以上の解決策は考えられませんでした。

1
samuelg0rd0n

各アイコンをインポートせずに動作させることができました。

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

JSスクリプトと適切なCSSファイルをindex.htmlに追加することでそれらを使用できると思います

パッケージをインストールせずにデフォルトのfontawesomeを使用したい場合は、以下に示すように、ファイルを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>
0
Harsh Makadia