【React】アイコンを表示させる方法

今回はReactでアイコンを表示させる方法を書きます。

アイコンは、こちらのReact Icons を利用します。

任意のフォルダを作成して、その中にReactアプリを作成しましょう。

npx create-react-app myapp

ReactIconsインストール

ReactIconsをインストールします。

npm install react-icons --save

App.js

App.jsのデフォルト表示を削除します。

import './App.css';


function App() {
return (
<div className="App">
<h2>アイコン</h2>
</div>
);
}


export default App;

ReactIcons

ReactIconsでは様々なアイコンが提供されています。
左側のからグループを選択します。
reactIcons
ReactIconsの中から、使用するアイコンを選択します。
reactIcons
AiFillCloudというクラウドのようなアイコンを使用してみます。
次のようにコードを記述します。
import './App.css';
import { AiFillCloud } from "react-icons/ai";


function App() {
return (
<div className="App">
<h2>アイコン</h2>
<h3>クラウド <AiFillCloud /></h3>
</div>
);
}


export default App;
アイコン名でimportして、< > 内に記述するだけでブラウザにアイコンが表示されます。
reactIcons
次はショッピングカートのようなアイコンを使用してみます。
import './App.css';
import { AiFillCloud } from "react-icons/ai";
import { BsFillCartCheckFill } from "react-icons/bs";


function App() {
return (
<div className="App">
<h2>アイコン</h2>
<h3><AiFillCloud />クラウド</h3>
<h3><BsFillCartCheckFill />ショッピングカート</h3>
</div>
);
}


export default App;

文字とアイコンの順序を替えました。

reactIcons
カラーのアイコンもあります。
reactIcons
import './App.css';
import { AiFillCloud } from "react-icons/ai";
import { BsFillCartCheckFill } from "react-icons/bs";
import { FcLock } from "react-icons/fc";


function App() {
return (
<div className="App">
<h2>アイコン</h2>
<h3><AiFillCloud />クラウド</h3>
<h3><BsFillCartCheckFill />ショッピングカート</h3>
<h3><FcLock />ロック</h3>
</div>
);
}


export default App;

サイズや色の変更方法

React16.3以上であれば、アイコンの色やサイズを変更できます。
colorやsizeといった値を定義します。

下記は公式サイトの一覧表です。

reactIcons

次のようにコードを書き換えます。
<IconContext.Providerで括って、valueで値を定義します。

import './App.css';
import { AiFillCloud } from "react-icons/ai";
import { BsFillCartCheckFill } from "react-icons/bs";
import { FcLock } from "react-icons/fc";
import { IconContext } from 'react-icons'


function App() {
return (
<div className="App">
<h2>アイコン</h2>
<IconContext.Provider value={{ color: "blue", size: "2em", className: "global-class-name" }}>
<h3><AiFillCloud />クラウド</h3>
<h3><BsFillCartCheckFill />ショッピングカート</h3>
<h3><FcLock />ロック</h3>
</IconContext.Provider>
</div>
);
}


export default App;
ブラウザのアイコンの色が青色になり、大きくなりました。

reactIcons

まとめ

今回はReactIconsを利用して、アイコンを表示させる方法を書きました。
最後までお読みいただきありがとうございました。

返信を残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください