Closed hakimLyon closed 9 months ago
Importer les SVG en tant que JSX nuit à la fois aux performances d'exécution (rendu) et à l'utilisation de la mémoire. The "best" way to manage icons in React.js.
Crée un components Icon , qu'on pourrai re-utiliser partout dans le code. un exemple
/// components/ui/icons.tsx export function Icon({ name, size = 'font', className, children, ...props }: SVGProps<SVGSVGElement> & { name: IconName; size?: Size; }) { if (children) { return ( <span className={`inline-flex items-center ${childrenSizeClassName[size]}`} > <Icon name={name} size={size} className={className} {...props} /> {children} </span> ); } return ( <svg {...props} className={cn(sizeClassName[size], 'inline self-center', className)} > <use href={`./icons/sprite.svg#${name}`} /> </svg> ); } ... /// import { Icon } from 'src/components/ui/icon'; <Icon name="arrow-right" />
J'ai proposer un PR #67 de cette implementation
Importer les SVG en tant que JSX nuit à la fois aux performances d'exécution (rendu) et à l'utilisation de la mémoire. The "best" way to manage icons in React.js.
Ma solution
Crée un components Icon , qu'on pourrai re-utiliser partout dans le code. un exemple
J'ai proposer un PR #67 de cette implementation