动态 svg xlink:href 不渲染浏览器中的图标

Question

我在 Vue 单文件组件中有一个选项卡结构，其中使用组件内的 svg 精灵和动态变量加载图标。

<svg class="w-4 h-4 fill-current text-blue-500 mb-2 mx-auto">
<use class="h-4 w-4" :xlink:href="`@/assets/ui-icons.svg#${tab.name}`"></use>
</svg>

结果在 Chrome 和 safari 中显示为空白。即使 DEV 工具按照应有的方式显示已编译的代码，也不会呈现 SVG。

Answer 1

假设您使用的是 Webpack：

@/assets/ui-icons.svg是一个相对 URI，大概是由它处理的，resolve-url-loader以便在您的网站被转译时解析为 SVG 文件的真实 URI。但是，resolve-url-loader仅在转译时运行，在这里您在 Vue 绑定 ( :xlink:href) 中有此 URI ，它在运行时更改，因此resolve-url-loader无法修复它。尝试这样做：

<svg class="w-4 h-4 fill-current text-blue-500 mb-2 mx-auto">
  <use class="h-4 w-4" :xlink:href="require('@/assets/ui-icons.svg') + `#${tab.name}`"></use>
</svg>

该require()调用将调用resolve-url-loader并解析到您的 SVG 文件，而其余部分将链接到您要引用的该 SVG 文件中的特定项目。如果您为 SVG 指定了其他加载器，则需要覆盖它们，如下所示：

require('!resolve-url-loader!@/assets/ui-icons.svg')