概要

create-symbolは、SVGを元にAppleのSF Symbols向けアセットを作成するための小型CLIツールです。URLからSVGを直接取得したりローカルファイルを読み込んだりして、不要なメタデータを削ぎ落とし、座標系やビューBoxを正規化した上でSF Symbolsと相性の良い出力を生成します。開発者やデザイナーがSimple Iconsなど公開アイコンを素早くSF Symbols化してXcodeプロジェクトやデザインシステムに組み込む用途を想定しており、bun createコマンドで手軽に実行できます。

リポジトリの統計情報

• スター数: 25
• フォーク数: 0
• ウォッチャー数: 25
• コミット数: 5
• ファイル数: 11
• メインの言語: TypeScript

主な特徴

• シンプルなCLIインターフェース：bun create symbol
• SVGの最適化と正規化：ビューBox・座標変換や不要属性の削除を自動化。
• SF Symbols互換の出力想定：Xcodeで扱いやすいアセット生成を念頭に設計。
• TypeScriptで実装、依存を抑えた小規模コードベースでメンテナンスが容易。

技術的なポイント

create-symbolはTypeScriptで書かれた小さなツールチェーンで、主に次の技術的工程を踏みます。まず、CLIが受け取ったパスまたはURLからSVGを取得するためにHTTPフェッチやファイルI/Oを使用します。取得後はSVGをパースしてDOMやパス情報を抽出し、ビューBox（viewBox）の有無や座標系の違いを検出します。SF SymbolsやモバイルUIで期待されるスケーリングを実現するために、座標の正規化（原点・スケーリングの統一）やパスのフラット化（複合パスの統合、fill/strokeの整理）を行います。

次に、出力アセットがデザイナーやXcodeで扱いやすくなるように不要なメタ情報（idやコメント、余分なスタイル）を削除し、SVGを最適化します。最適化には軽量なアルゴリズムや既存のSVG最適化手法を参考にしており、出力サイズと互換性のバランスを取っています。最終的にSF Symbols向けのフォルダ構成や命名規則に沿う形でファイルを配置し、必要であればパッケージ化できるような出力を生成します。

設計面では、依存を最小限に抑えたモジュール構成とTypeScriptによる型安全性が採用されています。これによりCI／CDパイプラインへの組み込みや自動化が容易で、Simple Iconsのような外部アイコンソースからのスクリプト的変換を想定したユースケースにマッチします。小規模リポジトリながら、SVG解析・座標変換・最適化の基本的なワークフローを押さえているため、カスタム処理の追加やプラグイン化も比較的取り組みやすい作りです。

プロジェクトの構成

主要なファイルとディレクトリ：

• .gitattributes: file
• .github: dir
• .gitignore: file
• CLAUDE.md: file
• LICENSE: file
• README.md: file
• package.json: file
• src: dir
• dist: dir
• tsconfig.json: file
• bun.lockb: file

…他 6 ファイル

src 配下にはSVGの取得・パース・正規化・出力を担うロジックがあり、CLIエントリポイントから処理フローが起動します。TypeScriptの型定義と簡潔なユーティリティ群で成り立っており、依存関係を絞ることでバイナリを軽量に保っています。テストや複雑なビルド設定は最小限に留め、実用にフォーカスした構成です。

まとめ

SVGを手早くSF Symbols向けに変換したい開発者向けの軽量CLIツールです（約50字）。

リポジトリ情報：

• 名前: create-symbol
• 説明: Create SF Symbols from SVGs
• スター数: 25
• 言語: TypeScript
• URL: https://github.com/EvanBacon/create-symbol
• オーナー: EvanBacon
• アバター: https://avatars.githubusercontent.com/u/9664363?v=4

READMEの抜粋：

create-symbol

Create an SF Symbol from an SVG file:

bun create symbol https://simpleicons.org/icons/expo.svg

…