React からアイコンが利用できるUniconsを使ってみる

はじめに

• デザインが全くできないエンジニアとしては、少しでもデザインをよくするために無料のアイコンなどでUIをほんの少しだけよくしたい。
• 下記の無料枠で利用できるアイコンを画面に表示させる https://iconscout.com/

利用するパッケージのインストール方法

 yarn add @iconscout/react-unicons

利用方法

import React from 'react';
import UilReact from '@iconscout/react-unicons/icons/uil-react'
 
const App = () => {
  return <UilReact size="140" color="#61DAFB" />
};
 
export default App;

• uil-chart-barの文字列を下記のサイトから利用したいものを探す https://iconscout.com/unicons/explore/line

• 自分は以前作成したBMI推移を開発したので、そのグラフ表示時にグラフのアイコンを表示したかったので上記のexploreからグラフのアイコンを探して下記のようにインポートしてアイコンを表示することができました。

実装したコード

import UilChartBar from '@iconscout/react-unicons/icons/uil-chart-bar'
（省略）
  return (
    <div>
      <h2><UilChartBar size="40" color="#61DAFB" />BMI・体重推移</h2>      
      <Line data={data} />
    </div>
  );

結果画面

• アイコンが表示されたことを確認する