Don't import SVGs as JSX

[hakimLyon]

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

/// 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