SVG スプライト ジェネレーター

SVG スプライト ジェネレーターは、複数の <symbol> 要素を含む 1 つの SVG ファイルを生成します。 <use> を使用して各シンボルを参照し、オンデマンドでアイコンを表示します。これは、大規模なアイコン ライブラリによくあるパターンです。

SVG Sprite Generator はファイル名から ID を導出し、安全のためにそれらを正規化します。名前が繰り返される場合、数字の接尾辞によって名前が一意に保たれます。一貫した名前付けにより、コード内の発見しやすさが向上します。

はい。 SVG Sprite Generator は各 viewBox を保持するため、アイコンはさまざまなサイズでも歪みなく正しく拡大縮小されます。これにより、アイコン間でストロークのウェイトを一定に保つことができます。

はい。 SVG Sprite Generator の出力は、React、Vue、およびプレーン HTML で動作します。スプライトを一度インライン化してから、コンポーネント内で <use href="#icon-id" /> を使用します。大規模なアプリのスプライトを遅延ロードすることもできます。

いいえ、SVG Sprite Generator はブラウザ内でローカルに実行されるため、ファイルがデバイスから外部に流出することはありません。

はい。 SVG スプライト ジェネレーターは、最終的なスプライトが小さくなり、保守が容易になるため、最適化された SVG の恩恵を受けます。スプライトが小さいほど読み込みが速くなり、帯域幅が減少します。

更新したアイコン セットを使用して SVG スプライト ジェネレーターを再実行し、スプライト ファイルを置き換えます。一貫した ID を維持することで、既存の参照が壊れるのを防ぎます。メジャーアップデートをリリースするときにスプライトファイル名のバージョンを変更します。スプライトは、静的サイト ジェネレーターや SSR アプリとうまく連携します。

はい。 SVG Sprite Generator はブラウザで無料で使用できます。ダウンロードやインストールは必要ありません。

いいえ、SVG スプライト ジェネレーターはサインアップしなくてもブラウザで即座に動作し、ファイルはローカルに残ります。