Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@reireias

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

More than 1 year has passed since last update.

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>

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

ikonate.png

まとめ

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

1
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
reireias
SRE(Site Reliability nEko)
medpeer
国内医師の3人に1人が参加する国内有数のUGC型ドクタープラットフォーム「MedPeer」や遠隔医療サービスなどを運営するヘルステックカンパニー

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
1
Help us understand the problem. What is going on with this article?