如何在Nuxt 3应用中使用SVG Spritemap技术？

方案一：使用nuxt-svg-sprite插件（最简单） #

这个插件专为Nuxt设计，能自动处理SVG生成spritemap，步骤如下：

1. 安装插件

npm install nuxt-svg-sprite --save-dev
# 或用yarn
yarn add nuxt-svg-sprite -D

2. 在nuxt.config.ts中配置模块

export default defineNuxtConfig({
  modules: ['nuxt-svg-sprite'],
  svgSprite: {
    dir: 'assets/svg', // 指定SVG文件存放目录
    sprite: 'spritemap.svg', // 生成的spritemap文件名
    prefix: '', // 可选，给图标ID加前缀，比如设为"icon-"，调用时用#icon-example
  }
})

3. 在组件中调用图标
   插件会自动将spritemap注入页面，直接用你想要的方式调用：

<svg>
  <use href="spritemap.svg?#example"></use>
</svg>
<!-- 如果加了prefix，比如prefix: 'icon-'，写法如下 -->
<svg>
  <use href="spritemap.svg?#icon-example"></use>
</svg>

方案二：手动配置Vite插件（更灵活） #

如果不想用专门的Nuxt插件，可直接用Vite的svg-sprite插件，步骤如下：

1. 安装vite-plugin-svg-sprite

npm install vite-plugin-svg-sprite --save-dev

2. 在nuxt.config.ts中配置Vite插件

import svgSprite from 'vite-plugin-svg-sprite'

export default defineNuxtConfig({
  vite: {
    plugins: [
      svgSprite({
        symbolId: '[name]', // 图标ID直接用文件名，比如example.svg对应#example
        include: 'assets/svg/**/*.svg', // 匹配assets/svg下所有SVG文件
      })
    ]
  }
})

3. 调用图标
   插件会自动把spritemap注入HTML的<body>开头，直接引用ID即可：

<svg>
  <use href="#example"></use>
</svg>

关于你之前的@nuxtjs/svg问题 #

这个插件对Nuxt 3的spritemap支持不完善，容易出现你遇到的DOM创建错误，直接用上面两种方案替代即可。

内容的提问来源于stack exchange，提问作者Oleksandr