push-based / ngx-fast-svg

📦 SVGs, fast and developer friendly in Angular
54 stars 4 forks source link

Problem with svg with name 'us' or 'pe' or 'se' #65

Open PhilFlash opened 9 months ago

PhilFlash commented 9 months ago

Hi

If I use name 'us', 'pe' or 'se', fast svg display suspenseSvg.

In my case, I use fast-svg for flag for country with https://github.com/lipis/flag-icons The name of flag is based on iso code with two letters.

Example here: https://stackblitz.com/~/github.com/PhilFlash/fast-svg-bug It's a standalone application generated by Angular CLI. I use a flag fr (for french). The us.svg pe.svg and se.svg is a simple copy of fr.svg (so no problem with the svg code). <fast-svg name="us" ...> and <fast-svg name="pe" ...> and <fast-svg name="se"...> display suspenseSvg.

Philippe

PhilFlash commented 9 months ago

The bug is in file src/lib/fast-svg.component.ts line 185. if (cache.name.includes(this.name)) {

For first time, cache name is : #suspense If name is 'us', the condition is true => #suspense.include('us') If name is 'pe', the condition is true => #suspense.include('pe') If name is 'se', the condition is true => #suspense.include('se')

In these cases, img.removeEventListener('load', this.loadedListener); and the svg is not loaded.

But, I have not found a fix for this problem

Philippe

PhilFlash commented 9 months ago

I propose to replace in file src/lib/fast-svg.component.ts line 185 if (cache.name.includes(this.name)) { by if (cache.name === ('#'+this.name)) {