vue-svg-loaderを使って画像をcomponent化させる

以前にvue-svg-loaderを使ったことがあったので、知見として記事を書こうと思いました。

vue-svg-loaderをインストール

npm i -D vue-svg-loader

or

yarn add --dev vue-svg-loader

基本設定

次にvue-svg-loaderの設定です。

Vue CLI

vue cliの場合は以下のコードをwebpackに記入します。

module.exports = {
  chainWebpack: (config) => {
    const svgRule = config.module.rule('svg');

    svgRule.uses.clear();

    svgRule
      .use('vue-svg-loader')
      .loader('vue-svg-loader');
  },
};

Nuxt.js

vue cliの場合は以下のコードをnuxt.config.jsに記入します。

nuxt.config.js

module.exports = {
  build: {
    extend: (config) => {
      const svgRule = config.module.rules.find(rule => rule.test.test('.svg'));

      svgRule.test = /\.(png|jpe?g|gif|webp)$/;

      config.module.rules.push({
        test: /\.svg$/,
        loader: 'vue-svg-loader',
      });
    },
  },
};

これで基本的な設定は終了です。

実際にvueファイルで使用する

実際に使用するにはcomponentと同じような使い方で、importで画像のパスを指定して、componentsにimportしたcompoent名を記述します。
最後に使用したい部分にcomponentを追加すると、実際にsvgの画像が描画されます。

<template>
  <nav>
    <a href="https://hogehoge.com/">
      <SampleLogo />
    </a>
  </nav>
</template>
<script>
import SampleLogo from './assets/images/sample_image.svg'

export default {
  name: 'Sample',
  components: {
    SampleLogo,
  },
};
</script>