Daniil
37 lines
1.1 KiB
Markdown
37 lines
1.1 KiB
Markdown
# 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:
|
|
```bash
|
|
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:
|
|
```tsx
|
|
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
|