file-loader

基本的に、PNGやSVGなどのファイルはfile-loaderを使ってwebpack経由でファイルパスとして扱うことができる。

vue-svg-loader

SVGの場合はimgタグやbackground-imageで実装すると後から色を変えたりといった操作ができないため、SVGの恩恵が薄くなる(サイズは超軽量化できるが)。

可能な限りインラインに直接描画する方法を用いたいが、その際に便利なのがvue-svg-loader。

SVGをVueのComponentとして扱うことができる。

例:

<template>
  <div class="main-content">
    <SvgComponent />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "@vue/composition-api";
import Route1 from "@/assets/images/image.svg";
export default defineComponent({
  components: {
    SvgComponent
  },
});
</script>

こうやって宣言したSVGは、HTML上ではインラインsvgタグとして描画される。

いくつもSVGを読み込む場合に都度Componentを宣言するのは無駄なので、vue-svg-loaderでSVG読み込む専用のComponentを定義してもよいと思う。

vue-svg-loader - Github -(https://github.com/visualfanatic/vue-svg-loader)

続き(https://coneta.jp/article/show/2883)