Nuxt 3 (vite) で SVG を import する方法

Nuxt 3 ではビルドツールが Webpack から Vite (デフォルト) に変わったこともあり、リソースのバンドリングに関係するミドルウェアたちにおいて、 Nuxt 2 では動いていたが Nuxt 3 では (Vite 前提では) 未だ動いていないようなケースがわりかしあったりする。 SVG を Vue コンポーネント上で import できるようにするためのパッケージである、 @nuxtjs/svgのパッケージもその一つであり、以下の issue にある通り、 Nuxt 3 (Vite) ではまだ動かない。

Not work on nuxt 3 · Issue #86 · nuxt-community/svg-module

github.com

Nuxt 3 で SVG を扱いたくなったので、それについて調べたメモ。

やりたいこと

SVG を import する場合、ユースケースはおそらく以下の 3 つ。

1. SVG をファイルとして指定する。import すると svg ファイルもビルドされ、 program 上から得られる値は、その生成された path の文字列となる。
2. SVG の中身を文字列として読み込む。それを v-html で <svg> タグとして埋め込んだり、 Data URL に変換して src する。
3. コンポーネントとして読み込む。コンポーネントは render されるとソースとなった <svg> のタグを出力する。

どれを使いたいかはケースバイケースではあるが、基本的に、実現したい要件によってどれが適切かは決まってくるため、ミドルウェアとして導入する場合には、これらすべてのユースケースが実現できるようなものであることが望ましい。

この観点でライブラリを選定した。

vite-svg-loader

上記のやりたいことを実現できるライブラリは、現時点では vite-svg-loader のみがこれに該当する。

設定方法としては、このパッケージを package.json に追加し、インストールした上で、以下を nuxt.config.ts に追加する。

import svgLoader from "vite-svg-loader"

export default defineNuxtConfig({
  vite: {
    plugins: [
      svgLoader()
    ]
  }
})

この上で、 SVG を import する際に、以下のように URL の指定を行う。

import iconUrl from './my-icon.svg?url'
// '/assets/my-icon.2d8efhg.svg' に解決

import iconRaw from './my-icon.svg?raw'
// '<?xml version="1.0"?>...' (中身の文字列)に解決

import IconComponent from './my-icon.svg?component'
// <IconComponent /> として利用できる component に解決