diff --git a/.changeset/curvy-lions-dream.md b/.changeset/curvy-lions-dream.md new file mode 100644 index 0000000..e91381e --- /dev/null +++ b/.changeset/curvy-lions-dream.md @@ -0,0 +1,5 @@ +--- +"astro-icon": patch +--- + +Adds a `desc` prop shorthand which maps to the SVG `` tag, similar to `title`. diff --git a/.changeset/dry-peas-prove.md b/.changeset/dry-peas-prove.md new file mode 100644 index 0000000..e2f14dc --- /dev/null +++ b/.changeset/dry-peas-prove.md @@ -0,0 +1,5 @@ +--- +"astro-icon": patch +--- + +Fixes an issue where `viewBox` was not correctly passed to `` elements diff --git a/packages/core/README.md b/packages/core/README.md index bd954c6..e2649cb 100644 --- a/packages/core/README.md +++ b/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 `` 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 diff --git a/packages/core/components/Icon.astro b/packages/core/components/Icon.astro index 3abb86f..6c61882 100644 --- a/packages/core/components/Icon.astro +++ b/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, ...props }; const normalizedBody = renderData.body; + +const { viewBox } = normalizedProps; +if (includeSymbol) { + delete normalizedProps.viewBox; +} --- {title && {title}} + {desc && {desc}} { inline ? ( ) : ( - {includeSymbol && } + {includeSymbol && } ) diff --git a/packages/www/src/content/docs/guides/components.mdx b/packages/www/src/content/docs/guides/components.mdx index bde81fd..d6f6e1a 100644 --- 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 {props.title} element in the SVG */ title?: string; + /** Shorthand for including a {props.desc} element in the SVG */ + desc?: string; /** Shorthand for setting width and height */ size?: number | string; width?: number | string;