svgアイコンを保存するフォルダを作成します：

プロジェクトのルートディレクトリのassetsディレクトリにアイコンを作成し、iconsディレクトリにsvgディレクトリを作成し、そこにsvgアイコンを配置します。

、SvgIcon.vueコンポーネントを作成し、簡単に参照できるようにSVGをパッケージ化します：

b. プロジェクトのルートディレクトリのcomponentsディレクトリにSvgIcon.vueを作成します。この.vueファイルはカスタムアイコンポーネントです。

import Vue from "vue";
import SvgIcon from "@/components/SvgIcon";
// コンポーネントを登録する
Vue.component("svg-icon", SvgIcon);
//事前に要求されたsvgコンポーネント
const req = require.context("@/assets/icons/svg", false, /\.svg$/);
const requireAll = requireContext => requireContext.keys().map(requireContext);
requireAll(req);

設定ファイル nuxt.config.jsローダーを追加

import { resolve } from "path";
export default {
 ...
 plugins: ["@/plugins/svg-icon"]
 build: {
 extend(config, ctx) {
 // Nuxt独自の設定の影響を除くと、Nuxtにはデフォルトでvue-loaderがあり、svgやimgなどを扱うことができる。
 // にマッチするものを探す.svgルールを設定し、svgファイルが保存されているディレクトリを除外する。
 const svgRule = config.module.rules.find(rule => rule.test.test(".svg"));
 svgRule.exclude = [resolve(__dirname, "assets/icons/svg")];
 //ローダーのルールを追加する
 config.module.rules.push({
 test: /\.svg$/, //  .svg
 include: [resolve(__dirname, "assets/icons/svg")], // svgディレクトリをloaderの処理ディレクトリに追加する。
 use: [
 { loader: "svg-sprite-loader", options: { symbolId: "icon-[name]" } }
 ]
 });
 }
 }
};

svg-sprite-loaderをダウンロードしてインストールします。

webpack を使用した Nuxt extend の設定に関する公式ドキュメント

assets/icons/svgディレクトリにsvgファイルを保存しています。

npm install svg-sprite-loader -D

, svg-sprite-loaderをダウンロードしてインストールします。

<template>
 <!-- icon-class の値を指定する。>
 <svg-icon icon-class="demo" />
</template>