使用来自 node_modules 的 SVG

Question

我创建了一个包含所有 svg 文件的 node_module 来模块化我们的架构。

当我调用它时它工作正常：

<q-icon>
  <svg>
    <use xlink:href="~svgmodule/svgs/icons.svg#addicon"></use>
  </svg>
</q-icon>

但是当这样做时：

<q-icon>
  <svg>
    <use :xlink:href="'~svgmodule/svgs/icons.svg#' + iconParameter"></use>
  </svg>
</q-icon>

而iconParameter定义如下：

iconParameter: 'addicon'

这是我得到的错误：

vue.runtime.esm.js?0594:6757 GET http://localhost:8080/~svgmodule/svgs/icons.svg net::ERR_ABORTED 404 (Not Found)

我也试过了，效果很好：

<use xlink:href="../../../../../../../../node_modules/svgmodule/svgs/icons.svg#addicon"></use>

但是这个没有：

<use :xlink:href="'../../../../../../../../node_modules/svgmodule/svgs/icons.svg#' + iconParameter"></use>

也没有

<use :xlink:href="'../../../../../../../../node_modules/svgmodule/svgs/icons.svg#addicon'"></use>

救命！！

Answer 1

vue-loader 不会将表达式转换为 webpack 模块请求。

您必须手动调用require。 This is what vue-loader does internally.

<q-icon>
  <svg>
    <use :xlink:href="require('~svgmodule/svgs/icons.svg') + '#' + iconParameter"></use>
  </svg>
</q-icon>