2019.04.30

ReactでFont Awesomeを使う方法

ReactでFont Awesomeを使う方法です。

Font Awesomeのインストール

ReactでのFont Awesomeは公式でサポートされています。

下のコードでアイコンのSVGを読み込みます。

npm i --save @fortawesome/fontawesome-svg-core \

npm i --save @fortawesome/free-solid-svg-icons \

npm i --save @fortawesome/react-fontawesome

app.jsにインポート

次にapp.jsでライブラリーと使いたいアイコンを読み込みます。

import { library } from '@fortawesome/fontawesome-svg-core'

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

import { faStroopwafel } from '@fortawesome/free-solid-svg-icons'

library.add(faStroopwafel)

使いたいファイルでインポート&表示

使いたいファイルでインポートして表示させます。

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

export const Food = () => (
  <div>
    Favorite Food: <FontAwesomeIcon icon="stroopwafel" />
  </div>
)

参考

React

@Flower71418279