Nuxt.js + ikonate(npmパッケージ中のsvgファイルのロード)

Nuxt.jsやVue.jsを利用していて、npmパッケージ内のsvgファイルを描画したくなることってありますよね？
私は最近トレンドに上がっていた、ikonateというsvgなiconライブラリを利用する際にハマりました。

ただ表示するだけなら、imgタグのsrcに指定すればよいのですが、色やスケールを変化させたい場合、この方法だと難しいようです。

参考: 【Vue】svg画像をそのまま出力して色を変える

vue-svg-inline-loader

vue-svg-inline-loaderを使うことで、色の指定やスケールが可能な状態でsvgファイルを描画することができます。

今回実装したプロジェクトはreireias/nuxt-ikonate-exampleで公開しています。

環境

今回使用したライブラリのバージョンは下記の通りです。

• Node.js: v12.0.0
• Nuxt.js: 2.6.3
• vue-svg-inline-loader: 1.2.15
• ikonate: 1.0.1

プロジェクト作成

プロジェクトを作成していきます。

yarn create nuxt-app nuxt-ikonate-example
# 選択肢は適当に(例ではvuetifyを利用しています)

vue-svg-inline-loaderとikonateを追加します。

yarn add -D vue-svg-inline-loader
yarn add ikonate

vue-svg-inline-loaderのREADMEに従い、nuxt.config.jsonに設定を追加します。

nuxt.config.json

  build: {
...
    extend(config, ctx) {
      // Run ESLint on save
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
      // vue-svg-inline-loader
      const vueRule = config.module.rules.find(rule => rule.test.test('.vue'))
      vueRule.use = [
        {
          loader: vueRule.loader,
          options: vueRule.options
        },
        {
          loader: 'vue-svg-inline-loader'
        }
      ]
      delete vueRule.loader
      delete vueRule.options
    }
...

※ Vue.jsの場合はvue-svg-inline-loaderのREADMEに書かれている設定を参考にしてください。

svgファイルの読み込み

あとは下記のようにimgタグにsvg-inline属性を追加して読み込むと、表示されます。
この状態ならcssによる色の指定も効きます。

pages/index.vue

<template>
  <v-layout column justify-center align-center>
    <v-flex xs12 sm8 md6>
      <div class="text-xs-center">
        <h1>Nuxt.js + ikonate example</h1>

        <img
          svg-inline
          svg-sprite
          class="ikonate ikonate-red"
          width="24px"
          height="24px"
          src="ikonate/icons/activity.svg"
        />
        <p>24px</p>

        <img
          svg-inline
          svg-sprite
          class="ikonate ikonate-green"
          width="32px"
          height="32px"
          src="ikonate/icons/chart.svg"
        />
        <p>32px</p>

        <img
          svg-inline
          svg-sprite
          class="ikonate ikonate-blue"
          width="48px"
          height="48px"
          src="ikonate/icons/camera.svg"
        />
        <p>48px</p>
      </div>
    </v-flex>
  </v-layout>
</template>

<style>
.ikonate {
  fill: none;
}
.ikonate-red {
  stroke: red;
}
.ikonate-green {
  stroke: green;
}
.ikonate-blue {
  stroke: blue;
}
</style>

上記ページを表示すると下記のように表示されます。

まとめ

Nuxt.jsでsvgファイルを色・サイズを変更可能な状態で読み込むことができました。