What Attribute Transformations Happen Under the Hood
When you paste XML or drop an icon into the SVG Nexus JSX/TSX, Vue & Svelte Converter, the compiler sanitizes unnecessary editor namespaces and rewrites hyphenated or namespaced attributes for your chosen framework:
| Raw SVG Attribute | React JSX / TSX Output | Vue 3 / Svelte Handling |
|---|---|---|
| class="icon" | className="icon" | Preserved / merged with caller classes |
| stroke-width / stroke-linecap | strokeWidth / strokeLinecap | Preserved as clean kebab-case SVG |
| clip-path / fill-rule | clipPath / fillRule | Preserved cleanly |
| stop-color / stop-opacity | stopColor / stopOpacity | Preserved cleanly |
| xlink:href="#a" | href="#a" (SVG 2 standard) | href="#a" |
| style="enable-background:..." | Stripped or converted to object | Normalized |
Comparing Output Across React TSX, Vue 3 SFC, and Svelte
import * as React from "react";
export function ShieldCheckIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="1em"
height="1em"
fill="none"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
aria-hidden="true"
focusable="false"
{...props}
>
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10" />
<path d="m9 12 2 2 4-4" />
</svg>
);
}Because there is no "use client" directive or runtime icon context dependency, components generated this way render directly inside Next.js React Server Components with zero client JavaScript bundle overhead. Switching tabs in the converter outputs the equivalent Vue 3 <script setup> component or Svelte {...$$restProps} template.