React で開発しているプロジェクトに、マテリアルデザインアイコンや、Font Awesome のアイコンを追加するときに便利なライブラリ「React Icons」のご紹介です。
こちらを知らない時は、アイコンを PNG や SVG でダウンロードして、<img> で表示して…という方法を使うかと思いますが、このライブラリを使えば本当にたくさんのアイコンを簡単に使うことができます。
もっと早くに知りたかった…！
公式サイトはこちらから。
使い方ですが、まずライブラリを下記コマンドでインストールします。
npm install react-icons --save
インストールが終わったら、使いたいアイコンを探し、下記のように指定するだけです。
サンプルコードは、Font Awesome の React アイコンを表示しています。
まず、使いたいアイコンをインポートします。
import { FaReact } from "react-icons/fa";
で、使いたい場所で、下記のように指定するだけです。
なお、下記のサンプルコードは、render()
render() {
return (<p><FaReact /> React</p>);
}
指定する方法等に誤りがなければ、こちらを実行すれば React のアイコンが表示されるはずです！
実装方法としては以上です。
私はまだ、マテリアルデザインアイコンと Font Awesome くらいしか使っていないのですが、他にもゲームアイコンや、GitHub で使われているアイコンや天気のアイコンもあり、特殊なアイコンでなければ大抵のアイコンは網羅していると思います。
特にアプリの開発で React を使っている方は是非導入をご検討ください。
以上、React でマテリアルデザインアイコンや Font Awesome など様々なアイコンが利用できるライブラリ「React Icons」のご紹介でした。
ご参考になれば幸いです。
