SVG to Astro Skill

Skill de Claude para convertir archivos SVG a componentes Astro con props compatibles con lucide.

Características

• 🎨 Componentes Astro optimizados: Props estándar (class, size, color)
• 📦 Procesamiento por lotes: Convierte carpetas enteras
• 🔤 Naming automático: PascalCase (logo-icon.svg → LogoIcon.astro)
• 📋 Index generado: Re-exports automáticos para imports limpios
• 🧹 SVG limpio: Paths unidos, sin fondos, currentColor

Instalación

1. Descarga svg-to-astro.skill
2. Abre Claude.ai → Settings → Skills
3. Sube el archivo .skill

Ejemplos de Uso

Convertir un SVG:

Convierte logo.svg a componente Astro

Procesar carpeta:

Convierte todos los SVGs en /icons/ a componentes Astro

API del Componente

Los componentes generados siguen el patrón de lucide:

---
interface Props {
  class?: string;         // Clase CSS
  size?: number;          // Default: 24
  color?: string;         // Default: "currentColor"
  strokeWidth?: number;   // Default: 2
}
---

Ejemplo de Uso

---
import { Logo, UserIcon } from './components';
---

<Logo size={32} color="red" class="mi-icono" />
<UserIcon size={48} />

Estructura de Salida

Archivo único:

logo.svg → Logo.astro

Carpeta (batch):

icons/
├── home.svg
├── user-icon.svg
components/
├── Home.astro
├── UserIcon.astro
└── index.astro         # export { default as Home } from './Home.astro';

Naming

SVG	Componente
logo.svg	Logo.astro
user-icon.svg	UserIcon.astro
my_button.svg	MyButton.astro

Requisitos

• Claude Desktop o Claude.ai con Skills habilitadas
• Python 3.x (incluido en la skill)

Licencia

MIT License - Ver archivo LICENSE para detalles

Autor

Creado por Daniel Serrano para Griddo