Auto generating SVG sprite with Gulp.
JavaScript HTML
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src/assets/images/svg
.gitignore
README.md
gulpfile.js
package.json

README.md

svg-sprite-generator

SVGスプライトを自動で生成します。同時にスプライトの一覧が見れるHTMLも作成します。
Gulpを使用していますが、グローバルへのGulpインストールは不要です。

Require

  • node.js

Getting Started

1. clone

プロジェクトディレクトリへ移動してクローン

$ git clone git@github.com:42EG4M1/svg-sprite-generator.git

2. install plugins

プラグインをインストール

$ npm i

3. build

以下のコマンドでタスクを実行(watchなし)

$ npm run build

Output

タスクを実行すると以下の工程が自動で行われます。

  • 各SVGファイルを圧縮
  • svgタグをsymbolタグに置き換え、ファイル名をidにセット
  • 各SVGファイルを一つのSVGにまとめ、余分な要素(id、class、style、fill等)を削除
  • スプライトのリスト(_sample.html)を作成

※生成されるSVGスプライトは、HTML用(インライン用)のもので、色(fill)や線(stroke)等は、CSSで調整する必要があります。(CSSのbackgroundで表示させることはできません)

How to Use

Illustratorで作成したSVGファイルを./src/assets/images/svg/の中に設置し、$ npm run buildでタスクを実行するだけです。

※Adobe Illustrator CCで作成されたSVGファイルを基準としています。
※基本的に保存方法は問いませんが、comand + cでコピーし、エディタの新規ファイルでcommand + vで貼り付けて保存する方法を推奨します。この場合、最終の空白行を必ず削除するようにしてください。

Directory

タスクを実行するとdistディレクトリが作成され、下層のimagesディレクトリにsprite.min.svgが生成されます。
同時に_sample.htmlがルートに作成されます。

/
├── src
│   └── assets
│       └── images
│           └── svg
│               ├── _base.html
│               ├── example1.svg
│               ├── example2.svg
│               └── ...
├── dist
│   └── assets
│       └── images
│           └── sprite.min.svg
│
├── _sample.html
│
├── ...

_sample.htmlには画像の一覧が表示されます。スプライトに含めた画像を一目で確認できるとともに、HTMLへ表示する際のidを確認することができます。

HTML

SVG画像をインラインとしてHTMLに表示する際は、スプライトのsymbolタグにセットされたidを、useタグのxlinkに記載することで表示できます。
idは、スプライト画像の一覧とともに、_sample.htmlに記載されています。

[ HTML ]
<svg class="svg-icon"><use xlink:href="#example1"/></svg>

※上記の方法で表示させる場合は、作成したSVGスプライトをHTMLへ読み込ませる必要があります。読み込み方法等の詳細は、以下のリンク先ページを参考にしてください。

外部SVGファイルを非同期で読み込み、インラインのSVGスプライトとして利用する

Detailed

詳細については、以下のブログに記載しています。

GulpでSVGスプライトを自動生成する

License

MIT License