Aurelia：使用jspm包中的SVG

Question

我使用的是使用SVG图标的CSS库（Salesforce lightning）。他们对图标的标记是：

<svg aria-hidden="true" class="slds-icon slds-icon--large slds-icon-standard-opportunity">
  <use xlink:href="path/to/symbols.svg#opportunity"></use>
</svg>

我已经使用jspm为这个库安装了npm包。用于图标的path/to/svg/symbols.svg现在位于我的jspm_packages目录中。他们在我自己的组件中引用这条路径的最佳方式是什么？我正在考虑几个选项：

1。将资源复制到我自己的资产文件夹

将svg文件复制到我自己的资源文件夹，只需在我的组件中硬编码该文件的链接。

2。直接链接到jspm_packages

中的路径

不是真的想要这样做。我也想象捆绑时会很痛苦。

3。动态地从jspm_packages

获取路径

与<require from="package-name/style.css">一样，您可以以某种方式获得jspm所描述的package-name路径吗？

4。为SVG文件添加资源插件。

要求降价文件的自定义处理程序显示在this video的44分钟标记处。我试图对SVG文件（以及作为测试的markdown文件）做同样的事情，但即使是逐字复制他的例子并配置aurelia来使用插件也没有做任何事情。在尝试<require from="package-name/symbols.svg">时，aurelia仍然会查找symbols.svg.js，表明该插件并未真正被使用。是否有一个完整的代码示例，说明这一切应该如何工作？

Answer 1

选项＃3（动态获取路径）应该有效：

let url = System.normalizeSync('salesforce-ux/design-system/assets/icons/utility-sprite/svg/symbols.svg') + '#warning';

可能最好创建一个自定义元素来封装所有逻辑。然后你就可以替换它：

<svg aria-hidden="true" class="slds-icon slds-icon--large slds-icon-standard-opportunity">
  <use xlink:href="path/to/symbols.svg#opportunity"></use>
</svg>

有了这个：

<suds-icon icon="opportunity" size="large"></suds-icon>