main_frontend/.claude/commands/convert-icons.md

Convert Icons

Convert raw SVG icons to React TSX components using SVGR.

Usage

/convert-icons

Instructions

1. Check that raw SVG files exist in src/shared/assets/raw-icons/. If the directory doesn't exist or is empty, inform the user and ask them to place SVG files there first.

2. Run the conversion:

   bun run gicons
   

   This executes:

   npx @svgr/cli --ext tsx --typescript --no-prettier --icon --ref --no-svgo ./src/shared/assets/raw-icons/ --out-dir ./src/shared/ui/Icons/
   

3. Report which icon components were generated in src/shared/ui/Icons/.

4. The generated components can be imported as:

   import { IconName } from "@shared/ui/Icons/IconName"
   

Notes

• Raw SVGs go in: src/shared/assets/raw-icons/
• Generated TSX components output to: src/shared/ui/Icons/
• SVGR flags: TypeScript, icon mode (scales with font-size), forwardRef support, no Prettier formatting, no SVGO optimization
• The primary icon library is lucide-react — custom SVG icons are for icons not available in Lucide