astro-icon icon indicating copy to clipboard operation
astro-icon copied to clipboard

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

Open azhirov opened this issue 5 months ago • 2 comments

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:

https://github.com/natemoo-re/astro-icon/issues/151

azhirov avatar Sep 04 '24 08:09 azhirov