From a8c0a6c5fe2a01841c258af5fb3abe04839df5eb Mon Sep 17 00:00:00 2001
From: Michael Stramel <stramel@users.noreply.github.com>
Date: Mon, 4 Nov 2024 19:39:08 -0800
Subject: [PATCH] fix(Icon): switch to non-deprecated href attribute (#243)

* fix(Icon): switch to non-deprecated href attribute

* docs(components): update usages in components guide

* docs: add changeset

* Update .changeset/young-dots-tell.md

---------

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>
---
 .changeset/young-dots-tell.md                       | 6 ++++++
 packages/core/components/Icon.astro                 | 2 +-
 packages/www/src/content/docs/guides/components.mdx | 4 ++--
 3 files changed, 9 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/young-dots-tell.md

diff --git a/.changeset/young-dots-tell.md b/.changeset/young-dots-tell.md
new file mode 100644
index 0000000..42d31a9
--- /dev/null
+++ b/.changeset/young-dots-tell.md
@@ -0,0 +1,6 @@
+---
+"astro-icon": patch
+"www": patch
+---
+
+Replaces deprecated `xlink:href` attribute with standard `href` attribute
diff --git a/packages/core/components/Icon.astro b/packages/core/components/Icon.astro
index 6b2f881..6c61882 100644
--- a/packages/core/components/Icon.astro
+++ b/packages/core/components/Icon.astro
@@ -130,7 +130,7 @@ if (includeSymbol) {
     ) : (
       <Fragment>
         {includeSymbol && <symbol id={id} viewBox={viewBox} set:html={normalizedBody} />}
-        <use xlink:href={`#${id}`} />
+        <use href={`#${id}`} />
       </Fragment>
     )
   }
diff --git a/packages/www/src/content/docs/guides/components.mdx b/packages/www/src/content/docs/guides/components.mdx
index a7af98b..d6f6e1a 100644
--- a/packages/www/src/content/docs/guides/components.mdx
+++ b/packages/www/src/content/docs/guides/components.mdx
@@ -56,13 +56,13 @@ import { Icon } from 'astro-icon/components'
 <!-- First usage generates the following HTML -->
 <svg data-icon="logo">
 	<symbol id="ai:uniqueid"><!-- contents of /src/icons/logo.svg --></symbol>
-	<use xlink:href="#ai:uniqueid"></use>
+	<use href="#ai:uniqueid"></use>
 </svg>
 
 <Icon name="logo" />
 <!-- Additional usage generates the following HTML -->
 <svg data-icon="logo">
-	<use xlink:href="#ai:uniqueid"></use>
+	<use href="#ai:uniqueid"></use>
 </svg>
 ```