クラス IgxIconService

Ignite UI for Angular Icon サービス -

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

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

階層

  • IgxIconService

Index

コンストラクタ

  • new IgxIconService(_sanitizer: DomSanitizer, _httpClient: HttpClient, _platformUtil: PlatformUtil, _document: any): IgxIconService

プロパティ

iconLoaded: Observable<IgxIconLoadedEvent>

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

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

アクセサー

  • get defaultFamily(): string
  • set defaultFamily(className: string): void

メソッド

  • addSvgIcon(name: string, url: string, family?: string, stripMeta?: boolean): 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

  • addSvgIconFromText(name: string, iconText: string, family?: string, stripMeta?: boolean): 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

  • familyClassName(alias: string): string
  • getSvgIcon(name: string, family?: string): SafeHtml
  • isSvgIconCached(name: string, family?: string): boolean
  • 指定した SVG 画像がキャッシュに存在するかどうかを返します。

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

    パラメーター

    • name: string
    • family: string = ''

    返却 boolean

  • registerFamilyAlias(alias: string, className?: string): IgxIconService