ReactIconsを使用すると、何百ものオープンソースアイコンにアクセスできます

次のプロジェクトで使用できる何千もの無料のオープンソースアイコンを提供するReactIconsと呼ばれるReactライブラリについて学びます。

アイコンが必要なReactアプリで作業している場合は、react-iconsをチェックしてください。 FontAwesomeやMaterialDesignを含む9つの人気のあるオープンソースアイコンライブラリが含まれています。

開始するには、npmを使用してモジュールをインストールします。

$ npm install --save react-icons

React Icons は、アイコンをReactコンポーネントとしてエクスポートするため、非常に直感的です。

import React, { Component } from 'react';
import { FaHeart } from "react-icons/fa";  // Font Awesome

class App extends Component {
  render() {
    return (
      <div>
        Hello World
        <FaHeart />
      </div>
    )
  }
}

エクスポートできるすべて！

react-iconsには9つのアイコンライブラリが含まれているため、アイコンには常にいくつかのバリエーションがあります。「ちょうどいい」アイコンを見つけるために常に終わりのない探求をしているなら、これはあなたのためです！ 👌

import { FaCheck } from "react-icons/fa";       // Font Awesome
import { IoMdCheckmark } from "react-icons/io"; // Ionicons
import { MdCheck } from "react-icons/md";       // Material Design
import { GoCheck } from "react-icons/go";       // Github Octicon

スタイルのカスタマイズ

アイコンは通常CSSスタイルを継承しますが、より多くのカスタマイズ機能が必要な場合は、アイコンに小道具を渡すことができます。

以下の例では、colorとsizeはreact-iconに固有ですが、標準のstyle小道具を渡すこともできます。

<FaBeer
  color="#008f68"
  size="50px"
  style={{ margin: '0 5px' }}
/>
<IoIosPaperPlane
  color="#6DB65B"
  size="50px"
  style={{ margin: '0 5px' }}
/>
<MdCloud
  color="#4AAE9B"
  size="50px"
  style={{ margin: '0 5px' }}
/>

軽量でバンドラーに優しい

React Icons には何百ものアイコンが含まれていますが、バンドルに大きなフットプリントを残すことはありません。

Webpack/Parcelの最適化

react-iconsのpackage.jsonファイルには、アプリのビルド時にツリーシェイクを実行するようにバンドラーに指示する構成があります。これは、明示的にimportしたアイコンのみがバンドルされることを意味します。

SVG形式

react-iconsのアイコンはすべてSVG（スケーラブルベクターグラフィックス）です。これは、アイコンあたりのファイルサイズがラスターイメージ形式（*.jpegや*.pngなど）の場合よりも大幅に小さいことを意味します。 SVGファイルは通常、他の画像形式よりも桁違いに小さく、特にアイコンなどの場合はそうです。

オープンソースフレンドリー

各ライブラリのパーミッシブライセンスにより、非営利/営利プロジェクトでreact-iconsを使用できます。

Font Awesome CCBY4.0ライセンス
イオニコンMIT
マテリアルデザインアイコンApacheLicenseバージョン2.0
タイピコンCCBY-SA 3.0
GithubOcticonsアイコンMIT
フェザーMIT

react-icons自体はMITライセンスの下でリリースされています。

注：デモWebサイトでreact-iconsに含まれるアイコンのコレクションを表示します