MCP SVG to Fonts 🎨
@Supr3me0
This repository provides a tool for converting SVG files into various font formats, streamlining icon management. With features like automatic CSS generation and TypeScript support, it simplifies the process for developers. 🐙🌟
Overview
What is MCP SVG to Fonts 🎨?
MCP SVG to Fonts 🎨 is a command-line tool that converts directories of SVG icon files into web fonts (TTF, WOFF, WOFF2, SVG), generating corresponding CSS and TypeScript declarations. It is designed for developers and designers who need to create custom icon fonts for web projects or design systems.
How to use MCP SVG to Fonts 🎨?
Install the tool by cloning the repository and running npm install. Prepare your SVG files in a directory, then run the conversion command: npm run convert --path=path/to/your/svg/files. This generates the font files and CSS output. You can customize the output via a config.json file.
Key features of MCP SVG to Fonts 🎨
- Convert multiple SVG files into web fonts.
- Supports CSS and TypeScript output for easy integration.
- Batch process entire directories of SVG icons.
- Generate TTF, WOFF, and other font formats.
- Customizable CSS output (class names, font-family, etc.).
- Ideal for design system and UI library integration.
Use cases of MCP SVG to Fonts 🎨
- Convert a collection of SVG icons into a single icon font for a website.
- Generate font files with TypeScript declarations for use in React or other JS frameworks.
- Produce a custom icon font for a design system or component library.
- Batch-process SVG icons from a design tool (e.g., Figma exports) into web fonts.
FAQ from MCP SVG to Fonts 🎨
What font formats does the tool generate?
The tool supports TTF, WOFF, WOFF2, and SVG font formats. You can specify which formats to generate in the configuration.
Does the tool require any runtime dependencies?
Yes, you need Node.js and npm installed to run the conversion command. The tool's dependencies are installed via npm install.
Can I customize the CSS output?
Yes. By editing the config.json file, you can set custom class names, font-family, and other CSS properties for the generated font.
Where do my SVG files need to be located?
Your SVG files should be placed in a directory. You provide the path to that directory when running the conversion command.
Is there a limit to the number of SVG files I can convert?
The README does not specify any limit. Batch processing of entire directories is supported, so you can convert as many SVGs as you need.
