SVGスプライトをgulpやIcoMoonを使わず作成する方法

複数のSVGファイルを一つのSVGファイルに統合して利用するSVGスプライトを作成するために、簡易的な方法を考えました。

よくある紹介されている方法はアイコンフォント作成サービスのIcoMoonを利用してSVGファイルをアップロード›ダウンロードする、というものですが、

• 個別にSVGファイルを作成する必要がある
• 作成するたびにアップロード›ダウンロードする手間がかかる
• サービスが継続的に利用できるかわからない

ので、他の方法を探してみました。

すると、gulpを使うという方法も紹介されていましたが・・・。

gulpでsvgスプライト用画像を作る - Qiita https://qiita.com/taiki-hanaoka/items/800b15d9964cd15f1c46

gulpでsvgスプライト用画像を生成 フロントのデザインリニューアル案件があり、「せっかくだから画像もスプライトで表示したいね」と言う話がありまして。 最近webエンジニアにジョブチェンジした私には何が何やらだったのですが、「...

はい。よくわかりません。
ごめんなさい。

ということで、何か専用のツールを使うのでなくSVGファイルの内容を正規表現で置換して作成することにしました。

ここで使用する正規表現のパターンは

• svgタグで囲む
• 個別のパスデータ

の2段階置換となります。

そこで、VSCodeで正規表現パターンを管理・適用出来る拡張機能は無いかを探してみたところ、Replace Rulesが該当しました。

Replace Rules - Visual Studio Marketplace https://marketplace.visualstudio.com/items?itemName=bhughes339.replacerules

Create search/replace rules using Javascript regular expressions

この拡張機能を使うと個別の正規表現を用いた置換パターンを登録し、さらにこれらを一括してセット化してまとめて置換してくれるという、まさに、という仕様でした。

しかし試してみたところ、個別の正規表現はうまくいくのですが、

• セット置換が機能しない
• 一度置換をするとウィンドウを再読み込みしないと機能しない

など、こちらの思い通りにはなりませんでした。

類似の拡張機能も検証してみましたが同様でしたので、これはVSCodeの問題かもしれません。

その結果、最終的には正規表現置換に対応したテキストエディタのMeryのマクロ機能を使うことで簡易的に置換することが出来ました。