feat: add symbol prop to <Icon> for <use> integration in UI frameworks

[azhirov]

Description:

This PR introduces a new prop symbol to the Icon component, allowing the component to return an SVG <symbol> element instead of a full <svg> element. The symbol includes the id and viewBox attributes, making it easier to reference icons using <use>, particularly in UI frameworks like Vue, React, or Svelte.

Motivation:

Previously, the Icon component allowed reusing icons, but in UI frameworks such as Vue, React, or Svelte, it required passing the icons through slots, which could be inconvenient. With the introduction of the symbol prop, icons can now be referenced via the <use> element, enabling a more flexible and efficient way to use icons across the application, without relying on slots.

Changes:

Added a symbol prop to the Icon component.
When symbol={true}, the component will return a <symbol> element with the appropriate id and viewBox attributes instead of rendering a standalone <svg> element.
This update allows developers to reference icons using <use>, improving flexibility and integration in UI frameworks.

Example Usage:

<!-- Create a sprite-->
<svg width="0" height="0">
    <Icon name="mdi:home" symbol />
    <Icon name="mdi:dog" symbol />
    <Icon name="local-icon" symbol />
</svg>

<!-- Then reference the icon in UI framework using <use> -->
<svg width="24" height="24">
    <use href="#ai:mdi:dog" />
</svg>

Benefits:

Provides a more flexible way to reuse icons in frameworks like Vue, React, or Svelte, without the need to use slots.
Allows referencing icons with <use>, making it easier to integrate icons into the DOM structure.
Reduces redundant SVG code by reusing the same symbol definition across multiple instances.

Testing:

This feature has been tested with various icon sets and confirmed to work smoothly with Astro islands and other UI frameworks. The default behavior (rendering a full SVG) remains unchanged if the symbol prop is not used.

Related Issue:

#151

[changeset-bot]

🦋 Changeset detected

Latest commit: c9b8653

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
astro-icon	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
api-astroicon	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 5, 2024 8:21am
astroicon	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 5, 2024 8:21am