javascript - 使用来自 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>