Saltar al contenido
SvgJsx
Idioma: Español

Convertir SVG en un componente de SolidJS

Crea componentes de iconos para SolidJS a partir de código SVG. El resultado respeta las convenciones de atributos de Solid, tipa las props con JSX.SvgSVGAttributes y mantiene la reactividad.

Ajustes rápidos:
Suelta archivos .svg aquí oLos archivos se leen localmente con FileReader y nunca se suben.
Opciones
Exportación:
import type { JSX } from "solid-js";

const HeartIcon = (props: JSX.SvgSVGAttributes<SVGSVGElement>) => {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" class="icon icon-heart" {...props}>
      <g id="Layer_1" fill="none" stroke="#e11d48" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M19.0001 14.0002c1.4900-1.4600 3.0000-3.2100 3.0000-5.5000A5.5000 5.5000 0 0 0 16.5000 3c-1.7600 0-3.0000.5000-4.5000 2-1.5000-1.5000-2.7400-2-4.5000-2A5.5000 5.5000 0 0 0 2 8.5000c0 2.3000 1.5000 4.0500 3 5.5000l7 7Z" style="fill-opacity:0.15;fill:#e11d48" />
      </g>
    </svg>
  );
};

export default HeartIcon;

Vista previa

Vista previa del SVG convertido
SVG original
706B
SVG optimizado
538B(-24 %)
Componente
656B

En qué se diferencia Solid de React

El JSX de Solid asigna los atributos directamente al DOM, así que atributos SVG como stroke-width y class se mantienen exactamente como aparecen en el archivo. No hace falta renombrarlos a camelCase ni a className como en React.

En Solid las props son getters reactivos, y desestructurarlas rompe la reactividad. Cuando activas la prop size, el convertidor usa splitProps para separar size del resto de props y propaga las demás sobre el <svg>, de modo que todos los valores siguen siendo reactivos.

Tipos de TypeScript generados

Las props se tipan como JSX.SvgSVGAttributes<SVGSVGElement>, importado de solid-js, que cubre todos los atributos SVG y manejadores de eventos. Con la opción size, el tipo se amplía con { size?: number | string }.

Usar el componente en SolidStart

Primeros pasos:

  • Guarda el resultado como IconName.tsx en tu carpeta src/components.
  • Impórtalo y renderiza <IconName size={18} class="icon" />.
  • Usa currentColor para heredar el color del texto que lo rodea.
  • Las refs funcionan mediante la prop ref normal; en Solid no hace falta forwardRef.

Preguntas frecuentes

¿Por qué no se pasan los atributos a camelCase en Solid?

Solid establece los atributos directamente en los elementos del DOM, y en el DOM los atributos SVG distinguen mayúsculas y usan guiones. Mantener los nombres originales es la opción más fiable.

¿Se aplican forwardRef y memo a Solid?

No. Los componentes de Solid se ejecutan una sola vez y reciben las refs como props normales, así que estas opciones específicas de React se ignoran al elegir Solid.

¿El componente sigue siendo reactivo?

Sí. El convertidor nunca desestructura las props: usa splitProps para la prop size y la lee como local.size, así que los cambios se propagan sin volver a crear el elemento.

¿Puedo usar el resultado con Astro?

Sí. Astro admite componentes de Solid mediante la integración @astrojs/solid-js, y el icono se renderiza en el servidor sin enviar JavaScript a menos que lo hidrates.