中文

把 SVG 转换为 SolidJS 组件

从 SVG 代码创建 SolidJS 图标组件。输出遵循 Solid 的属性约定，用 JSX.SvgSVGAttributes 声明 props 类型，并保持响应式。

快速预设:

输出格式

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;

预览

原始 SVG: 706 B
优化后 SVG: 538 B(-24%)
组件: 656 B

Solid 与 React 有什么不同

Solid 的 JSX 会把属性直接映射到 DOM，所以 stroke-width、class 等 SVG 属性会保持文件中的原样，不需要像 React 那样改成驼峰式或 className。

Solid 的 props 是响应式 getter，解构会破坏响应性。开启 size 属性时，转换器会用 splitProps 把 size 与其余 props 分开，再把其余部分展开到 <svg> 上，确保所有值保持响应式。

生成的 TypeScript 类型

props 的类型是从 solid-js 导入的 JSX.SvgSVGAttributes<SVGSVGElement>，覆盖所有 SVG 属性和事件处理器。开启 size 选项后，类型会扩展为再加上 { size?: number | string }。

在 SolidStart 中使用组件

快速上手：

把输出保存为 src/components 目录中的 IconName.tsx。
导入后渲染 <IconName size={18} class="icon" />。
使用 currentColor 让图标继承周围文字的颜色。
ref 通过普通的 ref 属性传递，Solid 中不需要 forwardRef。

常见问题

为什么 Solid 输出不把属性改成驼峰式？

Solid 直接在 DOM 元素上设置属性，而 SVG 属性在 DOM 中区分大小写且使用连字符。保留原始名称是最可靠的输出方式。

forwardRef 和 memo 对 Solid 有效吗？

无效。Solid 组件只运行一次，ref 也作为普通 prop 传递，所以选择 Solid 时会忽略这些 React 专用选项。

组件会保持响应式吗？

会。转换器从不解构 props，size 属性通过 splitProps 处理并以 local.size 读取，因此更新会直接生效，无需重新创建元素。

输出可以在 Astro 中使用吗？

可以。Astro 通过 @astrojs/solid-js 集成支持 Solid 组件，图标会在服务端渲染，除非你主动进行水合，否则不会发送任何 JavaScript。