はじめに

Vue.js プロジェクトで vue-svg-loader を使って SVG ファイルを描画する方法について整理した。

TL;DR

  • npm i -D vue-svg-loader で vue-svg-loader をインストール
  • vue.config.js に設定を追加
  • xxxx.vue で import して components に登録して <YourSvgIcon /> で描画
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. セットアップ
    2. 使い方
  5. まとめ
  6. その他・メモ
  7. 参考文献

環境・条件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.15
BuildVersion:	19A583

$ node -v
v12.7.0

$ npm -v
6.10.3

$ npm ls vue
vue@2.6.10 | MIT | deps: none | versions: 250

$ npm ls vue-svg-loader
vue-svg-loader@0.12.0 | MIT | deps: 2 | versions: 14

詳細

vue-svg-loader を使うと、SVG が簡単に描画できる。

セットアップ

npm i で vue-svg-loader をインストール。

1
$ npm i -D vue-svg-loader

vue.config.js に以下を追加する。

1
2
3
4
5
6
7
8
9
10
11
 module.exports = {
+  chainWebpack: (config) => {
+    const svgRule = config.module.rule('svg');
+
+    svgRule.uses.clear();
+
+    svgRule
+      .use('vue-svg-loader')
+      .loader('vue-svg-loader');
+  },
 };

使い方

xxxx.vue で SVG ファイルを import して、components に登録すると、そのままタグとして利用できる。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
  <div>
    <SomeSvgIcon />
  </div>
</template>

<script>
import SomeSvgIcon from '@/img/yourSvgImage.svg';

export default {
  name: 'XXXX',
  components: {
    SomeSvgIcon
  }
};
</script>

まとめ

  • npm i -D vue-svg-loader で vue-svg-loader をインストール
  • vue.config.js に設定を追加
  • xxxx.vue で import して components に登録して <YourSvgIcon /> で描画

その他・メモ

Vueでsvgファイルをいい感じに扱う - じまろぐ のやり方を使うと、SVG ファイルの数だけ import する必要がなくなるので良さげ。

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list