Zenn
Closed1

Astro で Iconify を使うべくいろいろ格闘した話

Astro
#
iconify
r4air4ai

結論

  • @iconify/iconifyを使って、SVG を直接生成した
  • SVG の生成をラップする Astro コンポーネントを自作した
Icon.astro
---
import Iconify from "@iconify/iconify";

interface Props {
  icon: string;
  class?: string;
}

const props = Astro.props;

const getIconSvg = async (icon: string) => {
  await Iconify.loadIcon(icon);

  const iconData = Iconify.getIcon(icon);
  if (!iconData) throw new Error(`Icon ${icon} not found`);

  return (
    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${iconData.left} ${iconData.top} ${iconData.width} ${iconData.height}" fill="none" style="width:100%">` +
    iconData.body +
    "</svg>"
  );
};
---

<div set:html={await getIconSvg(props.icon)} class={props.class} />

使い方：

App.astro
<Icon class="w-32" icon="fluent-emoji:robot" />

試したこと

  • astro-icon: iconify のバージョンが古く、欲しいものが使えなかった。
  • @iconify/tailwind: iconの指定に変数を利用した際になぜか Icon が表示されず使えなかった。
    OK
    <span class="fluent-emoji:robot" />
    NG
    ---
const icon = "icon" + "-" + "[fluent-emoji--building-construction]";
---
<span class={`${icon} text-8xl`}></span>
  • @iconify/react: client サイドで javascrit を実行しないと画像が表示されないので、Astro との相性を考えて使わなかった。

Iconify を使って完成したページ

https://r4ai.dev/posts/astro-iconify

このスクラップは2023/09/05にクローズされました