1、创建svg图标存放文件夹：

在项目根目录下的assets目录创建icons，然后在icons目录创建svg目录，我们的svg图标就放在这里面，当然你也可以自己定义svg图标放置的位置，调整路径配置即可。

2、创建SvgIcon.vue组件,包装SVG便于引用：

b. 在项目根目录下的components目录里创建SvgIcon.vue, 这个.vue文件就是我们自定义的图标组件, 代码如下

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :href="iconName"></use>
  </svg>
</template>

<script>
export default {
  name: "SvgIcon",
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ""
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`;
    },
    svgClass() {
      if (this.className) {
        return "svg-icon " + this.className;
      } else {
        return "svg-icon";
      }
    }
  }
};
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  fill: white;
}
</style>

3、增加插件(Nuxt plugin 使用 vue插件)加载SvgIcon.vue组件

import Vue from "vue";
import SvgIcon from "@/components/SvgIcon";

// 注册组件
Vue.component("svg-icon", SvgIcon);
//预请求svg组件(通过之前的svg-sprite-loader加载)
const req = require.context("@/assets/icons/svg", false, /\.svg$/);
const requireAll = requireContext => requireContext.keys().map(requireContext);
requireAll(req);

4、配置文件nuxt.config.js添加loader

官方文档使用webpack进行配置 Nuxt extend

assets/icons/svg 目录是我存放svg文件的目录

PS: 默认情况下 Nuxt 使用 vue-loader、file-loader 以及 url-loader 这几个 Webpack 加载器来处理文件的加载和引用。对于不需要通过 Webpack 处理的静态资源文件，可以放置在 static 目录中。所以需要排除其他加载器对SVG文件的处理参考GitHub Issue Nuxtjs + Vue-svg-loader

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")];
      //添加loader规则
      config.module.rules.push({
        test: /\.svg$/, // 匹配.svg
        include: [resolve(__dirname, "assets/icons/svg")], // 将存放svg的目录加入到loader处理目录
        use: [
          { loader: "svg-sprite-loader", options: { symbolId: "icon-[name]" } }
        ]
      });
    }
  }
};

5、下载安装svg-sprite-loader

npm install svg-sprite-loader -D

6、页面中使用

<template>
 <!-- icon-class 的值,即svg文件名  -->
 <svg-icon icon-class="demo" />
</template>

完整代码

Nuxtjs项目中使用svg图标