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

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



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

—————————–
元のSVGファイルはAffinity Desingerで複数のアートボードを一括でエクスポートして作成します。
—————————–

よくある紹介されている方法はアイコンフォント作成サービスのIcoMoonを利用してSVGファイルをアップロード›ダウンロードする、というものですが、
・個別にSVGファイルを作成する必要がある
・作成するたびにアップロード›ダウンロードする手間がかかる
・サービスが継続的に利用できるかわからない
ので、他の方法を探してみました。

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

gulpでsvgスプライト用画像を作る - Qiita
参考
gulpでsvgスプライト用画像を作る - Qiita

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

gulpでsvgスプライト用画像を作る - Qiita Qiita

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

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

ここで使用する正規表現のパターンは
・svgタグで囲む
・個別のパスデータ
の2段階置換となります。

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

https://marketplace.visualstudio.com/items?itemName=bhughes339.replacerules
参考
https://marketplace.visualstudio.com/items?itemName=bhughes339.replacerules

Create search/replace rules using Javascript regular expressions

https://marketplace.visualstudio.com/items?itemName=bhughes339.replacerules

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

しかし試してみたところ、個別の正規表現はうまくいくのですが、
・セット置換が機能しない
・一度置換をするとウィンドウを再読み込みしないと機能しない
など、こちらの思い通りにはなりませんでした。

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

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

今日はここまで

関連する記事



こちらはいかが?


コメントを残す

メールアドレスが公開されることはありません。