Aurelia：使用 jspm 包中的 SVG

Question

我正在使用 CSS 库 (Salesforce lightning)，该库使用 SVG 作为图标。他们的图标标记是：

<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。复制资源到我自己的assets文件夹

将 svg 文件复制到我自己的资产文件夹中，然后将 link 硬编码到我的组件中的这个文件中。

2。 Link直接到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>

Aurelia：使用 jspm 包中的 SVG

Aurelia: using an SVG from a jspm package

javascript

aurelia

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

2。 Link直接到jspm_packages

3。从jspm_packages

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