SVG to Code

使い方

1. 出力モードを選択: HTML、JSX (React)、または Vue Template。
2. SVG マークアップを入力フィールドに貼り付けます。
3. 出力ボックスで変換されたコードを読みます。JSX モードは class を className にリネームし、ケバブケース属性を camelCase に変換します。
4. コピー ボタンで出力をコピーします。
5. グラフィックが正しく見えることを確認するために下のライブ SVG プレビューを確認します。

例

• SVG (class="icon" と stroke-width="2" を含む) を JSX モードに貼り付けると、className="icon" と strokeWidth="2" が出力されます。
• 同じ入力を Vue Template モードに切り替えると、class= が :class= に置き換わり、他のすべての属性は変更されません。