import React , { Component , CSSProperties } from 'react' ; import { getMakiSymbolSvg , styleSvg , buildSrcUrl } from '../../symbol_utils' ; interface Props { symbolId : string ; fill ? : string ; stroke ? : string ; style : CSSProperties ; } interface State { imgDataUrl : string | null ; } export class SymbolIcon extends Component < Props , State > { private _isMounted : boolean = false ; state : State = { imgDataUrl : null , } ; componentDidMount ( ) { this . _isMounted = true ; this . _loadSymbol ( ) ; } componentWillUnmount ( ) { this . _isMounted = false ; } async _loadSymbol ( ) { let imgDataUrl ; try { const svg = getMakiSymbolSvg ( this . props . symbolId ) ; const styledSvg = await styleSvg ( svg , this . props . fill , this . props . stroke ) ; imgDataUrl = buildSrcUrl ( styledSvg ) ; } catch ( error ) { return ; } if ( this . _isMounted ) { this . setState ( { imgDataUrl } ) ; } } render ( ) { if ( ! this . state . imgDataUrl ) { return null ; } const { symbolId , fill , stroke , ... rest } = this . props ; return ( < img width = "16px" height = "18px" src = { this . state . imgDataUrl } alt = { this . props . symbolId } { ... rest } />); } }