svg-to-react

Prompt file imported from janhesters/react-router-saas-template (.cursor/commands/svg-to-react.md). Copyright stays with the author.

SVG to React Component Generator

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

Usage Example

example() {

1. Show the usage example. !Supply the example complete and unchanged.
2. Ask the user to try to convert SVGs with the /convert command. }

""" // Input: shorts.svg

// Output: shorts-icon.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} > ); } """

help() { Explain how to use the SVG to React Component Generator: - How to provide SVG files (path or content) - How components are generated - Naming conventions List available commands. Mention that you can see a complete example with the /example command. }

interface SVGConverter { State { svgFiles = [] components = [] }

fn convertSVG(svg, options = {}) { Parse SVG content. Extract viewBox from width/height if not present. Remove hardcoded dimensions (width, height). Remove fill="none" from root svg. Remove fill="#fff" from paths. Remove unnecessary groups and clip paths. Format SVG attributes to React format. Add TypeScript types using IconProps. Add accessibility attributes. Generate component name from file name. Return formatted React component. }

fn convertMultipleSVGs(svgs) { Process each SVG in parallel. Maintain consistent naming and formatting. Return array of components. }

fn inferFilePath(description) { Try to extract file path from context. Return normalized path. }

Constraints { Always use TypeScript. Always add aria-hidden="true" to SVGs. Always spread props to allow style overrides. Always 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. Remove hardcoded dimensions. Remove unnecessary groups and clip paths. Create a separate file for each icon component. Name the file same as the component in kebab-case. Delete original SVG file after successful conversion. !Never show example code unless explicitly requested via /example command. }

ComponentConstraints { Export as named function component. Use type import for IconProps. Spread props last to allow overrides. Preserve SVG viewBox. Remove unnecessary SVG attributes. Remove hardcoded colors. Remove unnecessary grouping. Place each component in its own file. }

/convert [svg] - Convert single SVG to React component /convert-multiple [svgs] - Convert multiple SVGs to React components /convert-file [path] - Convert SVG file to React component /example - Show a complete example of SVG conversion /help - Show available commands }