Converter SVG em componente SolidJS

Converter SVG em um componente SolidJS

Crie componentes de ícone para SolidJS a partir de código SVG. O resultado segue as convenções de atributos do Solid, tipa as props com JSX.SvgSVGAttributes e continua reativo.

Como o Solid difere do React

O JSX do Solid aplica os atributos diretamente no DOM, então atributos SVG como stroke-width e class ficam exatamente como aparecem no arquivo. Não é preciso renomeá-los para camelCase ou className como no React.

No Solid, as props são getters reativos, e desestruturá-las quebra a reatividade. Quando você ativa a prop size, o conversor usa splitProps para separar size das demais props e repassa o restante ao <svg>, mantendo todos os valores reativos.

Tipos TypeScript gerados

As props são tipadas como JSX.SvgSVGAttributes<SVGSVGElement>, importado de solid-js, que cobre todos os atributos SVG e manipuladores de evento. Com a opção size, o tipo é estendido com { size?: number | string }.

Usando o componente no SolidStart

Primeiros passos:

Salve o resultado como IconName.tsx na sua pasta src/components.
Importe e renderize <IconName size={18} class="icon" />.
Use currentColor para herdar a cor do texto ao redor.
Refs funcionam pela prop ref comum; no Solid não é preciso forwardRef.

Perguntas frequentes

Por que os atributos não viram camelCase no Solid?

O Solid define os atributos diretamente nos elementos do DOM, e no DOM os atributos SVG diferenciam maiúsculas e usam hífens. Manter os nomes originais é a saída mais confiável.

forwardRef e memo se aplicam ao Solid?

Não. Componentes Solid executam uma única vez e recebem refs como props comuns, então essas opções específicas do React são ignoradas quando Solid está selecionado.

O componente continua reativo?

Sim. O conversor nunca desestrutura as props: usa splitProps para a prop size e a lê como local.size, então as atualizações se propagam sem recriar o elemento.

Posso usar o resultado com Astro?

Sim. O Astro suporta componentes Solid pela integração @astrojs/solid-js, e o ícone é renderizado no servidor sem enviar JavaScript, a menos que você o hidrate.