⚙️

React Iconsの基本的な使い方

2022/05/24に公開

公式

https://react-icons.github.io/react-icons
React Icons には、Font Awesome や Material などのアイコンライブラリがまとめられています。

インストール方法

npm installで導入します。

$ npm install react-icons --save

React Iconの使い方

基本的には検索して貼り付けるだけです。

import { FaGithub } from 'react-icons/fa';
import { SiZenn } from 'react-icons/si';

<FaGithub className="icon" size="2rem"/>
<SiZenn size="2rem" />


番外編

React IconをTypeScriptのオブジェクト型に入れる方法

iconの型定義をReactElementにする
()の中にhtml内の書き方で記述

type Menu = {
  key: string,
  label: string,
  icon: ReactElement,
}

const menuList: Menu[] = [
  {
    key: 'menu',
    label: 'メニュー',
    icon: (<MdOutlineLightbulb className='mr-4' size='1.5rem'/>),
  },
  ];
return(

  <div >
    {
      menuList.map((menu:Menu)=>{
        return(
          <div key={menu.key}>{menu.icon}<p>{menu.label}</p></div>
        )
        })
    }
  </div>
);

参考記事

https://zenn.dev/taichifukumoto/articles/how-to-use-react-icons  
React でアイコンを使うなら React Icons がおすすめ


Discussion