nuxt3のvite-svg-loaderで読み込んだsvgコンポーネントのviewBoxが消えてしまう問題

Nuxt 3.0.0-rc.12 with Nitro 0.6.0 での情報です。

nuxt2 → nuxt3のマイグレーションの中で、小物だがややハマったものの備忘。

先に結論

最初に結論。 vite-svg-loader のオプションに svg: false を渡す。

nuxt.config.ts

// nuxt.config.ts (nuxt3)
import svgLoader from 'vite-svg-loader'
export default defineNuxtConfig({
  // ...
  vite: {
    plugins: [
      svgLoader({ 
+        svgo: false // ←追加
      })
    ],
    // ...
  },
})

nuxt2→nuxt3での svg-loader の対応について

nuxt-svg-loader を使い、componentとしてsvgをloadして使っていたnuxt2プロジェクトでのマイグレーションでの話です。
nuxt-svg-loader がどうやら使えないようなので、vite-svg-loader　に置き換えて対応していた。

nuxt2での書き方

nuxt2では、npm i -D nuxt-svg-loader で入れたモジュールを使って

nuxt.config.ts

// nuxt.config.ts (nuxt2)
export default {
	// ...
  modules: [
    'nuxt-svg-loader',
  ],
	// ...
}

こんな感じで使っていた

.vue

<template>
  <div>
    <User1 />
    <User2 />
  </div>
</template>

<script>
import Vue from 'vue'
import User1 from '~/static/images/user1.svg'
import User2 from '~/assets/images/user2.svg'

export default Vue.extend({
  components: {
    User1,
    User2,
  }
})
</script>

nuxt3での書き方

nuxt3では npm i -D vite-svg-loader を使い、実現できた。

// nuxt.config.ts (nuxt3)
import svgLoader from 'vite-svg-loader'
export default defineNuxtConfig({
  // ...
  vite: {
    plugins: [svgLoader()],
    // ...
  },
})

こんな感じで読み込む。

.vue

<script setup lang="ts">
import User1 from '~/public/images/user1.svg?component'
import User2 from '~/assets/images/user2.svg?component'
</script>

<template>
  <div>
    <User1 />
    <User2 />
  </div>
</template>

これで、読み込み自体はできたのだが、svgの右下が欠けた状態になってしまった。

なぜ?

nuxt2での状態と比較してみると、どうやら svgのコードから viewBox="" のプロパティが消えており、この現象が起きている様子。
調べると vite-svg-loader の内部で svgoが圧縮を行っている。この圧縮で viewBox="" を消している。

故に、vite-svg-loader のオプションに svg: false を渡すことで解決できた。

注意点として、vite-svg-loader を storybookやvitest でもloadしている場合に同様の記述を .storybook/main.js や vitest.config.ts にも対応を忘れずに。