MCP Svg To Fonts

MCP SVG到字体

用于从SVG文件生成和管理图标字体的模型上下文协议（MCP）服务器。该工具提供了全面的字体生成功能，具有向后兼容性和高级字形提取功能。

✨ 特性

• 🎨 SVG到字体转换：将SVG图标转换为多种字体格式（TTF、WOFF、WOFF2）
• 📝 CSS生成：使用字体-字体声明和图标类自动生成CSS
• 🔷 TypeScript支持：生成类型安全图标使用的类型定义
• 🔄 字体扩展：向现有字体添加新图标，同时保持向后兼容性
• 🔍 高级Glyph提取：从TTF文件中提取现有字形，而不需要原始SVG
• 📁 目录扫描：列出并分析目录中的SVG文件
• 🤖 人工智能集成：AI代理集成的完全模型上下文协议兼容性

📋 先决条件

• Node.js：20.x或更高版本
• pnpm：10.x或更高版本（推荐）

🚀 安装

1. 克隆存储库：

git clone 
cd mcp-svg-to-font

1. 安装依赖项：

pnpm install

1. 构建项目：

pnpm build

🛠️ 发展

开发模式

pnpm dev

MCP检验员测试

npx @modelcontextprotocol/inspector npx tsx src/main.ts

为生产而建

pnpm build

🔧 MCP配置

将此配置添加到您的MCP客户端（例如，Claude Desktop）：

{
  "mcpServers": {
    "svg-to-font": {
      "command": "npx",
      "args": ["tsx", "src/main.ts"]
    }
  }
}

生产（编译版）：

{
  "mcpServers": {
    "svg-to-font": {
      "command": "node",
      "args": ["./dist/main.js"]
    }
  }
}

🛠️ 可用工具

1. list-svgs

目的：扫描并列出目录中的所有SVG文件

参数:

• directory （字符串，必填）：扫描SVG文件的目录路径

用例:

• 在字体生成之前清点可用图标
• 验证SVG文件结构和命名
• 批量加工前的质量保证

示例:

{
  "directory": "./icons"
}

2. generate-font-from-svgs

目的：从SVG文件集合中创建一个全新的图标字体

参数:

• directory （字符串，必填）：包含SVG文件的目录
• fontName （字符串，可选）：字体系列名称（默认：“IconFont”）
• outputDir （字符串，可选）：输出目录（默认：“./fonts”）
• formats （数组，可选）：要生成的字体格式（默认：\[“woff2”，“woff”，“ttf”\]）
• cssPrefix （字符串，可选）：CSS类前缀（默认：“icon”）
• generateTypes （boolean，可选）：生成TypeScript类型（默认值：true）

用例:

• 从头开始创建初始字体
• 完成图标系统设置
• 从图标库迁移到自定义字体

生成的文件:

• FontName.ttf, FontName.woff, FontName.woff2
• FontName.css 带有字体和图标类
• FontName.types.ts 使用TypeScript定义

3. extend-existing-font

目的：向现有字体添加新图标，同时保留所有现有图标及其Unicode值

参数:

• existingFontDir （string，必填）：包含现有字体文件（.css和字体文件）的目录
• originalSvgDirectory （string，必填）：包含用于创建现有字体的原始SVG文件的目录
• newSvgDirectory （string，必填）：要添加新SVG文件的目录
• fontName （字符串，可选）：字体名称（如果未提供，则自动检测）
• outputDir （字符串，可选）：输出目录（默认：与现有字体相同）
• cssPrefix （字符串，可选）：CSS类前缀（如果未提供，则自动检测）
• generateTypes （boolean，可选）：生成TypeScript类型（默认值：true）

用例:

• 在已建立的图标系统中添加新图标
• 保持与现有应用程序的向后兼容性
• 增量图标库扩展

需求:

• 访问现有字体中使用的原始SVG文件
• 用于Unicode映射检测的现有CSS文件

兼容性: ✅ 100%向后兼容 -现有项目继续工作，没有变化

4. extend-font-advanced

目的：通过直接从TTF文件中提取原始字形，将新图标添加到现有字体中，而不需要原始SVG文件

参数:

• existingFontDir （string，必填）：包含现有字体文件（.css和.ttf文件）的目录
• newSvgDirectory （string，必填）：包含要添加的新SVG文件的目录
• fontName （字符串，可选）：字体名称（从文件中自动检测）
• outputDir （字符串，可选）：输出目录（默认：与现有字体相同）
• cssPrefix （字符串，可选）：CSS类前缀（从CSS自动检测）
• generateTypes （boolean，可选）：生成TypeScript类型（默认值：true）
• preserveMetrics （布尔值，可选）：保留原始字体度量（默认值：true）

用例:

• 扩展第三方图标字体
• 在SVG源不可用的情况下使用传统字体
• 逆向工程和增强现有字体资产

高级功能:

• Glyph提取：使用OpenType.js从TTF文件中提取向量路径
• Unicode保留：保留所有原始Unicode映射
• 字体度量保存：保持原始字体大小和间距
• CSS集成：使用CSS类名映射提取的字形

需求:

• 原始TTF字体文件
• 带有Unicode映射的CSS文件（用于字形名称检测）
• 格式：CSS类，如 .icon-name:before { content: "\\e001"; }

工艺流程:

1. 解析TTF文件以提取字形矢量数据
2. 将字形Unicode值映射到CSS类名
3. 将提取的字形转换回临时SVG文件
4. 将提取的字形与新的SVG文件组合
5. 使用保留的Unicode值生成新字体

兼容性: ✅ 100%向后兼容 -所有原始图标都保持其Unicode值

📁 生成的字体结构

字体生成后，您将得到：

fonts/
├── IconFont.css          # CSS with font-face and icon classes
├── IconFont.ttf          # TrueType font
├── IconFont.woff         # Web Open Font Format
├── IconFont.woff2        # Web Open Font Format 2.0
└── IconFont.types.ts     # TypeScript type definitions

💻 使用示例

基本HTML用法

CSS样式

.icon {
  font-family: 'IconFont';
  font-size: 24px;
  color: #333;
}

.icon-home:before {
  content: '\e001';
}

TypeScript集成

import { IconName, getIconClass, ICON_NAMES } from './fonts/IconFont.types';

// Type-safe icon usage
const iconName: IconName = 'home';
const className = getIconClass(iconName); // Returns "icon-home"

// Get all available icons
const allIcons = ICON_NAMES; // ['home', 'user', 'settings', ...]

React组件示例

import { IconName, getIconClass } from './fonts/IconFont.types';

interface IconProps {
  name: IconName;
  className?: string;
}

const Icon: React.FC = ({ name, className = '' }) => {
  return ;
};

// Usage
;

🔄 工作流示例

场景1：创建新的图标系统

1. 在目录中准备SVG图标
2. 使用 list-svgs 验证文件
3. 使用 generate-font-from-svgs 创建字体
4. 将生成的CSS和字体集成到您的项目中

场景2：向现有字体添加图标

1. 将新的SVG文件放置在目录中
2. 使用 extend-existing-font 使用原始SVG
3. 用新字体文件替换旧字体文件
4. 现有代码继续工作+可用的新图标

场景3：扩展第三方字体

1. 从第三方字体获取TTF文件和CSS
2. 创建新的SVG图标
3. 使用 extend-font-advanced 将它们合并
4. 获取包含原始和新图标的新字体

⚠️ 重要提示

字体扩展要求

• 对于 extend-existing-font：需要原始SVG文件
• 对于 extend-font-advanced：需要TTF文件和带有Unicode映射的CSS

高级扩展的CSS格式

您的CSS文件必须包含以下格式的Unicode映射：

.icon-home:before {
  content: '\e001';
}
.icon-user:before {
  content: '\e002';
}
.icon-settings:before {
  content: '\e003';
}

最佳实践

• 使用一致的SVG尺寸（最好是正方形）
• 在字体生成之前优化SVG
• 跨不同浏览器测试字体
• 保留原始SVG文件的备份
• 使用语义图标名称

🐛 故障排除

常见问题

“未找到SVG文件”

• 验证目录路径
• 确保SVG文件具有 .svg 扩展
• 检查文件权限

“检测到图标名称冲突”

• 重命名冲突的SVG文件
• 避免图标名称重复

“未找到TTF文件”

• 确保TTF文件存在于指定目录中
• 检查文件扩展名（.ttf）

“无法解析现有字体”

• 验证CSS文件格式
• 确保存在Unicode映射