search

arkon / ng-inline-svg

[Inactive] Angular directive for inserting an SVG file inline within an element.
https://echeung.me/ng-inline-svg/
MIT License
210 stars 88 forks source link

Referencing Inline SVG #56

Closed Warwick101 closed 6 years ago

Warwick101 commented 6 years ago

Thanks so much for this amazing directive!

How can I allow the SVG code to be read inside the components template URL, instead of index.html? If I have the inline svg in my index file, the svg renders perfectly well. Otherwise I have to add the [injectComponent]="true" directive for it to render the SVG via my components template HTML.

Thanks in advance

jfarago commented 6 years ago

I have not had an issue placing it in the index or in a component, but i am having an issue with the path. I cant get a symbols file to work without an absolute path. I created a new cli project to start off with a clean slate, and it doesnt seem like the base url applies unless its just an svg image. Let me explain further in code.

in app.module InlineSVGModule.forRoot({ baseUrl: '/app/assets/icons/'})

this doesnt work <div class="icon" [inlineSVG]="'symbol-defs.svg#sync_alarm'"></div>

this does <div class="icon" [inlineSVG]="'app/assets/icons/symbol-defs.svg#sync_alarm'"></div>

and this works too (this file is in the same folder as the symbol-defs)

<div class="icon" [inlineSVG]="'sync_icon_close.svg'"></div>

To make it work for now, i have to first load the symbol-defs.svg to fetch it and then i can use the id reference.

<div class="icon" [inlineSVG]="'symbol-defs.svg'"></div>

<div class="icon" [inlineSVG]="'#sync_alarm'"></div>

Its seems like the path does not get prepended with a # in the route

arkon commented 6 years ago

Going to ignore @jfarago 's comment since it was reposted as #57.

@Warwick101 I'm not entirely sure what you're asking. Can you list out the different files in the situation and what each file contains?

Warwick101 commented 6 years ago

I have created an "icon" component that has all my SVG code written out in its template. I want to avoid using any external SVG files but rather inject them everywhere and anywhere in my website. Your directive works like a charm - I noticed that I have to include the [injectComponent]="true" just once which "activates" all my icons and only then can use them there after without the [injectComponent]="true". Otherwise if I put the SVG code in my index file then I can inject them without adding the [injectComponent]="true".

arkon commented 6 years ago

Sounds like a quirk with how you're putting the SVG code in another component. Not really sure if I can do anything to directly support that use case though.