gladevise Logo
HomeAboutContact

FontAwesomeをReactにインストール 使い方ガイド


FontAwesomeをReactで使えるようにインストールする方法を解説します。

FontAwesomeをReactにインストール

まずは下記コマンドでFontAwesomeをインストールしてください。

npm i --save @fortawesome/fontawesome-svg-core  @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome

これでFontAwesomeのSolidアイコンが使えるようになります。BrandRegularのアイコンも使いたい場合は、合わせて以下もインストールしてください。

npm i --save @fortawesome/free-brands-svg-icons
npm i --save @fortawesome/free-regular-svg-icons

react-fontawesomeの使い方

react-fontawesomeを使うには@fortawesome/react-fontawesomeと使いたいフォントタイプをimportします。Solidなら@fortawesome/free-solid-svg-iconsです。

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

const element = <FontAwesomeIcon icon={faCoffee} />

ReactDOM.render(element, document.body)

アイコンをimportするときは忘れずにケバブケースをキャメルケースに直してください。例えばfa-twitterならfaTwitterとしてください。

https://www.npmjs.com/package/@fortawesome/react-fontawesome

Recent Posts

Rust製の爆速端末Alacrittyのインストールと設定方法

Rust製のGPUで高速レンダリングするターミナルエミュレータAlacrittyのインストール方法、tmux、NeoVimでのTrue Color、カラースキーム、Font、デフォルトの端末の設定などの紹介をします。

react-modalを使ってModalコンポーネントを作る

react-modalを使ってModalコンポーネントを作る方法を解説します。モーダルの外側をクリックして閉じる、アニメーションを付ける等の基本的な機能から、CSS-in-JS(Emotion)を使ってタイリングの方法を説明します。

Emotionを使ってGatsbyでtailwindを使う方法

Gatsby & Emotion & tailwindの環境構築、スタイリング方法についてまとめました。twin.macroを使えば、classNameだけでなく、Styled Componentsやcss propでスタイリングできます。

GatsbyのLinter/Formatter, CSS-in-JS環境構築

Gatsbyのインストール方法、プロジェクトの作り方、Linter(ESLint, stylelint)/Formatter(prettier)、CSS-in-JS(styled-components, Emotion)、tailwindの設定方法を説明します。

Ubuntu19.10から20.04へのアップグレード