次のプロジェクトで使用できる何千もの無料のオープンソースアイコンを提供する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スタイルを継承しますが、より多くのカスタマイズ機能が必要な場合は、アイコンに小道具を渡すことができます。

以下の例では、 colorsize に固有です 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ライセンスの下でリリースされています。

:に含まれるアイコンのコレクションを表示します react-icons 彼らのデモウェブサイト