Nuxt+Vueで、SVGを使う方法がめっちゃ簡単だった件

ポートフォリオサイトを作ってみました。
その際、SVGを使うことがあったので、
知見として、記事にしておこうかと。

nuxt-svg-loaderのインストール

まずは、nuxt-svg-loaderをインストールしていきます。
npm：nuxt-svg-loader

npm i -D nuxt-svg-loader

基本設定

インストールした、nuxt-svg-loaderをnuxt.config.jsのmodulesに追記する。

nuxt.config.js

  ....
  /*
   ** Nuxt.js modules
   */
  modules: [
    'nuxt-svg-loader'
  ],
  ....

読み込みたいSVGを読み込む

pages/index.vueなどSVGを使いたいところページに下記ソースを記述。
importにSVGのパスを指定し、componentsに記述したcomponent名をtemplate内に追加。
これでnpm run devしたら読み込まれてると思います。
ワイ「めっちゃ簡単やんけ！！すごいな！！！」と感動しましたとさ。。。

index.vue

<template>
  <div class="svg">
    <SampleSvg />
  </div>
</template>

<script>
import SampleSvg from '@/assets/images/svg/sample.svg'

export default {
  components: {
    SampleSvg
  }
}
</script>