開発した理由
どんなフロントエンドプロジェクトにも、いずれ独自のアイコンが必要になります。デザイナーが SVG ファイルを書き出し、開発者は属性名の変更、エディタのメタデータ削除、コンポーネントへのラップに時間を費やします。既存のオンライン変換ツールは、ファイルをサーバーにアップロードしたり、手順の合間に広告を表示したり、React にしか対応していなかったりすることが少なくありません。
SvgJsx はすべてブラウザ内で動作し、チームが実際に使っているフレームワークに対応し、最新の慣例に沿ったコードを出力します。手作業で整えることなく、そのままコミットできます。
仕組み
変換ツールには TypeScript で書かれた小さな XML パーサーが組み込まれています。SVG からツリーを構築し、メタデータの削除、数値の丸め、色の currentColor への置き換えなど選択したクリーンアップを適用してから、JSX、Vue テンプレート、react-native-svg コンポーネントとして出力します。このコードは各オプションと不正な入力に対する自動テストでカバーされています。
サイトは静的に生成され、CDN から配信されています。バックエンドもデータベースもアカウント機能もありません。
大切にしていること
このプロジェクトはいくつかのシンプルな原則に従っています。
- プライバシー第一：SVG が端末の外に出ることはありません。
- 読みやすい出力：必要なインポートだけを含む整形済みのコード。
- デフォルトで安全：スクリプトとインラインのイベントハンドラは削除されます。
- 7 言語に対応：英語、中国語、スペイン語、ドイツ語、フランス語、日本語、ポルトガル語。