React & TypeScript

SVG to JSX / TSX Converter

Paste raw SVG markup or upload a .svg file and get back a clean, typed React component - with optional currentColor theming, className sizing, and TSX / JSX output.

Resolved: SvgIcon

Load sample:

SVG input

Live preview

No SVG to preview

Generated TSX

import * as React from 'react';

export interface SvgIconProps extends React.SVGProps<SVGSVGElement> {
  // Add custom props here
}

const SvgIcon: React.FC<SvgIconProps> = ({ ...props }: SvgIconProps) => {
  return (
    <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill="currentColor"
    stroke="currentColor"
    strokeWidth="1.5"
    strokeLinejoin="round"
    className="w-6 h-6"
  >    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
  </svg>
  );
};

export { SvgIcon };
Advertisement

How to use

  1. 1Paste your raw SVG markup into the input box on the left, or click "Upload .svg" to load a file from disk. Try the sample buttons (Star, Heart, Arrow, Code) to see the converter in action.
  2. 2Configure the conversion: pick TypeScript (TSX) or JavaScript (JSX), rename the component, and decide whether to replace fill / stroke with currentColor and whether to drop width / height in favor of Tailwind sizing utilities.
  3. 3Inspect the live preview and the generated code in the right pane. The component spreads {...props} so callers can pass className, onClick, aria-* and more.
  4. 4Copy the result with the Copy button, or download a ready-to-paste .{tsx,jsx} file with the Download button.

Frequently asked questions

Why use currentColor instead of hard-coded fill / stroke?
currentColor resolves to the inherited CSS color at render time, which means you can theme the same icon by setting color on a parent element (for example, text-blue-500 in Tailwind). This is the canonical pattern for icon libraries like Heroicons, Lucide, and Phosphor - the icon becomes a single component that adapts to any color context, hover state, or dark-mode variant without a separate "outline" build.
When should I keep the width and height attributes?
Keep the explicit width and height if you are exporting a non-icon asset such as a logo, illustration, or hero graphic where the rendered pixel size is part of the design. For interface icons, removing the attributes (and adding className="w-6 h-6" by default) lets you size the same component freely with Tailwind utilities or a parent container, which is the more flexible default for design systems.
How does this compare to SVGR?
SVGR is a build-time transformer that converts .svg imports into React components inside webpack, Vite, or Next.js. The configuration lives in your bundler and runs every time you save a file. This tool is the run-time, in-browser equivalent: it produces the exact same shape of TSX output, but it works on raw pasted markup with no project setup, no plugin chain, and no rebuild step. Use SVGR when you have a large icon library you want to import as a normal component, and use this converter when you need to clean up a single SVG, share a snippet, or understand what your icon will compile into.
Are there accessibility considerations?
Yes. Decorative icons that sit next to visible text should be marked aria-hidden="true" so screen readers do not announce them twice. Functional icons (the only label for a button) need role="img" and a descriptive aria-label, or they should be wrapped in a button that has its own accessible name. The generated component spreads {...props} so you can pass these attributes from the call site: <Star aria-hidden="true" /> for decoration, or <Star role="img" aria-label="Favorite" /> for a standalone icon.
Will the converter preserve all SVG features?
It handles the common attribute renames (stroke-width → strokeWidth, clip-path → clipPath, xmlns:xlink → xmlnsXlink, and the rest of the React/JSX camelCase set), nested children, self-closing tags, viewBox, defs, and basic text content. It does not attempt to convert inline <style> blocks into JSX style objects, optimize paths, or run SVGO-level minification - those are separate concerns better handled by SVGO before you paste the input.
Can I use the generated code in a Next.js or Vite project?
Yes. The output is plain TypeScript or JavaScript with no dependencies beyond React itself. Drop the file into a components/ folder, import it, and use it. For Next.js specifically, putting the .tsx file under app/, components/, or any client-component directory works out of the box; the generated interface extends React.SVGProps<SVGSVGElement> so all standard SVG props are available with full type safety.

The Senior Full-Stack Production Kit (2026)

Checklists, Docker recipes, and SSR error fixes in one dense PDF.

Get Free Kit

Related articles

ToolsTagsRSSPrivacy PolicyTerms