Aurelia：使用 jspm 包中的 SVG答案

【问题标题】：Aurelia: using an SVG from a jspm packageAurelia：使用 jspm 包中的 SVG
【发布时间】：2016-10-13 06:37:22
【问题描述】：

我正在使用一个将 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 文件复制到我自己的 assets 文件夹，然后在我的组件中硬编码该文件的链接。

2。直接链接到jspm_packages中的路径

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

3。从jspm_packages动态获取路径

和<require from="package-name/style.css">一样，可以通过某种方式得到jspm描述的package-name的路径吗？

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

需要 Markdown 文件的自定义处理程序在 44 分钟标记处显示在 this video 中。我尝试对 SVG 文件（以及作为测试的降价文件）执行相同的操作，但甚至逐字复制他的示例并将 aurelia 配置为使用该插件也无济于事。在尝试执行 <require from="package-name/symbols.svg"> 时，aurelia 仍然在寻找 symbols.svg.js，这表明该插件并未真正被使用。是否有完整的代码示例说明这一切应该如何工作？

【问题讨论】：

标签： javascript aurelia

【解决方案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>

【讨论】：

谢谢，这与其他添加项一起使用。我必须在config.js 中为这个包设置"defaultExtension": false，否则normalizeSync() 会将.js 添加到url。
您可以尝试将! 添加到您正在规范化的网址的末尾，而不是将defaultExtension 设置为false。不是 100% 确定这会起作用......
不幸的是，这没有同样的效果。