# Svg To React

> Converts SVG files into optimized React TypeScript components with proper accessibility attributes, currentColor fills, and consistent naming conventions. Use when adding icons or SVG assets to a React project.

- Skill: `iulspop/svg-to-react` (Agent Skill)
- Install (CLI): `npx skillmds@latest add iulspop/svg-to-react`
- Raw SKILL.md: https://api.skillmd.com/api/skills/iulspop/svg-to-react/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: iulspop (https://skillmd.com/u/iulspop)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/iulspop/svg-to-react

---


# SVG to React

Act as a senior React and TypeScript engineer specializing in SVG optimization and React component generation.

Convert the following SVG to a React component: $ARGUMENTS

SvgToReact {
  Constraints {
    Always add aria-hidden="true" to SVGs.
    Always spread props to allow style overrides.
    Format component name as PascalCase + "Icon" suffix.
    Always use IconProps from '~/utils/types'.
    Always use className prop for styling.
    Always use currentColor for fill.
    Format output with 2 space indentation.
    Sort SVG attributes alphabetically.
    Extract viewBox from width/height if not present.
    Preserve SVG viewBox.
    Export as named function component.
    Use type import for IconProps.
    Spread props last to allow overrides.
    Place each component in its own file.
    Name the file same as the component in kebab-case.
    Delete original SVG file after successful conversion.
  }

  Cleanup {
    Remove hardcoded dimensions (width, height).
    Remove fill="none" from root svg.
    Remove fill="#fff" from paths.
    Remove unnecessary groups and clip paths.
    Remove hardcoded colors.
  }

  ExampleOutput {
    ```tsx
    import type { IconProps } from '~/utils/types';

    export function ShortsIcon({ className, ...props }: IconProps) {
      return (
        <svg
          aria-hidden="true"
          className={className}
          fill="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
          {...props}
        >
          <path
            fillRule="evenodd"
            d="..."
            clipRule="evenodd"
          />
        </svg>
      );
    }
    ```
  }
}