fix: move viewBox to symbol (#246)

* fix: move viewbox to symbol * Create dry-peas-prove.md --------- Co-authored-by: Nate Moore <[email protected]>
natemoo-re · Nov 5, 2024 · 4c5da33 · 4c5da33
1 parent fce07f1
commit 4c5da33
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/.changeset/dry-peas-prove.md b/.changeset/dry-peas-prove.md
@@ -0,0 +1,5 @@
+---
+"astro-icon": patch
+---
+
+Fixes an issue where `viewBox` was not correctly passed to `<symbol>` elements
diff --git a/packages/core/components/Icon.astro b/packages/core/components/Icon.astro
@@ -6,6 +6,7 @@ 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;
@@ -111,8 +112,13 @@ 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}>
@@ -123,7 +129,7 @@ const normalizedBody = renderData.body;
       <Fragment id={id} set:html={normalizedBody} />
     ) : (
       <Fragment>
-        {includeSymbol && <symbol id={id} set:html={normalizedBody} />}
+        {includeSymbol && <symbol id={id} viewBox={viewBox} set:html={normalizedBody} />}
         <use xlink:href={`#${id}`} />
       </Fragment>
     )