Web Components Icon (アイコン) の概要

Web Components Icon コンポーネントを使用すると、フォントを簡単に表示したり、事前定義された SVG アイコンの大規模なセットから選択したりできます。プロジェクトのカスタムフォントアイコンを作成することもできます。多数の属性を利用して、使用中のアイコンのサイズを定義または変更したり、さまざまなスタイルをアイコンに適用したりできます。

Web Components Icon の例

使用方法

まず、次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります。

npm install igniteui-webcomponents

import { defineComponents, IgcIconComponent } from "igniteui-webcomponents";

defineComponents(IgcIconComponent);

Ignite UI for Web Components の完全な概要については、作業の開始トピックを参照してください。

IgcIconComponent には、それ自体にアイコンは含まれていません。これは、登録された SVG 画像を表示するためのコンジットです。

アイコンの追加

画像をアイコンとして登録するには、アイコンをアイコンコレクションに追加できるアイコンレジストリサービスから 2 つのユーティリティ関数のいずれかをインポートするだけです。

import {
  registerIcon,
  registerIconFromText,
} from "igniteui-webcomponents";

registerIcon 関数を使用すると、SVG 画像を外部ファイルからアイコンとして登録できます。

registerIcon(
  "search",
  "https://unpkg.com/material-design-icons@3.0.1/action/svg/production/ic_build_24px.svg",
  "material"
);

上記の方法では、search という名前のアイコンが material という名前のコレクションに追加されます。

次に、新しく登録されたアイコンを使用するには、名前とコレクションを IgcIconComponent 要素に渡すだけです。

<igc-icon name="search" collection="material"></igc-icon>

アイコンを登録する 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 変数を利用できます。

igc-icon {
  --ig-size: var(--ig-size-large);
}

Mirrored (ミラー化済み)

一部のアイコンは、右から左 (RTL) モードで使用する場合、少し異なって見える必要があります。そのため、設定するとアイコンを水平方向に反転させる mirrored 属性を提供します。

<igc-icon name="search" mirrored></igc-icon>

スタイル設定

アイコンコンポーネントは、IgcIconComponent 要素に直接スタイルを適用することでスタイルを設定できます。

igc-icon {
  --size: 48px;
  color: olive;
}