🙂
【Next.js】Font Awesomeを導入する。
Next.jsでアイコンを使いたくなった時に「Font Awesome」をよく利用することがあります。
毎回やり方を忘れて調べてしまうので、今回はFont AwesomeのReactコンポーネントの導入方法をメモしておきます。
Font Awesomeのライブラリをインストール
$ npm install --save @fortawesome/fontawesome-svg-core
$ npm install --save @fortawesome/react-fontawesome
$ npm install --save @fortawesome/free-solid-svg-icons
$ npm install --save @fortawesome/free-regular-svg-icons
$ npm install --save @fortawesome/free-brands-svg-icons
# 一括インストール
$ npm install --save @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons
表示したいアイコンを追加する
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCircle } from '@fortawesome/free-solid-svg-icons'
import { faUser } from "@fortawesome/free-regular-svg-icons";
import { faFacebookF } from '@fortawesome/free-brands-svg-icons'
export default () => {
return (
<div>
<FontAwesomeIcon icon={faCircle} />
<FontAwesomeIcon icon={faUser} />
<FontAwesomeIcon icon={faFacebookF} />
</div>
)
}
参考ページ
Discussion