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 파일을 draw 할 수가 있습니다.

이번에 구현한 프로젝트는 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 파일을 색상 및 크기를 변경할 수 있는 상태로 로드할 수 있었습니다.