import React from 'react' ; import cx from 'classnames' ; import { capitalizeFirstLetter } from 'common/utils' ; import styles from './svgIcon.module.css' ; type FontSize = 'inherit' | 'default' | 'small' | 'large' ; export type SvgIconProps = { children ? : any ; className ? : string ; color ? : 'inherit' | 'primary' ; fontSize ? : FontSize ; htmlColor ? : string ; shapeRendering ? : string ; viewBox ? : string ; } ; export function SvgIcon ( { children , className = '' , color = 'inherit' , fontSize = 'default' , htmlColor , viewBox = '0 0 24 24' , ... other } ) { return ( < svg className = { cx ( styles . root , { [ styles [ `color${ capitalizeFirstLetter ( color ) }` ] ] : color !== 'inherit' , [ styles [ `fontSize${ capitalizeFirstLetter ( fontSize ) }` ] ] : fontSize !== 'default' , } , className ) } focusable = "false" aria - hidden = "false" role = "presentation" color = { htmlColor } viewBox = { viewBox } { ... other } > { children } < /svg>); }