Skip to content
SvgJsx
Language: English

Convert SVG to a SolidJS Component

Create SolidJS icon components from SVG markup. The output keeps Solid's attribute conventions, types props with JSX.SvgSVGAttributes and stays reactive.

Quick presets:
Drop .svg files here orFiles are read locally with FileReader and are never uploaded.
Options
Export:
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;

Preview

Preview of the converted SVG
Original SVG
706B
Optimized SVG
538B(-24%)
Component
656B

How Solid differs from React

Solid's JSX maps attributes straight to the DOM, so SVG attributes such as stroke-width and class are kept exactly as they appear in the file. There is no need to rename them to camelCase or className as you would in React.

Props in Solid are reactive getters, so destructuring them breaks reactivity. When you enable the size prop, the converter uses splitProps to separate size from the remaining props and spreads the rest onto the <svg>, keeping every value reactive.

Generated TypeScript types

Props are typed as JSX.SvgSVGAttributes<SVGSVGElement> imported from solid-js, which covers every SVG attribute and event handler. With the size option the type is extended with { size?: number | string }.

Using the component in SolidStart

Getting started:

  • Save the output as IconName.tsx in your src/components folder.
  • Import it and render <IconName size={18} class="icon" />.
  • Use currentColor to inherit color from the surrounding text.
  • Refs work through the normal ref prop; forwardRef is not needed in Solid.

Frequently asked questions

Why are attributes not camelCased for Solid?

Solid sets attributes directly on DOM elements, and SVG attributes are case-sensitive and hyphenated in the DOM. Keeping the original names is the most reliable output.

Do forwardRef and memo apply to Solid?

No. Solid components run once and pass refs as regular props, so these React-specific options are ignored when Solid is selected.

Does the component stay reactive?

Yes. The converter never destructures props; it uses splitProps for the size prop and reads it as local.size, so updates propagate without re-creating the element.

Can I use the output with Astro?

Yes. Astro supports Solid components through the @astrojs/solid-js integration, and the icon renders on the server without shipping JavaScript unless you hydrate it.