## file-loader 基本的に、PNGやSVGなどのファイルはfile-loaderを使ってwebpack経由でファイルパスとして扱うことができる。 ## vue-svg-loader SVGの場合はimgタグやbackground-imageで実装すると後から色を変えたりといった操作ができないため、SVGの恩恵が薄くなる(サイズは超軽量化できるが)。 可能な限りインラインに直接描画する方法を用いたいが、その際に便利なのが`vue-svg-loader`。 SVGをVueのComponentとして扱うことができる。 例: ```html <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)
2020/07/24 21:53:22

コメント (0)

あなたもコメントしてみませんか

アカウント新規作成(無料)

既にアカウントを持っている方は ログイン