reactのライブラリで最近注目されてきている「react-icons」を今回は触っていきたいと思います。
このライブラリを使用すると様々な種類のアイコンが簡単に使えるようになります。
上の画像はほんの一例に過ぎません。
プログラミングしててもUIの実装してるとテンション上がりますよね。
では、早速使い方を解説していきます。
まずはcreate-react-appでreact-iconsの導入環境を作成
おきまりのcreate-react-appでreactの環境を作成していきます。
create-react-appは爆速でreactの実行環境が作成できるので、覚えておいて損はないはず。
今回は「my-app」という名前で作成します。
create-react-app my-app
（インストール完了）
cd my-app
npm start
（http://localhost:3000/ を表示）
これでreactのベースとなる環境が出来ました。
以下のような画面になるはずです。
react-iconsを導入していく
まずはnpm install
次のコマンドでreact-iconsのインストールを行います。
インストールする前に、ctrl + c で先ほど起動した画面を終了しておくことを忘れずに！
%~ %n pwd
/Users/takebon/Desktop/Git/study/my-app
%~ %n npm install react-icons
+ react-icons@4.2.0
added 1 package from 2 contributors and audited 1946 packages in 10.135s
これでインストール完了です。
いよいよ実装いきます
実装の前にどんなアイコンがあるか確認する
公式のホームページでどんなアイコンがあるか、
どんな使いかたをするのか簡単に見ておこう。
https://react-icons.github.io/react-icons/icons?name=fc
今回はこの辺を使用していきます。
ポップなアイコンでいいですね。これ以外にもモノクロだったり、テイストが違ったり本当に色々な種類があります。
react-iconsを実装
では実装していきます。
修正するソースは、「my-app/src/App.js」です。
■修正前
import logo from ‘./logo.svg’;
import ‘./App.css’;
function App() {
return (
<div className=”App”>
<header className=”App-header”>
<img src={logo} className=”App-logo” alt=”logo” />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className=”App-link”
href=”https://reactjs.org”
target=”_blank”
rel=”noopener noreferrer”
>
Learn React
</a>
</header>
</div>
);
}
export default App;
■修正後
import logo from ‘./logo.svg’;
import ‘./App.css’;
import { FcAbout, FcAcceptDatabase } from “react-icons/fc”;
function App() {
return (
<div className=”App”>
<div>ポップなアイコンでいいですね。</div>
<FcAbout size={200} />
<FcAcceptDatabase size={100} />
</div>
);
}
export default App;
これで修正完了です。
修正が完了したら以下のコマンドで起動するか確かめてみましょう。
エラーがある場合はターミナルに表示されるので、それを読んでどんなエラーが出たか確認して修正しましょう。
npm start実際に画面を表示してみよう
まとめ
簡単にポップなアイコンが使えて、かなり良さそうなライブラリでした。
カラー、白黒、マテリアル、フラットと色々なバリエーションもあって、とりあえずどれかしらは使用しそうです。
今回はあんまりプロパティーは試してないですが、sizeで大きさを変えられるので必要最低限の機能は備えていると感じました。
そして、なによりreactの環境構築が一瞬で終わって素晴らしい。
create-react-appと押せばすぐにreactが動かせる環境が出来るのはいいですね。
みなさんも良いreactライフを。