Merge branch 'main' into stramel-patch-1

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

.changeset/dry-peas-prove.md

@@ -0,0 +1,5 @@
+---
+"astro-icon": patch
+---
+
+Fixes an issue where `viewBox` was not correctly passed to `<symbol>` elements

packages/core/README.md

@@ -99,16 +99,17 @@ interface Props extends HTMLAttributes<"svg"> {
    * References a specific Icon
    */
   name: string;
+  "is:inline"?: boolean;
   title?: string;
-  size?: number;
-  width?: number;
-  height?: number;
+  desc?: string;
+  size?: number | string;
+  width?: number | string;
+  height?: number | string;
 }
 ```
 
 The `Icon` also accepts any global HTML attributes and `aria` attributes. They will be forwarded to the rendered `<svg>` element.
-
-See the [`Props.ts`](./packages/core/lib/Props.ts) file for more details.
+See the [`Props.ts`](./packages/core/components/Icon.astro#L10-L17) file for more details.
 
 ### Styling
 

packages/core/components/Icon.astro

@@ -6,11 +6,13 @@ import type { Icon } from "virtual:astro-icon";
 import { getIconData, iconToSVG } from "@iconify/utils";
 import type { HTMLAttributes } from "astro/types";
 import { cache } from "./cache.js";
+import type { IconifyIconBuildResult } from "@iconify/utils/lib/svg/build.js";
 
 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 +27,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);
@@ -110,18 +112,24 @@ if (props.size) {
   delete props.size;
 }
 const renderData = iconToSVG(iconData);
-const normalizedProps = { ...renderData.attributes, ...props };
+const normalizedProps = { ...renderData.attributes as Partial<IconifyIconBuildResult['attributes']>, ...props };
 const normalizedBody = renderData.body;
+
+const { viewBox } = normalizedProps;
+if (includeSymbol) {
+  delete normalizedProps.viewBox;
+}
 ---
 
 <svg {...normalizedProps} data-icon={name}>
   {title && <title>{title}</title>}
+  {desc && <desc>{desc}</desc>}
   {
     inline ? (
       <Fragment id={id} set:html={normalizedBody} />
     ) : (
       <Fragment>
-        {includeSymbol && <symbol id={id} set:html={normalizedBody} />}
+        {includeSymbol && <symbol id={id} viewBox={viewBox} set:html={normalizedBody} />}
         <use href={`#${id}`} />
       </Fragment>
     )

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;