feat(desc): support desc svg tag. (#247)

* feat(desc): support desc svg tag. * Create curvy-lions-dream.md --------- Co-authored-by: christinamartinez <[email protected]> Co-authored-by: Nate Moore <[email protected]>
natemoo-re · Nov 5, 2024 · fce07f1 · fce07f1
1 parent 4060744
commit fce07f1
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 1 deletion.
diff --git a/.changeset/curvy-lions-dream.md b/.changeset/curvy-lions-dream.md
@@ -0,0 +1,5 @@
+---
+"astro-icon": patch
+---
+
+Adds a `desc` prop shorthand which maps to the SVG `<desc>` tag, similar to `title`.
diff --git a/packages/core/README.md b/packages/core/README.md
@@ -101,6 +101,7 @@ interface Props extends HTMLAttributes<"svg"> {
   name: string;
   "is:inline"?: boolean;
   title?: string;
+  desc?: string;
   size?: number | string;
   width?: number | string;
   height?: number | string;

diff --git a/packages/core/components/Icon.astro b/packages/core/components/Icon.astro
@@ -11,6 +11,7 @@ interface Props extends HTMLAttributes<"svg"> {
   name: Icon;
   "is:inline"?: boolean;
   title?: string;
+  desc?: string;
   size?: number | string;
   width?: number | string;
   height?: number | string;
@@ -25,7 +26,7 @@ class AstroIconError extends Error {
 }
 
 const req = Astro.request;
-const { name = "", title, "is:inline": inline = false, ...props } = Astro.props;
+const { name = "", title, desc, "is:inline": inline = false, ...props } = Astro.props;
 const map = cache.get(req) ?? new Map();
 const i = map.get(name) ?? 0;
 map.set(name, i + 1);
@@ -116,6 +117,7 @@ const normalizedBody = renderData.body;
 
 <svg {...normalizedProps} data-icon={name}>
   {title && <title>{title}</title>}
+  {desc && <desc>{desc}</desc>}
   {
     inline ? (
       <Fragment id={id} set:html={normalizedBody} />

diff --git a/packages/www/src/content/docs/guides/components.mdx b/packages/www/src/content/docs/guides/components.mdx
@@ -30,6 +30,8 @@ interface Props extends HTMLAttributes<"svg"> {
   name: string;
   /** Shorthand for including a <title>{props.title}</title> element in the SVG */
   title?: string;
+  /** Shorthand for including a <desc>{props.desc}</desc> element in the SVG */
+  desc?: string;
   /** Shorthand for setting width and height */
   size?: number | string;
   width?: number | string;