mcp-svg-to-fonts

This MCP server, mcp-svg-to-fonts, provides a complete workflow for generating and managing icon fonts from SVG assets. It can scan directories of SVGs, build new fonts in multiple formats (TTF, WOFF, WOFF2), generate CSS and TypeScript type definitions, and extend existing fonts while preserving Unicode mappings. It also supports advanced workflows like extracting glyphs directly from a TTF and augmenting fonts without original SVGs. Use the available tools to inventory, create, or extend icon fonts and then integrate the resulting assets (fonts, CSS, and TypeScript typings) into your frontend projects or AI agent workflows that rely on MCP integration.

To operate, start the server and use the built-in tools via your MCP client. The core capabilities include list-svgs for directory scanning, generate-font-from-svgs for creating a brand-new icon font, extend-existing-font for adding icons to an existing font while preserving compatibility, and extend-font-advanced for font augmentation by glyph extraction from TTFs. These tools come with sensible defaults (e.g., default font name IconFont, default formats woff2/woff/ttf, default CSS prefix icon, and optional TypeScript generation).

Prerequisites:

• Node.js 20.x or later
• pnpm 10.x or later (recommended)

Installation steps:

1. Clone the repository

git clone <repository-url>
cd mcp-svg-to-font

2. Install dependencies

pnpm install

3. Build the project

pnpm build

4. Run in development or production mode

Development:

pnpm dev

Production (after build):

node dist/main.js

Note: Ensure your environment has access to the required fonts and SVG assets, and configure any necessary environment variables in production as needed.

Tips and notes:

• Default behavior generates fonts in multiple formats (woff2, woff, ttf) and a corresponding CSS file with font-face declarations and icon classes. You can customize the font name, output directory, and CSS prefix via the tool parameters.
• When extending fonts, you can either start from original SVGs (extend-existing-font) or extract glyphs directly from the existing TTF using the advanced workflow (extend-font-advanced). Both ensure backward compatibility.
• For production deployments, use the production configuration (node ./dist/main.js). In development, you may run the source-based workflow (tsx or tsx-driven entry) if applicable to your setup.
• If you publish or share fonts publicly, remember to respect any licensing on the original SVG assets and ensure proper attribution in your CSS or README.
• Common issues: missing dependencies, incorrect paths to SVG or font assets, or mismatched default formats. Use list-svgs to verify directories before font generation, and verify that the outputDir is writable.
• Environment variables can be customized in the MCP configuration under env to control runtime behavior (e.g., NODE_ENV, paths, or feature flags).