MCP para convertir SVGs en fuentes de iconos

mcp-svg-to-fonts es un servidor MCP que convierte una carpeta de SVGs en una fuente de iconos completa (TTF, WOFF, WOFF2 + CSS + tipos TypeScript), y que sabe extender una fuente ya existente sin romper los unicodes que ya usa tu código en producción.

Código completo en GitHub: github.com/omy13/mcp-svg-to-fonts. Instalación sin clonar nada, vía npm: npmjs.com/package/mcp-svg-to-fonts.

Si todavía no tienes claro qué es un MCP o cómo se construye uno desde cero, empieza por Qué es un MCP y Cómo crear un MCP. Este post asume eso y va directo a un caso real, ya publicado, que uso yo mismo.

El problema que resolvía

En nuestro equipo trabajamos son un set de iconos como fuente en vez de añadir esos SVGs sueltos (menos peticiones, <i class="icon-x"> en vez de inline SVG por todas partes). El flujo de trabajo que solíamos hacer era subir esos SVGs que nos preparaba el equipo de diseño a una web que generaba y almacenaba esas fuentes, después descargábamos el zip y lo añadíamos en el proyecto de forma manual. Este proceso siempre se repetía siempre que añadíamos algún nuevo icono.

Hace unos meses la web que utilizamos dejo de funcionar y nunca más volvió, a si que tuvimos que buscar nuevas formas de trabajar. Por aquel entonces acababan de anunciar el concepto MCP y se me ocurrió desarrollar uno para que nuestro agente pudiera generarnos esta fuente partiendo de los SVGs almacenados en el proyecto y así nació este proyecto.

mcp-svg-to-fonts mete ese proceso dentro del propio flujo de trabajo con IA: se lo pides a tu agente, y el MCP genera o extiende la fuente respetando lo que ya existe.

Las 4 tools

El servidor expone 4 tools vía Model Context Protocol:

Las dos primeras son las que esperarías de cualquier generador de fuentes. Las dos últimas son la razón por la que lo construí.

extend-font-advanced

extend-existing-font ya cubre el caso normal: tienes los SVGs originales guardados, añades unos nuevos, y el MCP regenera la fuente manteniendo los unicodes de siempre. Pero hay un caso peor, más común de lo que parece: una fuente de terceros, o una fuente propia de hace tiempo, de la que ya no tienes los SVGs originales — solo el .ttf y su CSS con los mapeos content: '\e001'.

extend-font-advanced resuelve justo eso:

1. Parsea el .ttf con opentype.js y extrae los paths vectoriales de cada glyph

2. Mapea cada glyph a su clase CSS usando los unicodes del archivo CSS existente

3. Convierte esos glyphs extraídos de vuelta a SVGs temporales

4. Los combina con los SVGs nuevos que quieras añadir

5. Genera la fuente final preservando unicodes y métricas originales

El resultado: 100% compatible hacia atrás. Todo el código que ya consume esa fuente sigue funcionando exactamente igual, y los iconos nuevos entran con unicodes nuevos, sin colisión.

Como se instala

Antes había que clonar, instalar con pnpm y compilar. Ahora, al estar en npm, cualquier cliente MCP lo levanta con npx -y mcp-svg-to-fonts.

Cursor — Ajustes → Tools & MCPs → New MCP Server:

Y el bloque de configuración:

{
  "mcpServers": {
    "mcp-svg-to-fonts": {
      "command": "npx",
      "args": ["-y", "mcp-svg-to-fonts"]
    }
  }
}

El mismo bloque funciona en claude_desktop_config.json para Claude Desktop. Con eso activo, el cliente ya reconoce las 4 tools:

Para comprobar que arranca sin ni siquiera tener un cliente MCP a mano:

npx -y mcp-svg-to-fonts

Si se queda esperando en stdio, está listo. Se para con Ctrl+C.

Usándolo en este mismo blog

Para no quedarme en la teoría, lo usé en este blog. Tenía 8 SVGs de SvgRepo sueltos en public/icons/ (badge, broadcast, coffee, collect, gift, monitor, savings, sim-card) y quería una fuente propia en vez de importar cada SVG a mano en Angular.

Con el MCP ya activo, se lo pedí directamente al agente:

"Necesito crearme una nueva Font partiendo de los svg que tenemos en icons, ¿puedes usar el MCP mcp-svg-to-fonts para convertir esos svgs en una fuente e importarlos en el proyecto?"

El agente exploró el proyecto y llamó primero a list-svgs apuntando a public/icons:

Después llamó a generate-font-from-svgs con estos parámetros:

{
  "directory": "/ruta/blog-omar/public/icons",
  "fontName": "BlogIcons",
  "outputDir": "/ruta/blog-omar/public/fonts/blog-icons",
  "cssPrefix": "icon",
  "formats": ["woff2", "woff", "ttf"],
  "generateTypes": true
}

En segundos: BlogIcons.css, BlogIcons.ttf, BlogIcons.woff, BlogIcons.woff2 y los tipos TypeScript con cada nombre de icono ya tipado.

Cero configuración manual de unicodes, cero pegar SVGs uno a uno en un generador online. El mismo problema que quería resolver para el equipo, resuelto en mi propio proyecto.

Y para que no te quedes solo con las capturas: estos son esos mismos 8 SVGs, ya renderizados en esta página como la fuente `BlogIcons` que acabas de ver generarse arriba. No son imágenes, es texto con `font-family: BlogIcons`:

Son iconos genéricos de SvgRepo, no elegidos por lo bien que le quedan a este post — el punto es justo ese: cualquier carpeta de SVGs sirve de ejemplo, la fuente se genera igual.

FAQ

¿Necesito los SVGs originales para añadir iconos a una fuente existente?

Depende de la tool. extend-existing-font sí los necesita. extend-font-advanced no: extrae los glyphs directamente del .ttf, así que sirve incluso para fuentes de terceros o fuentes propias de las que ya no guardas los SVGs.

¿Funciona igual en Claude Desktop que en Cursor?

Sí. Es el mismo bloque de configuración MCP (command: npx, args: ["-y", "mcp-svg-to-fonts"]) en claude_desktop_config.json o en la config de Cursor. Cualquier cliente que hable MCP por stdio lo levanta igual.

¿Por qué no usar directamente un generador de fuentes online?

Un generador online no sabe nada de tu fuente anterior: si regeneras la fuente entera para añadir un icono, puede reasignar unicodes y romper clases CSS que ya están en producción. El MCP resuelve justo ese caso, además de integrarse en el flujo donde ya trabajas con tu agente.

Siguiente paso

• Si aún no tienes claro qué es un MCP: Qué es un MCP

• Para construir uno desde cero, paso a paso: Cómo crear un MCP

Enlaces

• Repo — github.com/omy13/mcp-svg-to-fonts

• Paquete — npmjs.com/package/mcp-svg-to-fonts