Invalid HTML when using multiple icons

[w3rafu]

Hello, Rob.

After running w3 validator, I found multiple errors caused by icons path duplicating ID's.

They all render the same ID.

e.g.
<path id="path-0" ... >
<path id="path-0" ... >
<path id="path-0" ... >

Any workaround for this?

Thanks!

[inbetweencode]

I am actually on this issue because I think to have extra information.

The first icon on the page is normal: having a single .
Subsequent SVG's have respectively 3, 5 and 6 's.
I have no explaination for this behaviour.

[josdejong]

These id's are generated here:

svelte-awesome/src/lib/components/Icon.svelte

Lines 5 to 8 in effeff0

	{#if self.paths}
	{#each self.paths as path, i}
	<Path id="{i}" data="{path}"/>
	{/each}

Which creates a Path component with (mostly) id="path-0"

svelte-awesome/src/lib/components/svg/Path.svelte

Line 1 in effeff0

<path id="path-{id}" {...data} />

I guess the solution would be to remove the id attribute from paths (they can never be unique this way when you use the same icon twice).

[josdejong]

I created a PR with a possible fix: #930

[RobBrazier]

apologies for the delay, I've merged Jos's PR now and the fix should be available in 3.0.1