MCP SVG to Font

MCP SVG to Font

SVG ファイルからアイコンフォントを生成・管理するための Model Context Protocol（MCP）サーバーです。後方互換性を保ちながら、高度なグリフ抽出機能を備えた包括的なフォント生成機能を提供します。

✨ 特長

• 🎨 SVG からフォントへの変換：SVG アイコンを複数のフォント形式（TTF、WOFF、WOFF2）に変換します
• 📝 CSS 生成：font-face 宣言とアイコンクラスを含む CSS を自動生成します
• 🔷 TypeScript サポート：型安全なアイコンの使用を可能にする型定義を生成します
• 🔄 フォントの拡張：後方互換性を保ちながら既存のフォントに新しいアイコンを追加します
• 🔍 高度なグリフ抽出：元の SVG がなくても TTF ファイルから既存のグリフを抽出します
• 📁 ディレクトリのスキャン：ディレクトリ内の SVG ファイルを一覧表示して分析します
• 🤖 AI 連携：AI エージェントとの連携に対応する Model Context Protocol 互換性を備えています

📋 前提条件

• Node.js：20.x 以降

🚀 クイックスタート（npm）

この MCP サーバーを使う最も簡単な方法は、npm を利用することです。クローンやビルドは不要です。

1. MCP クライアントに追加する

Cursor — .cursor/mcp.json またはグローバル MCP 設定に追加します。

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

Claude Desktop — claude_desktop_config.json に追加します。

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

2. 動作を確認する

npx -y mcp-svg-to-fonts

サーバーが起動し、stdio で待機します。これは準備が完了したことを意味します。Ctrl+C で停止してください。

3. プロジェクトで使用する

SVG アイコンが格納されたフォルダーを MCP ツールに指定します。たとえば、AI アシスタントに次のように依頼します。

「./src/assets/icons 内の SVG からアイコンフォントを生成して、./fonts に出力してください」

このサーバーは、list-svgs、generate-font-from-svgs、extend-existing-font、extend-font-advanced の 4 つのツールを公開します。

🛠️ 開発

コントリビューションやローカル開発には pnpm 10.x が必要です。

クローンとビルド

git clone https://github.com/omy13/mcp-svg-to-fonts.git
cd mcp-svg-to-fonts
pnpm install
pnpm build

開発モード

pnpm dev

MCP Inspector でのテスト

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

ローカル MCP 設定（npm を使わない場合）

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

または、コンパイル済みのビルドを使用します。

{
  "mcpServers": {
    "mcp-svg-to-fonts": {
      "command": "node",
      "args": ["./dist/main.js"],
      "cwd": "/path/to/mcp-svg-to-fonts"
    }
  }
}

🛠️ 利用可能なツール

1. list-svgs

目的：ディレクトリ内のすべての SVG ファイルをスキャンして一覧表示します

パラメーター：

• directory（string、必須）：SVG ファイルを検索するディレクトリのパス

使用例：

• フォント生成前に利用可能なアイコンを把握する
• SVG ファイルの構成と命名を確認する
• 一括処理前に品質を確認する

例：

{
  "directory": "./icons"
}

2. generate-font-from-svgs

目的：SVG ファイルのコレクションから新しいアイコンフォントを作成します

パラメーター：

• directory（string、必須）：SVG ファイルが格納されたディレクトリ
• fontName（string、任意）：フォントファミリー名（デフォルト："IconFont"）
• outputDir（string、任意）：出力ディレクトリ（デフォルト："./fonts"）
• formats（array、任意）：生成するフォント形式（デフォルト：["woff2", "woff", "ttf"]）
• cssPrefix（string、任意）：CSS クラスの接頭辞（デフォルト："icon"）
• generateTypes（boolean、任意）：TypeScript の型を生成するかどうか（デフォルト：true）

使用例：

• 一からフォントを作成する
• アイコンシステムを新規に構築する
• アイコンライブラリからカスタムフォントに移行する

生成されるファイル：

• FontName.ttf、FontName.woff、FontName.woff2
• font-face とアイコンクラスを含む FontName.css
• TypeScript の型定義を含む FontName.types.ts

3. extend-existing-font

目的：既存のアイコンと Unicode 値をすべて維持しながら、既存フォントに新しいアイコンを追加します

パラメーター：

• existingFontDir（string、必須）：既存のフォントファイル（.css およびフォントファイル）が格納されたディレクトリ
• originalSvgDirectory（string、必須）：既存フォントの作成に使用した元の SVG ファイルが格納されたディレクトリ
• newSvgDirectory（string、必須）：追加する新しい SVG ファイルが格納されたディレクトリ
• fontName（string、任意）：フォント名（指定しない場合は自動検出）
• outputDir（string、任意）：出力ディレクトリ（デフォルト：既存フォントと同じディレクトリ）
• cssPrefix（string、任意）：CSS クラスのプレフィックス（指定しない場合は自動検出）
• generateTypes（boolean、任意）：TypeScript 型を生成するかどうか（デフォルト：true）

ユースケース：

• 既存のアイコンシステムへの新しいアイコンの追加
• 既存アプリケーションとの下位互換性の維持
• アイコンライブラリの段階的な拡張

要件：

• 既存フォントの作成に使用した元の SVG ファイルへのアクセス
• Unicode マッピングの検出に使用する既存の CSS ファイル

互換性： ✅ 100% 下位互換 - 既存のプロジェクトは変更せずに引き続き動作します

4. extend-font-advanced

目的：元の SVG ファイルを必要とせず、TTF ファイルから元のグリフを直接抽出して、既存フォントに新しいアイコンを追加します

パラメーター：

• existingFontDir（string、必須）：既存のフォントファイル（.css および .ttf ファイル）が格納されたディレクトリ
• newSvgDirectory（string、必須）：追加する新しい SVG ファイルが格納されたディレクトリ
• fontName（string、任意）：フォント名（ファイルから自動検出）
• outputDir（string、任意）：出力ディレクトリ（デフォルト：既存フォントと同じディレクトリ）
• cssPrefix（string、任意）：CSS クラスのプレフィックス（CSS から自動検出）
• generateTypes（boolean、任意）：TypeScript 型を生成するかどうか（デフォルト：true）
• preserveMetrics（boolean、任意）：元のフォントメトリクスを維持するかどうか（デフォルト：true）

ユースケース：

• サードパーティ製アイコンフォントの拡張
• SVG ソースを入手できないレガシーフォントの使用
• 既存のフォントアセットのリバースエンジニアリングと強化

高度な機能：

• グリフ抽出：OpenType.js を使用して、TTF ファイルからベクターパスを抽出します
• Unicode の維持：元の Unicode マッピングをすべて維持します
• フォントメトリクスの維持：元のフォントの寸法と間隔を保持します
• CSS 統合：抽出したグリフを CSS クラス名にマッピングします

要件：

• 元の TTF フォントファイル
• Unicode マッピングを含む CSS ファイル（グリフ名の検出に使用）
• 形式：.icon-name:before { content: "\\e001"; } のような CSS クラス

技術的な処理：

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 の使用方法

<!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';

// 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<IconProps> = ({ name, className = '' }) => {
  return <i className={`icon ${getIconClass(name)} ${className}`} />;
};

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

🔄 ワークフローの例

シナリオ 1：新しいアイコンシステムの作成

1. ディレクトリに SVG アイコンを用意します
2. list-svgs を使用してファイルを確認します
3. generate-font-from-svgs を使用してフォントを作成します
4. 生成された CSS とフォントをプロジェクトに統合します

シナリオ 2：既存フォントへのアイコンの追加

1. 新しい SVG ファイルをディレクトリに配置します
2. 元の SVG ファイルとともに extend-existing-font を使用します
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 マッピングが含まれていることを確認してください