react icons
v5.3.0
react-iconsを使用すると、React プロジェクトに人気のアイコンを簡単に含めることができます。これは、プロジェクトが使用しているアイコンのみを含めることができる ES6 インポートを利用します。
yarn add react-icons
# or
npm install react-icons --save使用例
import { FaBeer } from "react-icons/fa" ;
function Question ( ) {
return (
< h3 >
Lets go for a < FaBeer / > ?
< / h3 >
) ;
}さらなる使用例と他のパッケージのアイコンの使用方法については、ドキュメントを参照してください。注: 各 Icon パッケージには、インポート元のreact-icons下に独自のサブフォルダーがあります。
たとえば、マテリアル デザインのアイコンを使用するには、インポートは次のようになります。 import { ICON_NAME } from 'react-icons/md';
注このオプションはしばらく新しいリリースがありませんでした。詳細 #593
プロジェクトのサイズが大きくなった場合は、このオプションを使用できます。この方法には、パッケージのインストールに時間がかかるというトレードオフがあります。
yarn add @react-icons/all-files
# or
npm install @react-icons/all-files --save使用例
import { FaBeer } from "@react-icons/all-files/fa/FaBeer" ;
function Question ( ) {
return (
< h3 >
Lets go for a < FaBeer / > ?
< / h3 >
) ;
} | アイコンライブラリ | ライセンス | バージョン | カウント |
|---|---|---|---|
| 円周アイコン | MPL-2.0ライセンス | 1.0.0 | 288 |
| 素晴らしいフォント 5 | CC BY 4.0 ライセンス | 5.15.4-3-gafecf2a | 1612 |
| 素晴らしいフォント 6 | CC BY 4.0 ライセンス | 6.5.2 | 2045年 |
| イオニコン 4 | マサチューセッツ工科大学 | 4.6.3 | 696 |
| イオコン 5 | マサチューセッツ工科大学 | 5.5.4 | 1332 |
| マテリアル デザインのアイコン | Apache ライセンス バージョン 2.0 | 4.0.0-98-g9beae745bb | 4341 |
| ティピコン | CC BY-SA 3.0 | 2.1.2 | 336 |
| Github Octicons アイコン | マサチューセッツ工科大学 | 18.3.0 | 264 |
| フェザー | マサチューセッツ工科大学 | 4.29.1 | 287 |
| ルシード | ISC | v5.1.0-6-g438f572e | 1215 |
| ゲームアイコン | CC BY 3.0 | 12920d6565588f0512542a3cb0cdfd36a497f910 | 4040 |
| 天気アイコン | シル・オブ・フル 1.1 | 2.0.12 | 219 |
| デビコン | マサチューセッツ工科大学 | 1.8.0 | 192 |
| アリのデザインアイコン | マサチューセッツ工科大学 | 4.4.2 | 831 |
| ブートストラップのアイコン | マサチューセッツ工科大学 | 1.11.3 | 2716 |
| リミックスアイコン | Apache ライセンス バージョン 2.0 | 4.2.0 | 2860 |
| フラットカラーアイコン | マサチューセッツ工科大学 | 1.0.2 | 329 |
| グロメットアイコン | Apache ライセンス バージョン 2.0 | 4.12.1 | 635 |
| ヒーローアイコン | マサチューセッツ工科大学 | 1.0.6 | 460 |
| ヒーローアイコン 2 | マサチューセッツ工科大学 | 2.1.3 | 888 |
| シンプルなアイコン | CC0 1.0 ユニバーサル | 12.14.0 | 3209 |
| シンプルなラインのアイコン | マサチューセッツ工科大学 | 2.5.5 | 189 |
| アイコムーン無料 | CC BY 4.0 ライセンス | d006795ede82361e1bac1ee76f215cf1dc51e4ca | 491 |
| ボックスアイコン | マサチューセッツ工科大学 | 2.1.4 | 1634年 |
| css.gg | マサチューセッツ工科大学 | 2.1.1 | 704 |
| VS コードのアイコン | CC BY 4.0 | 0.0.35 | 461 |
| テーブルラーのアイコン | マサチューセッツ工科大学 | 3.2.0 | 5237 |
| Themify アイコン | マサチューセッツ工科大学 | v0.1.2-2-g9600186 | 352 |
| 基数アイコン | マサチューセッツ工科大学 | @radix-ui/[email protected] | 318 |
| 蛍光体のアイコン | マサチューセッツ工科大学 | 2.1.1 | 9072 |
| Icons8 ライン素晴らしい | マサチューセッツ工科大学 | 1.3.1 | 1544年 |
プル リクエストを送信するか問題を作成することで、アイコンをさらに追加できます。
React Context API を使用して、react-icons プロパティを設定できます。
React 16.3以降が必要です。
import { IconContext } from "react-icons" ;
< IconContext . Provider value = { { color : "blue" , className : "global-class-name" } } >
< div >
< FaFolder / >
< / div >
< / IconContext . Provider > ;| 鍵 | デフォルト | 注意事項 |
|---|---|---|
color | undefined (継承) | |
size | 1em | |
className | undefined | |
style | undefined | サイズと色を上書き可能 |
attr | undefined | 他の属性によって上書きされる |
title | undefined | アクセシビリティに関するアイコンの説明 |
インポートパスが変更されました。古いスタイルから書き直す必要があります。
// OLD IMPORT STYLE
import FaBeer from "react-icons/lib/fa/beer" ;
function Question ( ) {
return (
< h3 >
Lets go for a < FaBeer / > ?
< / h3 >
) ;
} // NEW IMPORT STYLE
import { FaBeer } from "react-icons/fa" ;
function Question ( ) {
return (
< h3 >
Lets go for a < FaBeer / > ?
< / h3 >
) ;
}最終的には大規模な JS バンドルが必要ですか?この問題を確認してください。
バージョン 3 からは、 vertical-align: middle自動的に付与されなくなりました。 IconContext を使用して className を指定するか、インライン スタイルを指定してください。
< IconContext . Provider value = { { style : { verticalAlign : 'middle' } } } > classNameスタイリング成分
< IconContext . Provider value = { { className : 'react-icons' } } >CSS
. react-icons {
vertical-align : middle;
}@types/react-iconsへの依存関係は削除できます。
yarn remove @types/react-iconsnpm remove @types/react-icons./build-script.shプロジェクト全体をビルドします。詳細については、「CI スクリプト」も参照してください。
yarn
cd packages/react-icons
yarn fetch # fetch icon sources
yarn buildまず、ディスカッションをチェックして、アイコン セットを追加したい人がいるかどうかを確認します。
https://github.com/react-icons/react-icons/Discussions/categories/new-icon-set
取得するSVGファイルはこのファイルで管理されます。このファイルを編集して、 yarn fetch && yarn check && yarn buildを実行します。
https://github.com/react-icons/react-icons/blob/master/packages/react-icons/src/icons/index.ts
注:現時点では、プロジェクトはプレビュー サイトの PR を積極的に受け付けていません。
プレビュー サイトは、Astro+React で構築されたreact-icons Web サイトです。
cd packages/react-icons
yarn fetch
yarn build
cd ../preview-astro
yarn startこのデモは、簡単にテストできるように、 react-iconsが依存関係として追加された Create React App ボイラープレートです。
cd packages/react-icons
yarn fetch
yarn build
cd ../demo
yarn start SVG はすべての主要なブラウザでサポートされています。 react-iconsを使用すると、1 つの大きなフォント ファイルではなく、必要なアイコンのみをユーザーに提供できるため、プロジェクトでどのアイコンが使用されているかを認識するのに役立ちます。
マサチューセッツ工科大学
