nuxt-svg-loaderで読み込んだSVGのパスを取得する 🖼

f:id:kimizuka:20200811145835p:plain

Nuxt.jsでSVGを扱うときにコンポーネントのように扱えるようになる便利なローダー、nuxt-svg-loader ですが、オブジェクトが返ってくると都合が悪いケースもあります。

<template>
  <img src="~/assets/img/title.svg" alt="title" />
</template>

というケースや、

<style>
  .title {
    background: url(~assets/img/title.svg) center no-repeat;
  }
</style>

というケースは、SVG本体ではなく、パスが返ってきて欲しいです。

そんなとき、役に立つのがインラインオプション。npmのページにしっかり記載されています。

You can use inline svg as well by adding ?inline at the end of the file path

ファイルパスの最後に?inlineを追加することで、インラインsvgも使用できます。

とのことなので、上記のケースであれば、

<template>
  <img src="~/assets/img/title.svg?inline" alt="title" />
</template>

<style>
  .title {
    background: url(~assets/img/title.svg?inline) center no-repeat;
  }
</style>

と?inlineを付けてあげれば、意図通りの挙動となります。

みかづきブログ・カスタム