import { styled } from '~/theme/stitches.config' ; import type { IconName } from '~/theme/icons/types' ; interface Props extends React . HTMLAttributes < HTMLSpanElement > { name : IconName ; } const IconSpan = ( { name , ... props } ) => ( < span aria - hidden = { true } { ... props } > < svg focusable = { false } preserveAspectRatio = "xMidYMid meet" > < use xlinkHref = { `#${ name }` } /> < /svg> < /span>); export const Icon = styled ( IconSpan , { display : 'inline-flex' , alignSelf : 'center' , svg : { square : '1em' , } , variants : { display : { inline : { svg : { top : '.125em' , position : 'relative' , } , } , block : { } , } , } , defaultVariants : { display : 'inline' , } , } ) ;