import { createUseStyles } from 'react-jss' ; import { IconProps , IconSize } from './Icon.types' ; const useStyles = createUseStyles ( { icon : ( { iconSize } ) => ( { backgroundColor : 'transparent' , color : 'inherit' , display : 'block' , fill : 'currentColor' , height : iconSize , verticalAlign : 'middle' , width : iconSize , '& svg' : { fill : 'inherit' , height : '100%' , width : '100%' , '& symbol path' : { all : 'inherit' } } } ) } ) ; export const Icon = ( props ) : JSX . Element => { const { className = '' , name = 'icon' , size : propSize = '' } = props ; const size = propSize . toLowerCase ( ) . trim ( ) as IconSize ; let iconSize ; switch ( size ) { case 'md' : iconSize = 32 ; break ; case 'lg' : iconSize = 64 ; break ; case 'xl' : iconSize = 128 ; break ; case 'xx' : iconSize = 256 ; break ; default : iconSize = 16 ; break ; } const classes = useStyles ( { iconSize } ) ; const styleClasses = [ name , classes . icon , className ] ; const useTag = `<use xlink:href="/icons/icons.svg#${ name }" />` ; return < svg className = { styleClasses . join ( ' ' ) } dangerouslySetInnerHTML = { { __html : useTag } } />; } ;