GulpでSVGスプライトを自動生成する | UNORTHODOX WORKBOOK | Blog
前回のエントリーでSVGスプライトを非同期で読み込む方法を紹介しましたが、今回はSVGスプライトをGulpで自動生成する方法を紹介します。 ここで生成するSVGスプライトは、HTMLにuseタグを使ってインラインで表示させるもので、CSSのbackgroundでは表示させることができませんのでご了承ください。 なお、インライン用のSVGスプライトの場合、（色情報等を削除するため）目視で確認することが難しくなってしまうので、SVGスプライトの生成と同時に一覧表示させるためのHTMLも自動で生成できるようにしています。 Githubリポジトリにすべてのコードをあげていますので、以下のリンクからダウンロードすることができます（構成やディレクトリ等、ここで記載しているものとは若干異なります）。 https://github.com/42EG4M1/svg-sprite-generator gulp
Gulpを使ったSVGスプライトのアイコンシステムとワークフローの作り方
SVGスプライトって、なんか複雑なイメージがありませんか？ 僕はそうでした。なんか、面倒くさそう。。。どこから始めて良いかわからない。。。といった感じでずっと手をつけられずにいました。 でも、今回やってみて思ったんですが、一度ワークフローを確立してしまえばアイコン管理がかなり便利になります。CSSスプライトの時よりも管理が楽になりますし、表示サイズや今後の高解像度対応を気にしなくて良くなるのも嬉しいですね。 SVGスプライトについての英語のリソースはあるのですが、説明が多く、とっつきにくいものも多い印象なので、ここではできるだけシンプルに必要なことだけをまとめてみたいと思います。 では、SVGスプライト・アイコンシステムのGulpを使ったワークフローの構築、始めましょう！ 目次 達成したいこと デモページ SVGスプライトの仕組み ブラウザサポート 用意するもの 導入ステップ 最後に 達成
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
svg-spriteで無駄の無いSVGスプライトを生成する - DeNA Design
gulp-svg-sprites
