React/Next.jsで使うアイコンはReact Feather Iconsが便利！

基本的には種類が豊富なFont Awesomeを扱うことが多いですが、数個のシンプルなアイコンであればReact Feather Iconsを使うのが良いかなと思ったのでメモしておきます。

補足：現在はReact Iconsで統一してアイコン設置しています。

実現したいこと

• React、Next.jsでアイコンを使いたい！

React Feather Iconsを使う利点

React Feather Iconsを使う利点は、コードがシンプルである点です。npmやyarnでパッケージをインストールしたら、次のように取得したいアイコンをインポートするだけです。

npm i react-feather
or
yarn add react-feather

import React from 'react';
import { Camera } from 'react-feather';

const App = () => {
  return <Camera />
};

export default App;

また、次のようにアイコンを一括でインポートして書くこともできます。

import React from 'react';
import * as Icon from 'react-feather';

const App = () => {
  return <Icon.Camera />
};
export default App;

Font Awesomeの場合

Font Awesomeでアイコンを取得する際は以下のようになります。

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)

FontAwesomeIconと記述するのが少しコード映えが悪いなと思い、React Feather Iconsを使うことにしました。アイコンを多用する際はFont Awesomeが良いかもしれませんが、Feather Iconsで完結できるなら後者の方がコードがシンプルで好きです。

まとめ

GoogleのMaterial Iconsなど、有名なアイコンライブラリはいくつかあります。アイコンの質自体は大差なく、デザインのちょっとした好みは分かれるとしても、基本的には要件を満たして実装できればどれを選んでも良いのではないかと思っています。

アイコンを多用する、少しニッチなアイコンを使いたい場合などはアイコンの多いFont Awesomeを使うか、アイコン素材を個別に作成または素材をダンロードして使っていく感じで運用していく予定です。

参考

feathericons/react-feather
Font Awesome React