import Component from '@glimmer/component' ; import { tracked } from '@glimmer/tracking' ; import type { IconifyIconName } from '@iconify/utils/lib/icon/name' ; import { stringToIcon } from '@iconify/utils/lib/icon/name' ; import { getIconData } from '@iconify/core/lib/storage/functions' ; import type { FullIconifyIcon } from '@iconify/utils/lib/icon' ; import { fullIcon } from '@iconify/utils/lib/icon' ; import type { IconifyIconLoaderAbort } from '@iconify/core/lib/api/icons' ; import { loadIcons } from '@iconify/core/lib/api/icons' ; import type { IconifyIconProps } from './props' ; import type { RenderResult } from './render' ; import { render } from './render' ; /**
 * Type for loading status
 */ interface CurrentIconAsString { name : string ; className : string ; data ? : FullIconifyIcon ; abort ? : IconifyIconLoaderAbort ; } /**
 * Empty icon
 */ const emptyIcon = { width : 16 , height : 16 , preserveAspectRatio : 'xMidYMid meet' , viewBox : '0 0 16 16' , className : '' , body : '' , } ; /**
 * Component
 */ export class IconifyIconComponent extends Component < IconifyIconProps > { @ tracked _counter = 0 ; _icon : CurrentIconAsString | null = null ; /**
     * Abort loading icon
     */ _abortLoading ( ) { const icon = this . _icon ; if ( icon ?. abort ) { icon . abort ( ) ; delete icon . abort ; } } /**
     * Render
     */ get data ( ) : RenderResult { this . _counter ; const icon = this . args . icon ; if ( typeof icon === 'object' && icon !== null && typeof icon . body === 'string' ) { if ( this . _icon ) { this . _abortLoading ( ) ; this . _icon = null ; } return render ( fullIcon ( icon ) , this . args , '' ) ; } if ( this . _icon ) { const loaded = this . _icon ; if ( loaded . name === icon && loaded . data ) { return render ( loaded . data , this . args , loaded . className ) ; } } let iconName ; if ( typeof icon !== 'string' || ( iconName = stringToIcon ( icon , false , true ) ) === null ) { if ( this . _icon ) { this . _abortLoading ( ) ; this . _icon = null ; } return emptyIcon ; } let className = 'iconify' ; if ( iconName . prefix !== '' ) { className += ' iconify--' + iconName . prefix ; } if ( iconName . provider !== '' ) { className += ' iconify--' + iconName . provider ; } const data = getIconData ( iconName ) ; if ( ! data ) { if ( ! this . _icon || this . _icon . name !== icon ) { this . _abortLoading ( ) ; this . _icon = { name : icon , className , abort : loadIcons ( [ iconName ] , ( ) => { if ( ! this . isDestroyed && this . _icon ?. name === icon ) { const data = getIconData ( iconName ) ; if ( data ) { this . _icon = { name : icon , className , data , } ; this . _counter ++ ; if ( this . args . onLoad ) { this . args . onLoad ( icon ) ; } } } } ) , } ; } } else { this . _icon = { name : icon , className , data , } ; return render ( data , this . args , className ) ; } return emptyIcon ; } /**
     * Remove loader callback
     */ willDestroy ( ) { super . willDestroy ( ) ; this . _abortLoading ( ) ; } }