Class IgxIconService

Ignite UI for Angular Icon Service -

Ignite UI Icon Service は、カスタム SVG 画像を IgxIconComponent で使用できます。 指定した font-family に従って IgxIconComponent に適用されるカスタム クラスに関連付けするために使用できます。

例:

this.iconService.setFamily('material', { className: 'material-icons', type: 'font' });
this.iconService.addSvgIcon('aruba', '/assets/svg/country_flags/aruba.svg', 'svg-flags');

コンストラクター

プロパティ

iconLoaded: Observable<IgxIconLoadedEvent>

アイコンが HTTP 要求を介して正常に読み込まれたときに発生する Observable。

this.service.iconLoaded.subscribe((ev: IgxIconLoadedEvent) => ...);

アクセサー

メソッド

  • メタ ファミリのアイコンにアイコン参照メタを追加します。 アイコン参照が見つからない場合にのみ実行されます。

      this.iconService.addIconRef('aruba', 'default', { name: 'aruba', family: 'svg-flags' });
    

    パラメーター

    • name: string
    • family: string
    • icon: IconMeta

    返却 void

  • キャッシュに SVG 画像を追加します。SVG ソースは url です。

      this.iconService.addSvgIcon('aruba', '/assets/svg/country_flags/aruba.svg', 'svg-flags');
    

    パラメーター

    • name: string
    • url: string
    • family: string = ...
    • stripMeta: boolean = false

    返却 void

  • キャッシュに SVG 画像を追加します。SVG ソースはテキストです。

      this.iconService.addSvgIconFromText('simple', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
    <path d="M74 74h54v54H74" /></svg>', 'svg-flags');

    パラメーター

    • name: string
    • iconText: string
    • family: string = ""
    • stripMeta: boolean = false

    返却 void

  • 指定した font-family に関連するカスタム クラスがある場合は返します。

      const familyClass = this.iconService.familyClassName('material');
    

    パラメーター

    • alias: string

    返却 string

  • キャッシュされた SVG 画像を文字列として返します。

      const svgIcon = this.iconService.getSvgIcon('aruba', 'svg-flags');
    

    パラメーター

    • name: string
    • family: string = ""

    返却 SafeHtml

  • 指定した SVG 画像がキャッシュに存在するかどうかを返します。

      const isSvgCached = this.iconService.isSvgIconCached('aruba', 'svg-flags');
    

    パラメーター

    • name: string
    • family: string = ""

    返却 boolean

  • 指定した font-family の IgxIconComponent に適用するカスタム クラスを登録します。

      this.iconService.registerFamilyAlias('material', 'material-icons');
    

    バージョン 18.1.0。代わりに setFamily プロパティを使用してください。

    パラメーター

    • alias: string
    • className: string = alias
    • type: IconType = "font"

    返却 this

  • ファミリ名が使用されるたびに IgxIconComponent に適用されるファミリと className の関係を作成します。

      this.iconService.setFamily('material', { className: 'material-icons', type: 'liga' });
    

    パラメーター

    • name: string
    • meta: FamilyMeta

    返却 void

  • addIconRef に似ていますが、常にメタ ファミリ内のアイコンのアイコン参照メタを設定します。

      this.iconService.setIconRef('aruba', 'default', { name: 'aruba', family: 'svg-flags' });
    

    パラメーター

    • name: string
    • family: string
    • icon: IconMeta

    返却 void