Aurelia: using an SVG from a jspm package
<p>I'm using a CSS library (<a href="https://www.lightningdesignsystem.com" rel="nofollow">Salesforce lightning</a>) that uses SVG for icons. Their markup for an icon is:</p>

<pre class="lang-html prettyprint-override"><code>&lt;svg aria-hidden="true" class="slds-icon slds-icon--large slds-icon-standard-opportunity"&gt;
  &lt;use xlink:href="path/to/symbols.svg#opportunity"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>

<p>I have installed the npm package for this library with jspm. This <code>path/to/svg/symbols.svg</code> used for the icons is now in my jspm_packages directory. What is they best way for me to refer to this path in my own component? I am considering a couple of options:</p>

<h3>1. Copy the resource to my own assets folder</h3>

<p>Copy the svg file to my own assets folder, and just hard code the link to this file in my component.</p>

<h3>2. Link directly to the path in jspm_packages</h3>

<p>Don't really want to do this. I also imagine this would be a pain when bundling.</p>

<h3>3. Dynamically get the path from jspm_packages</h3>

<p>In the same way that you can <code>&lt;require from="package-name/style.css"&gt;</code> can you get the path of <code>package-name</code> as described by jspm in some way?</p>

<h3>4. Add resource plugin for SVG files.</h3>

<p>A custom handler for requiring markdown files is shown in <a href="https://vimeo.com/153090562" rel="nofollow">this video</a> at the 44 minute mark. I tried to do the same for SVG files (and also markdown files as a test) but even copying his example word for word and configuring aurelia to use the plugin did nothing. When trying to do <code>&lt;require from="package-name/symbols.svg"&gt;</code> aurelia still looks for <code>symbols.svg.js</code> suggesting the plugin isn't really being used. Is there a full code example of how this should all work?</p>