React Icon (アイコン) の概要
React Icon コンポーネントを使用すると、フォントを簡単に表示したり、事前定義された SVG アイコンの大規模なセットから選択したりできます。プロジェクトのカスタム フォント アイコンを作成することもできます。多数の属性を利用して、使用中のアイコンのサイズを定義または変更したり、さまざまなスタイルをアイコンに適用したりできます。
React Icon の例
使用方法
IgrIcon を使用する前に、次のように登録する必要があります:
まず、次のコマンドを実行して、対応する Ignite UI for React npm パッケージをインストールする必要があります:
npm install igniteui-react次に、以下のように、IgrIcon とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:
import { IgrIcon } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';IgrIcon には、それ自体にアイコンは含まれていません。これは、登録された SVG 画像を表示するためのコンジットです。
アイコンの追加
画像をアイコンとして登録するには、1 つの IgrIcon 要素で 2 つの「登録」メソッドのいずれかを呼び出すだけで、ページ上のアイコン コレクションにアイコンを追加できます。
RegisterIcon メソッドを使用すると、外部ファイルから SVG 画像をアイコンとして登録できます。
constructor() {
registerIconFromText("search", "https://unpkg.com/material-design-icons@3.0.1/action/svg/production/ic_build_24px.svg", "material");
}
<IgrIcon name="search" collection="material" />上記の方法では、search という名前のアイコンが material という名前のコレクションに追加されます。
次に、新しく登録されたアイコンを使用するには、名前とコレクションを IgrIcon 要素に渡すだけです。
<IgrIcon name="search" collection="material" />アイコンを登録する 2 番目の方法は、SVG 文字列を RegisterIconFromText メソッドに渡すことです。
const searchIcon =
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>';
registerIconFromText("search", searchIcon, "material");
次に、上記のコンポーネント サンプルで説明したのと同じ方法で使用します。
サイズ
アイコン コンポーネントは、small、medium (デフォルト)、large の 3 つのアイコン サイズをサポートしています。アイコンのサイズを変更するには、次のように --ig-size CSS 変数を利用できます。
<IgbIcon Size="@SizableComponentSize.Large"><IgrIcon className="size-small" />
<IgrIcon className="size-medium" />
<IgrIcon className="size-large" />アイコン コンポーネントにはカスタム サイズを設定することもできます。最も推奨される方法は、--size CSS 変数を使用することです。
.size-small {
--ig-size: var(--ig-size-small);
}
.size-medium {
--ig-size: var(--ig-size-medium);
}
.size-large {
--ig-size: var(--ig-size-large);
}Mirrored (ミラー化済み)
一部のアイコンは、右から左 (RTL) モードで使用する場合、少し異なって見える必要があります。そのため、設定するとアイコンを水平方向に反転させる mirrored 属性を提供します。
<IgrIcon name="search" collection="material" mirrored={true} />スタイル設定
アイコン コンポーネントは、IgrIcon 要素に直接スタイルを適用することでスタイルを設定できます。
igc-icon {
--size: 28px;
color: var(--ig-primary-500);
}API リファレンス
IgrIcon