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

[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,
          }
        }
      ]
    }
  })],
});