I'm using a CSS library (Salesforce lightning) that uses SVG for icons. Their markup for an icon is:
<svg aria-hidden="true" class="slds-icon slds-icon--large slds-icon-standard-opportunity">
<use xlink:href="path/to/symbols.svg#opportunity"></use>
</svg>
I have installed the npm package for this library with jspm. This path/to/svg/symbols.svg 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:
1. Copy the resource to my own assets folder
Copy the svg file to my own assets folder, and just hard code the link to this file in my component.
2. Link directly to the path in jspm_packages
Don't really want to do this. I also imagine this would be a pain when bundling.
3. Dynamically get the path from jspm_packages
In the same way that you can <require from="package-name/style.css"> can you get the path of package-name as described by jspm in some way?
4. Add resource plugin for SVG files.
A custom handler for requiring markdown files is shown in this video 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 <require from="package-name/symbols.svg"> aurelia still looks for symbols.svg.js suggesting the plugin isn't really being used. Is there a full code example of how this should all work?