<Icon> components with different svg icons show up as the same icon.

[gcosta0410]

What version of astro-icon are you using?

v1.1.0

Astro Info

Astro                    v4.7.1
Node                     v20.12.0
System                   Windows (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/tailwind
                         astro-icon

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

Using the package astro-icon, whenever I use 2 components with different SVG icons, the second one will have the same icon as the first one.

What's the expected result?

I expect both components to have different icons.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-tgmsd8?file=src%2Fpages%2Findex.astro

[osmfarid]

The issue you're encountering is likely due to SVGO's default optimization - cleanupIds, which after optimization set masks id to a for your icons.

https://svgo.dev/docs/plugins/cleanupIds/

You have two options:

1) Modify SVGO default behaviour via config for prevent id cleanup 2) Remove unnecessary groups, masks and ids from your svgs

I have tried both methods, and they work

export default defineConfig({
  integrations: [icon({
    svgoOptions: {
      multipass: true,
      plugins: [
        {
          name: "cleanupIds",
          params: {
            minify: false,
          }
        }
      ]
    }
  })],
});