STARWARCLOUD STARWAR.AI
返回市场
矢量图形转字体

矢量图形转字体

作者：omy133 星标更新：2025-06-05
安装使用来源：spider==github.com

项目介绍

MCP SVG到字体

一个用于从SVG文件生成和管理图标字体的Model Context Protocol (MCP)服务器。此工具提供了全面的字体生成能力，包括向后兼容性和高级字形提取功能。

✨ 特性

  • 🎨 SVG到字体转换：将SVG图标转换为多种字体格式（TTF、WOFF、WOFF2）
  • 📝 CSS生成：自动生成包含font-face声明和图标类的CSS
  • 🔷 TypeScript支持：生成类型定义以确保类型安全的图标使用
  • 🔄 字体扩展：在保留向后兼容性的前提下，向现有字体添加新图标
  • 🔍 高级字形提取：无需原始SVG文件即可从TTF文件中提取现有字形
  • 📁 目录扫描：列出并分析目录中的SVG文件
  • 🤖 AI集成：完全兼容Model Context Protocol，便于AI代理集成

📋 先决条件

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

🚀 安装

  1. 克隆仓库：
git clone <repository-url>
cd mcp-svg-to-font
  1. 安装依赖：
pnpm install
  1. 构建项目：
pnpm build

🛠️ 开发

开发模式

pnpm dev

使用MCP Inspector进行测试

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 (布尔值，可选)：是否生成TypeScript类型（默认：true）

使用场景：

  • 从零开始创建字体
  • 完整的图标系统设置
  • 从图标库迁移到自定义字体

生成的文件：

  • FontName.ttf，FontName.woff，FontName.woff2
  • 包含font-face和图标类的FontName.css
  • 包含TypeScript定义的FontName.types.ts

3. extend-existing-font

目的：在保留所有现有图标及其Unicode值的情况下，向现有字体添加新图标

参数：

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

使用场景：

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

要求：

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

兼容性： ✅ 100% 向后兼容 - 现有项目无需更改继续工作

4. extend-font-advanced

目的：通过直接从TTF文件中提取原始字形来向现有字体添加新图标，无需原始SVG文件

参数：

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

使用场景：

  • 扩展第三方图标字体
  • 处理无法获得SVG源的遗留字体
  • 对现有字体资产进行逆向工程和增强

高级特性：

  • 字形提取：使用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          # 包含font-face和图标类的CSS
├── IconFont.ttf          # TrueType字体
├── IconFont.woff         # Web Open Font Format
├── IconFont.woff2        # Web Open Font Format 2.0
└── IconFont.types.ts     # TypeScript类型定义

💻 使用示例

基本HTML使用

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="./fonts/IconFont.css" />
  </head>
  <body>
    <i class="icon icon-home"></i>
    <i class="icon icon-user"></i>
    <i class="icon icon-settings"></i>
  </body>
</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';

// 类型安全的图标使用
const iconName: IconName = 'home';
const className = getIconClass(iconName); // 返回 "icon-home"

// 获取所有可用图标
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<IconProps> = ({ name, className = '' }) => {
  return <i className={`icon ${getIconClass(name)} ${className}`} />;
};

// 使用
<Icon name="home" className="text-blue-500" />;

🔄 工作流示例

场景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 {
  3content: '\e002';
}
.icon-settings:before {
  content: '\e003';
}

最佳实践

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

🐛 故障排除

常见问题

“未找到SVG文件”

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

“检测到图标名称冲突”

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

“未找到TTF文件”

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

“无法解析现有字体”

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