Tool Hub

SVG to Code

将 SVG 标记转换为 HTML / JSX / Vue SFC 代码

粘贴 SVG 标记并将其转换为干净的 HTML、JSX 或 Vue 代码。自动处理属性转换 (例: JSX 的 class → className)。

使用方法

  1. 选择输出模式：HTML、JSX (React) 或 Vue 模板。
  2. 将 SVG 标记粘贴到输入字段。
  3. 在输出框中读取转换后的代码，其中 JSX 模式将 class 重命名为 className 并将 kebab-case 属性转换为 camelCase。
  4. 使用复制按钮复制输出。
  5. 验证输出下方的实时 SVG 预览以确认图形看起来正确。

示例

  • 粘贴带有 class="icon" 和 stroke-width="2" 的 SVG，在 JSX 模式中输出 className="icon" 和 strokeWidth="2"。
  • 将相同输入切换到 Vue 模板模式会将 class= 替换为 :class=，同时保持所有其他属性不变。

生产环境使用前请验证输出。无担保 — 参见 条款.