🧪 vite-plugin-supersvg

Porque mantener tus sprites SVG actualizados manualmente es doloroso.

Este plugin para Vite se encarga de observar cambios en tu carpeta de íconos SVG y regenerar automáticamente sprites organizados por carpetas, de modo que sean fácilmente utilizables en tus proyectos, sin necesidad de Javascript. Directamente con HTML.

🧠 ¿Qué hace este plugin?

• Observa las carpetas en src/icons/
• Genera un archivo .svg con múltiples iconos (sprite svg) por cada carpeta.
• Genera los sprites en public/assets/icons/ con el nombre de la carpeta.
• Vuelve a generar cuando:
  • Se añade un SVG a src/icons/
  • Se modifica un SVG de src/icons/
  • Se elimina un SVG de src/icons/

📦 Instalación

npm install -D @manzdev/vite-plugin-supersvg

⚙️ Configuración

Agrega el plugin en tu vite.config.js o vite.config.ts:

import supersvgPlugin from 'vite-plugin-supersvg';

export default {
  plugins: [
    supersvgPlugin()
  ]
};

Si estás usando Astro, también puedes usarlo, ya que Astro usa Vite:

import { defineConfig } from "astro/config";
import supersvgPlugin from 'vite-plugin-supersvg';

export default defineConfig({
  vite: {
    plugins: [
      supersvgPlugin()
    ]
  }
});

📁 Uso

src/
└── icons/
    ├── social/
    │   ├── twitter.svg
    │   └── github.svg
    └── ui/
        ├── close.svg
        └── menu.svg

Esto generará:

public/
└── assets/
    └── icons/
        ├── social.svg (con twitter y github)
        └── ui.svg (con close y menu)

Cada archivo .svg en public/assets/icons es un sprite listo para usar con:

<svg><use href="/assets/icons/social.svg#twitter" /></svg>

💡 Consejos al usar iconos

• Puedes utilizar icones para buscar y descargar iconos.

• Si usas fill="currentColor" o stroke="currentColor" en tus iconos SVG, luego podrás usar la propiedad color de CSS para dar color a tus iconos SVG.

• Puedes utilizar variables CSS en tus atributos SVG para personalizar desde fuera aspectos como colores, tamaños, etc.

🛠 API

Si lo deseas, puedes personalizar las carpetas o configuración:

import supersvgPlugin from 'vite-plugin-supersvg';

export default {
  plugins: [
    supersvgPlugin({
      srcDir: 'src/svgicons/',        // Carpeta de ficheros SVG
      destDir: 'public/icons/',       // Carpeta de sprites finales
      config: {                       // Configuración de svg-sprite
        shape: {
          spacing: { padding: 2 },
        },
      },
      lazy: true                // Sólo genera cuando ocurren cambios
    })
  ]
};

Puedes ver las opciones que puedes pasar a config en la documentación de svg-sprite.

📡 Dependencias

• svg-sprite: El generador de sprites SVG.
• Node >= 18
• Vite

🧼 Cosas que no hace (todavía)

• No borra los sprites si eliminas una carpeta entera.
• No da abrazos.