nuxt使用svg-icon

Nuxt.js 是一个基于 Vue.js 的通用应用框架，它提供了一系列开箱即用的特性，包括服务端渲染、静态网站生成、代码拆分等。而在 Nuxt.js 中使用 SVG 图标的方法则是使用 `svg-icon` 模块。

使用 `svg-icon` 模块需要先安装该模块，可以使用 npm 或者 yarn 进行安装。安装命令如下：

npm install svg-icon --save

安装完成后，需要在 nuxt.config.js 中配置 `svg-icon` 模块。配置方式如下：

module.exports = {
  modules: [
    'svg-icon'
  ],
  // svg-icon 配置
  svgIcon: {
    // 图标文件所在目录
    iconDirs: ['~/assets/icons'],
    // 图标文件后缀名
    iconSuffix: '.svg',
  }
}

配置完成后，就可以在 Vue 组件中使用 SVG 图标了。使用方式如下：

<template>
  <svg-icon name="close" />
</template>

<script>
export default {
  name: 'MyComponent',
}
</script>

其中 `name` 属性指定了图标的名称，该名称对应的是 SVG 图标文件的文件名（不包括后缀名）。例如上面的例子中，`name` 属性值为 `close`，则对应的 SVG 图标文件为 `~/assets/icons/close.svg`。