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ライセンスの下でリリースされています。
注:に含まれるアイコンのコレクションを表示します react-icons
彼らのデモウェブサイト