前提知識

Viteの環境設定は vite.config.js （TypeScript環境なら .ts ）というファイルで行います。

https://ja.vite.dev/config

コマンドラインから vite を実行すると、Vite はプロジェクトルート内の vite.config.js という名前の設定ファイルを自動的に解決しようとします（その他の JS および TS の拡張子もサポートされています）。

この設定ファイルはフレームワークを連携した場合を除き※プロジェクト立ち上げの初期時点では用意されていないことがあります。これはnpm-scriptsなど様々なツールを組み合わせて環境構築をしていく場合と違い、Viteはデフォルトで必要なものは揃っている状態からなお「＋α」でカスタマイズしたい場合にのみconfigを作成（＝オプトイン）する、という設計思想によるもののようです。

※ただし、今回の前提であるVue系環境と連携した場合はあらかじめ vite.config.js/.ts が作成（＝専用のプラグイン @vitejs/plugin-vue が導入）されるので、「無いときもある」ぐらいとして捉えてください。なお、Nuxtと連携をした場合は nuxt.config.ts が代替ファイルになります。

問題

特に環境構築時点で深く考えずスピーディーに使えることがViteの利点でもあるのですが、近年のWebサイト制作で扱うことの多いSVG画像をデフォルト環境上で扱いたい場合、正直なところ困りました。

Vite側はSVGを他の画像形式と同じく「静的アセット」として扱うため、（元々サイズが大きくなりすぎない形式とはいえ）圧縮などの最適化処理は特に行ってくれません。特にVueのようなJSフレームワーク上で画像を扱いたい場合では、import imgUrl from './img.svg のようにインポート構文で書くことが多いのですが……実際に読み出す時に返ってくるのはURL文字列で、このままだとInline SVG（ <svg>〜</svg> ）として扱うことはできないため、外部からの干渉＝CSSによるSVG内部カラーの書き換えなどを行うこともできません。

続きはこちらへ