SVG to React Icon - VS Code Extension

Transform SVG code into production-ready React icon components instantly!

Convert raw SVG code from Figma, design tools, or any source into clean, reusable React components with TypeScript support, automatic color detection, dynamic sizing, and full SVG props support.

✨ Features

🚀 Four Conversion Methods

⚡ Clipboard Shortcut - Ctrl+Alt+V (Fastest!)
- No need to paste SVG into editor first
- Direct clipboard to component conversion
🖱️ Right-Click Context Menu
- Select SVG → Right-click → Convert
⌨️ Keyboard Shortcut - Ctrl+Shift+I
- Quick conversion for power users
🎯 Command Palette
- Ctrl+Shift+P → "Convert SVG to React Icon"

⚡ Automatic Transformations

✅ JSX-Safe Attributes - Converts fill-rule → fillRule, clip-rule → clipRule, etc.
✅ Dynamic Sizing - Calculates Tailwind classes from actual SVG dimensions (16px → w-4 h-4)
✅ Color Detection - Extracts fill/stroke colors and adds Tailwind classes (text-white, text-[#color])
✅ Smart Sanitization - Handles trailing semicolons (<svg></svg>;)
✅ Stroke Support - Detects stroke-based icons (Heroicons, Feather Icons, etc.)
✅ TypeScript Support - Optional props interface with full SVG props typing
✅ Export Styles - Choose between named (export const) or default (export default function)
✅ Rest Props - Pass any SVG attribute (onClick, aria-label, data-*, etc.) ⭐ NEW!
✅ Theme-Friendly - Converts colors to currentColor for easy theming

📦 Installation

From VSIX:
- Download svg-to-react-icon-1.1.1.vsix
- In VS Code: Extensions → ... → Install from VSIX
From Marketplace: (Coming soon)
- Search "SVG to React Icon"
- Click Install

🚀 Quick Start

Method 1: Clipboard Conversion (Recommended)

Copy SVG from Figma/Design Tool
Press Ctrl+Alt+V (or Cmd+Alt+V on Mac)
Input box appears with your SVG
Edit if needed, press Enter
Enter component name (e.g., HomeIcon)
Choose TypeScript interface (if .tsx file)
Choose export style
Done! Component inserted at cursor ✓

Method 2: Selection-Based Conversion

Paste SVG into your editor
Select the entire SVG code
Press Ctrl+Shift+I (or right-click → "Convert SVG to React Icon")
Enter component name
Choose options
Done! SVG replaced with component ✓

📖 Examples

Example 1: Basic Icon (No TypeScript)

Input SVG:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path fill="white" d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z"/>
</svg>

Generated Component:

export const ShieldIcon = ({ className, ...props }) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={cn("w-6 h-6 text-white", className)}
      viewBox="0 0 24 24"
      fill="none"
      {...props}
    >
      <path
        fill="currentColor"
        d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z"
      />
    </svg>
  );
};

Example 2: TypeScript with Full SVG Props Support ⭐

Input SVG:

<svg width="32" height="32" viewBox="0 0 32 32" fill="none">
  <circle cx="16" cy="16" r="14" stroke="#3b82f6" stroke-width="2"/>
</svg>

Generated Component:

interface IconProps extends React.SVGProps<SVGSVGElement> {
  className?: string;
}

export const CircleIcon = ({ className, ...props }: IconProps) => {
  return (
    <svg
      className={cn("w-8 h-8 text-[#3b82f6]", className)}
      viewBox="0 0 32 32"
      fill="none"
      {...props}
    >
      <circle cx="16" cy="16" r="14" stroke="currentColor" strokeWidth="2" />
    </svg>
  );
};

Usage with Props:

<CircleIcon
  className="w-12 h-12 text-blue-500"
  onClick={() => console.log("clicked")}
  aria-label="Circle indicator"
  data-testid="circle-icon"
/>

Example 3: Default Export

Generated Component:

interface IconProps extends React.SVGProps<SVGSVGElement> {
  className?: string;
}

export default function MenuIcon({ className, ...props }: IconProps) {
  return (
    <svg
      className={cn("w-6 h-6 text-white", className)}
      viewBox="0 0 24 24"
      {...props}
    >
      <path stroke="currentColor" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
    </svg>
  );
}

⚙️ Features in Detail

🎨 Color Detection

Automatically detects and converts colors to Tailwind classes:

Original Color	Tailwind Class
`fill="white"`	`text-white`
`stroke="black"`	`text-black`
`fill="#ff5733"`	`text-[#ff5733]`
`stroke="rgb(59, 130, 246)"`	`text-[rgb(59,130,246)]`

Priority: Stroke colors are checked first (for outline icons), then fill colors.

📏 Dynamic Sizing

Calculates Tailwind size classes from actual SVG dimensions:

SVG Dimensions	Calculation	Output
`width="16" height="16"`	16÷4 = 4	`w-4 h-4`
`width="24" height="24"`	24÷4 = 6	`w-6 h-6`
`width="20" height="24"`	Different sizes	`w-5 h-6`
`width="18" height="18"`	18÷4 = 4.5	`w-4.5 h-4.5`

Formula: Tailwind units = Pixels ÷ 4 (since 1 unit = 0.25rem = 4px)

🔷 TypeScript Support with Full SVG Props ⭐

For .tsx files, the extension generates a comprehensive interface:

interface IconProps extends React.SVGProps<SVGSVGElement> {
  className?: string;
}

Benefits:

✅ Full TypeScript autocomplete for ALL SVG attributes
✅ Type-safe event handlers (onClick, onMouseEnter, etc.)
✅ IntelliSense for aria-, data-, and all SVG props
✅ No manual prop typing needed

Smart Detection:

✅ .tsx files → Asks user
✅ .jsx files → Skips automatically
✅ Checks for existing IconProps → Won't duplicate

📤 Export Styles

Choose your preferred export format:

Named Export (Recommended):

export const Icon = ({ className, ...props }) => { ... }

Best for component libraries
Tree-shaking friendly
Modern React conventions

Default Export:

export default function Icon({ className, ...props }) { ... }

One component per file
Traditional approach
Page-level components

⭐ Rest Props Support (NEW!)

All generated components include ...props spread:

export const Icon = ({ className, ...props }) => {
  return (
    <svg className={cn("...", className)} {...props}>
      ...
    </svg>
  );
};

Pass ANY SVG attribute:

<Icon
  onClick={() => {}}
  onMouseEnter={() => {}}
  id="my-icon"
  aria-label="Description"
  data-testid="test-icon"
  opacity={0.5}
  style={{ filter: "blur(2px)" }}
/>

🛠️ Supported SVG Patterns

✅ Fully Supported

Fill-based icons (Material Icons, Font Awesome)
Stroke-based icons (Heroicons, Feather Icons, Line Awesome)
Mixed fill and stroke
Single and multi-path SVGs
Circles, rects, polygons, paths
ViewBox with or without dimensions
Inline styles → Converted to JSX
Both single and double quotes in attributes

📋 Attribute Transformations

All kebab-case SVG attributes are automatically converted:

SVG Attribute	JSX Attribute
`fill-rule`	`fillRule`
`clip-rule`	`clipRule`
`stroke-width`	`strokeWidth`
`stroke-linecap`	`strokeLinecap`
`stroke-linejoin`	`strokeLinejoin`
`viewBox`	`viewBox` (preserved)
`xmlns`	`xmlns` (preserved)

⌨️ Keyboard Shortcuts

Shortcut	Command	Description
`Ctrl+Alt+V`	Convert from Clipboard	Fastest! Paste SVG → Component
`Ctrl+Shift+I`	Convert Selection	Transform selected SVG
`Ctrl+Shift+P`	Command Palette	Access all commands

Mac Users: Replace Ctrl with Cmd

🎯 Use Cases

Perfect For:

📱 React/Next.js applications
🎨 Design systems and component libraries
🖼️ Figma to code workflows
⚡ Rapid prototyping
🔧 Icon management
📚 Tailwind CSS projects

Works With:

React
Next.js
Remix
Gatsby
Create React App
Vite
Any React-based framework

🧪 Requirements

VS Code 1.75.0 or higher
Basic understanding of React/JSX
(Optional) Tailwind CSS for size/color classes
(Optional) cn() utility for className merging

cn() Utility

The generated components use cn() utility (from shadcn/ui):

import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs) {
  return twMerge(clsx(inputs));
}

Or use your preferred className utility!

📝 Tips & Tricks

Tip 1: Bulk Icons

Use clipboard method for converting multiple icons quickly - faster than selecting each time!

Tip 2: Custom Colors

Override generated color by passing className:

<HomeIcon className="text-blue-500" /> {/* Overrides text-white */}

Tip 3: Custom Sizes

Override size the same way:

<HomeIcon className="w-12 h-12" /> {/* Overrides w-6 h-6 */}

Tip 4: Event Handlers

Pass any event handler with rest props:

<HomeIcon onClick={handleClick} onMouseEnter={handleHover} />

Tip 5: Accessibility

Add aria attributes easily:

<HomeIcon aria-label="Go to home" role="button" />

Tip 6: Clean Figma Exports

In Figma: Right-click → Copy as SVG for cleanest code

🐛 Troubleshooting

"Selected text does not appear to be valid SVG"

Ensure you've selected the complete <svg>...</svg> element
Check for trailing characters (the extension auto-cleans semicolons)

"Component name must start with uppercase"

React components must start with uppercase: Icon ✅, icon ❌

Duplicate IconProps interface

This is now automatically prevented! The extension checks before adding.

Colors not detected

Ensure SVG has fill or stroke attributes
fill="none" is ignored (as it should be)

📄 License

MIT License - see LICENSE file

🤝 Contributing

Contributions welcome! Feel free to:

Report bugs
Suggest features
Submit pull requests

Repository: github.com/arafat22184/svg_to-_react_icon

🙏 Credits

Created with ❤️ by Md Abdullah All Arafat

Built for React developers who love clean code and efficient workflows.

⭐ Show Your Support

If this extension helps your workflow, please:

⭐ Star the repository
📝 Leave a review
🐦 Share with others

Happy coding! 🚀

SVG to React Icon

Md Abdulla All Arafat

SVG to React Icon - VS Code Extension

✨ Features

🚀 Four Conversion Methods

⚡ Automatic Transformations

📦 Installation

🚀 Quick Start

Method 1: Clipboard Conversion (Recommended)

Method 2: Selection-Based Conversion

📖 Examples

Example 1: Basic Icon (No TypeScript)

Example 2: TypeScript with Full SVG Props Support ⭐

Example 3: Default Export

⚙️ Features in Detail

🎨 Color Detection

📏 Dynamic Sizing

🔷 TypeScript Support with Full SVG Props ⭐

📤 Export Styles

⭐ Rest Props Support (NEW!)

🛠️ Supported SVG Patterns

✅ Fully Supported

📋 Attribute Transformations

⌨️ Keyboard Shortcuts

🎯 Use Cases

Perfect For:

Works With:

🧪 Requirements

cn() Utility

📝 Tips & Tricks

Tip 1: Bulk Icons

Tip 2: Custom Colors

Tip 3: Custom Sizes

Tip 4: Event Handlers

Tip 5: Accessibility

Tip 6: Clean Figma Exports

🐛 Troubleshooting

"Selected text does not appear to be valid SVG"

"Component name must start with uppercase"

Duplicate IconProps interface

Colors not detected

📄 License

🤝 Contributing

🙏 Credits

⭐ Show Your Support