jsx import { CSSObject , jsx , ClassNames } from '@emotion/core' ; import * as React from 'react' ; import { CanvasIcon , CanvasIconTypes } from '@workday/design-assets-types' ; import { validateIconType } from './utils' ; export interface SvgProps extends React . HTMLAttributes < HTMLSpanElement > { src : CanvasIcon ; styles ? : CSSObject ; type : CanvasIconTypes ; iconRef ? : React . Ref < HTMLSpanElement > ; default shouldMirror ? : boolean ; } export default class Svg extends React . Component < SvgProps > { public render ( ) { const { src , styles , type , iconRef , shouldMirror , ... elemProps } = this . props ; try { validateIconType ( src , type ) ; } catch ( e ) { console . error ( e ) ; return null ; } return ( < ClassNames > { ( { css , cx } ) => ( < span { ... elemProps } dangerouslySetInnerHTML = { { __html : src . svg } } className = { cx ( css ( styles , { display : 'inline-block' , '& svg' : { display : 'block' } , transform : shouldMirror ? 'scaleX(-1)' : undefined , } ) , elemProps . className ) } ref = { iconRef } / > ) } < /ClassNames>); } }