SVG SYMBOL GENERATOR

SVGスプライト生成ツール

Configuration

Drag & Drop or Click to Upload

Drag & drop multiple SVG files here

GENERATED SPRITE

Upload files and click generate

HOW TO USE

STEP 1

生成されたコードを HTML の body 直下(または共通レイアウトコンポーネント内)に配置してください。

STEP 2

サイト内の任意の場所で <use> タグを使用してアイコンを表示できます。IDにはファイル名が使用されます。

<svg class="icon">
  <use href="#icon-id" />
</svg>
Preview will appear here after generation