如何在vue工程中模块化使用大量的svg图片

如果你在执行 requireAll(requireSvg) 后得到的是一个 BrowserSpriteSymbol 数组，并且能够直接使用 <use> 进行引用，这通常意味着在构建过程中有一些特定的 Webpack 配置和/或自定义加载器（loader）被用来处理 SVG 文件，并将它们转换为一个 SVG Sprite，其中每个 SVG 都转换为了一个 <symbol>。

具体步骤如下：

1. require.context: 使用 require.context 创建一个特定的上下文，这个上下文允许你动态地 require 模块。在你的例子中，requireSvg 被设置为指向 ./assets/svg 目录下所有以 .svg 结尾的文件。

2. requireAll 函数: 这个函数接收一个 requireContext 作为参数，并使用 map 方法遍历 requireContext.keys() 返回的所有模块键（即文件路径）。然后，它使用 requireContext 函数来动态地 require 这些模块。由于 require 会执行导入的代码，因此它会执行由 Webpack 配置的加载器所指定的任何转换。

3. Webpack 配置和加载器: 在你的项目中，很可能有一个或多个加载器（如 svg-sprite-loader、svg-url-loader 或自定义加载器）被配置来处理 SVG 文件。这些加载器会在 require 被调用时运行，将 SVG 文件转换成一个统一的 SVG Sprite，其中每个 SVG 都被转换成一个 <symbol> 元素。

4. 返回 BrowserSpriteSymbol 数组: 假设 svg-sprite-loader 或其他类似的加载器被配置为生成一个全局可访问的 SVG Sprite，并且每个 SVG 被转换为一个 <symbol>。在这种情况下，requireAll(requireSvg) 将返回一个数组，该数组包含对 SVG Sprite 中每个 <symbol> 的引用。这些引用可能以某种方式被封装为 BrowserSpriteSymbol 对象，使得它们可以直接在模板中使用 <use> 元素进行引用。

5. 在模板中使用 <use> 引用: 有了 SVG Sprite 和相应的 <symbol> 定义，你就可以在模板中使用 <use> 元素来引用这些 <symbol>。<use> 元素的 xlink:href 或 href 属性应该指向 SVG Sprite 中 <symbol> 的 id。

6. 即直接使用<svg> <use :xlink:href="symbolId" /> </svg> 加载svg图片