mcpField
S
svg-to-react

svg-to-react

github.com/iulspopDevelopment137 installsUpdated 36w ago
Repository

About svg-to-react

svg-to-react is a set of skill instructions for converting SVGs into React components, aimed at React and TypeScript developers. It specifies naming, prop handling, and SVG cleanup rules, with an example output.

Key features

  1. 01Convert SVGs into React components
  2. 02Set component and file naming conventions
  3. 03Standardize props, colors, and accessibility attributes
  4. 04Remove dimensions, colors, and redundant elements
  5. 05Require named function exports

Use cases

  1. 01Convert supplied SVG artwork into components
  2. 02Standardize icon component formatting in a project
  3. 03Clean SVGs and enable style overrides

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/iulspop/aidd-skills --skill svg-to-react

After installing, type/svg-to-reactin Claude Code to confirm it loaded.

Details

From the project README

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>
  );
}
```

} }

Comments

Markdown supported