Blazor Icon (アイコン) の概要

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

    Blazor Icon の例

    使用方法

    IgbIcon を使用する前に、次のように登録する必要があります:

    IgbIconModule.Register(IgniteUIBlazor);
    

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

    アイコンの追加

    画像をアイコンとして登録するには、単一の IgbIcon 要素で 2 つの「register」メソッドの 1 つを呼び出すだけで、アイコンをアイコン コレクションに追加できます。

    RegisterIcon メソッドを使用すると、SVG 画像を外部ファイルからアイコンとして登録できます。

    <IgbIcon @ref="@IconRef" />
    
    @code {
      private IgbIcon IconRef { get; set; }
    
      protected override void OnAfterRender(bool firstRender)
      {
         base.OnAfterRender(firstRender);
         if (this.IconRef != null && firstRender)
         {
           this.IconRef.RegisterIcon("search", "https://unpkg.com/material-design-icons@3.0.1/action/svg/production/ic_build_24px.svg", "material");
         }
      }
    }
    

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

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

    IgbIcon IconName="search" Collection="material" />
    

    アイコンを登録する 2 番目の方法は、SVG 文字列を [RegisterIconFromText] メソッドに渡すことです。

    <IgbIcon @ref="@IconRef" />
    
    @code {
      private IgbIcon IconRef { get; set; }
    
      protected override void OnAfterRender(bool firstRender)
      {
         base.OnAfterRender(firstRender);
         if (this.IconRef != null && firstRender)
         {
           const string 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>";
           this.IconRef.RegisterIconFromText("search", searchIcon, "material");
         }
      }
    }
    

    次に、上記のコンポーネント サンプルで説明したのと同じ方法で使用します。

    サイズ

    アイコン コンポーネントは、smallmedium (デフォルト)、large の 3 つのアイコン サイズをサポートしています。アイコンのサイズを変更するには、size 属性を前述のサイズのいずれかに設定します。

    <IgbIcon Size="@SizableComponentSize.Large">
    

    Mirrored (ミラー化済み)

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

    IgbIcon IconName="search" Collection="material" Mirrored="true" />
    

    スタイル設定

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

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

    その他のリソース