⚙️
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