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]>

Author: 3 people

.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`.

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;

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} />

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;