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

アイコンが必要なReactアプリで作業している場合は、react-iconsをチェックしてください。 FontAwesomeMaterialDesignを含む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スタイルを継承しますが、より多くのカスタマイズ機能が必要な場合は、アイコンに小道具を渡すことができます。

以下の例では、colorsizereact-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-iconspackage.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に含まれるアイコンのコレクションを表示します