§@gravity-ui/icons ·

Gravity UI アイコンパックです。アイコンは SVG と React の両方のソースを持っています。 ショーケース ページをご覧ください。

§インストール

npm install --save-dev @gravity-ui/icons

§使用方法

§React

import Cloud from '@gravity-ui/icons/Cloud';

または

import {Cloud} from '@gravity-ui/icons';

§SVG

これには適切なローダーが必要になる場合があります

import cloudIcon from '@gravity-ui/icons/svgs/cloud.svg';

§ライセンス

MIT ライセンスで配布されます。詳細は LICENSE を参照してください。

§AI エージェント向け

Gravity UI の公式 SVG アイコンセットで、React コンポーネントと @gravity-ui/uikit の Icon レンダラーで使用できる生の .svg ファイルの両方として提供されます。

§使用する場合

• Gravity UI アプリ内でアイコンが必要で、一貫性のある既製のセットを使用したい場合。
• uikit を介してアイコンをレンダリングする場合: ここでアイコンコンポーネントをインポートし、Icon の data プロップを通じて uikit の Icon に渡します。
• 生の .svg アセットが必要な場合 (例: CSS の background-image やビルド時の SVG ローダー用) で、React コンポーネントではない場合。

§使用しない場合

• 画面上にアイコンをレンダリングする場合 — このパッケージはグリフのみを提供します。実際のレンダラー (サイズ、色、a11y) は @gravity-ui/uikit の Icon コンポーネントです。
• カスタムまたはブランドのアイコンが必要で、セットに含まれていない場合 — 独自の SVG をインポートし、uikit の Icon に渡します。ここに配置されることを期待しないでください。

§よくある落とし穴

• アイコンは名前ではなくデータとして渡されます。 import {Gear} from '@gravity-ui/icons'; <Icon data={Gear} /> のようにしてください。<Icon name="gear" /> のような API はなく、このパッケージ自体は <Icon> コンポーネントをエクスポートしません。
• ツリーシェイキングにはインポートパスが重要です。 import Cloud from '@gravity-ui/icons/Cloud' は単一のアイコンをプルします。import {Cloud} from '@gravity-ui/icons' も機能しますが、バンドラーがバレルをツリーシェイクすることに依存します。
• SVG のインポートにはローダーが必要です。 import icon from '@gravity-ui/icons/svgs/cloud.svg' は、バンドラーが .svg ファイルを処理するように構成されている場合にのみ機能します。
• サイズと色はレンダラーから取得されます。 uikit の Icon で size を設定し、color/CSS の currentColor で色を制御します。SVG 自体には固定の色はありません。