【Next.js】「Font Awesome」「Feather Icons」でアイコンを使う。

Next.jsで個人的によく使うアイコン「Font Awesome」と「Feather Icons」の使い方メモです。

【1】Font Awesome

https://fontawesome.com/

インストール

$ 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>
  )
}

【2】Feather Icons

https://feathericons.com/

インストール

$ npm i react-feather

実装コード

import { Circle, User, Facebook } from 'react-feather';


export default () => {
  return (
    <div>
      <Circle />
      <User />
      <Facebook />
    </div>
  )
}

まとめ

無料で使えるアイコン数の多さは「Font Awesome」。インストールや実装コードのシンプルさは「Feather Icons」。