javascript - 动态 svg xlink :href not rending the icons in browser

Question

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

<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 中显示为空白。 SVG 不会呈现，即使 DEV 工具完全按照应有的方式显示编译后的代码。

Answer 1

假设您使用的是 Webpack:

@/assets/ui-icons.svg 是一个相对 URI，大概由 resolve-url-loader 处理以解析为 SVG 的真实 URI转译您的网站时提交文件。但是，resolve-url-loader 仅在传输时运行，这里您在 Vue 绑定(bind) (: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')