elements for screen readers. 4. Export an index.ts barrel file for clean, modular named icon imports. ## Verification Checklist - Run local linting, syntax validation, and type-checks before reporting completion. - Ensure all created or modified files adhere to workspace boundaries and avoid uncommitted secrets. - Verify tests or build commands exit cleanly with return code 0.

---
name: "svgr-svg-to-react-component"
description: "Transform raw SVG vector files into accessible, type-safe React/Next.js components."
metadata:
  author: "Greg Bergé"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "convert svg to react component svgr"
  - "replace fill with currentcolor svgr"
  - "generate typescript icon components"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# SVGR Automated SVG to React Component Converter

Converts SVG files into production React components using @svgr/core and @svgr/cli: stripping hardcoded width/height, replacing fill with currentColor, and generating TypeScript types.

## When to Invoke
Invoke this skill whenever you need to:
- convert svg to react component svgr
- replace fill with currentcolor svgr
- generate typescript icon components

## Execution SOP & Rules
1. Configure .svgrrc.json with { icon: true, typescript: true, replaceAttrValues: { '#000': 'currentColor' } }.
2. Run npx @svgr/cli -d src/components/icons src/assets/svg to batch process icon folders.
3. Include titleProp: true to support accessible SVG <title> elements for screen readers.
4. Export an index.ts barrel file for clean, modular named icon imports.

## Verification Checklist
- Run local linting, syntax validation, and type-checks before reporting completion.
- Ensure all created or modified files adhere to workspace boundaries and avoid uncommitted secrets.
- Verify tests or build commands exit cleanly with return code 0.