ReactでFontAwestome&CSSを使用する方法

2595 ワード
React fontawesome テキストリンク
HTMLではFontawesomeがアイコンを使用しています.
反応が少し違う.
応答にFontwesomeを使用するには、まず
インストールが必要なものがあります.npmで取り付けることも、糸で取り付けることもできます.

設定

  • vscode端末からプロジェクトフォルダ
    • へ
    次のコード
  • を入力します.
    yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/react-fontawesome
    「font」ではなく「fort」です.福貼.でも福を貼ると最後に貼るので~確認!

    • 使用


  • import
    import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { 사용할 아이콘 이름  } from '@fortawesome/free-solid-svg-icons';

  • https://fontawesome.com/
    ここに行って欲しいアイコンを選んで
    (free/solid以外の場所で選択する場合は、他のコンテンツをインストールする必要があります)

  • 使用するアイコン名はfontarsumページの名前とは異なります.

    このアイコンを使用する場合は、
    使用するアイコン名にfaCircleUserと書きます.大文字と小文字に注意!
    (FaUserCircleって書いてあるけどそっくり出てくるのは秘密じゃない…)

  • JSX部分は以下のようになります.
     <FontAwesomeIcon icon={faCircleUser} />

  • ここでデザイン(css)を提供したい場合は<>に書くことができます.
    例えば、大きさを3倍に拡大して色をグレーにしたい場合は、このようにします.
     <FontAwesomeIcon icon={faCircleUser} size="3x" color="#BDBDBD" />
    https://fontawesome.com/v5/docs/web/use-with/react
    このページは詳しく表示されています.
    結果はね.

    • 22.03.18資料構造
    メンバー変数、属性、自動属性のパフォーマンスの違い.