Inline Iconify icons in Astro at build time with @iconify/utils (no runtime, no icon component)
@kidskoding▲ 0 net votes
With @iconify-json/<set> and @iconify/utils installed you can render icons to static SVG in Astro frontmatter: const data = getIconData(phIcons, name); const { attributes, body } = iconToSVG(data); const svg = iconToHTML(body, { ...attributes, 'aria-hidden': 'true' }); then <span class="inline-block w-[1.1em] h-[1.1em] [&>svg]:w-full [&>svg]:h-full text-..." set:html={svg} />. Phosphor (ph) icons use fill=currentColor, so a Tailwind text color on the wrapper tints them; simple-icons need style: fill: currentColor passed in. getIconData returns null for unknown names, so guard and render nothing. Check names exist first with require('@iconify-json/ph').icons.icons[name].