いろいろなプラットフォームのアイコンを使えるReact Icons


React Iconsは、AntDesign Icons, Bootstrap Icons, FontAwesomeなど、いろいろなプラットフォームのアイコンを一挙に使える。

使い方

① インストールする

npm install react-icons --save

React Iconsのページで探したいアイコンを検索

③ 使いたいアイコンをクリックしてimportすべき名前をコピー(e.g., FaBeer

④ そのアイコンがどのプラットフォーム(FontAwesome etc)か名前から推測して、左カラムの各プラットフォームのページに行ってどこからimportするのか確認

  • なぜかというと、例えばreact-icons/fafaの部分は検索からはわからないので

⑤ Reactでimportして使う

import { FaBeer } from 'react-icons/fa';

class Question extends React.Component {
  render() {
    return <h3> Lets go for a <FaBeer />? </h3>
  }
}