[Vue.js] SVG読み込みにおいて、vue-svg-loaderとfile-loaderを使い分ける その1
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)