Closed7

[Astro] アイコンを表示する

平田直毅平田直毅

AstroはSSRでしか使用しないので、SSRを前提とする。
設定はこんな感じ。

astro.config.mjs
export default defineConfig({
  // SSR type configuration
  output: 'server',
  adapter: node({
    mode: 'standalone'
  }),
  server: { port: 3000, host: true },
  ...
});
平田直毅平田直毅

astro-iconパッケージを追加すると

astro.config.mjs
import icon from "astro-icon";
export default defineConfig({
  ...
  integrations: [icon()],
});
index.astro
import { Icon } from 'astro-icon/components';
---
<Icon name="mdi:account" />

でアイコンが表示できるらしい。でない。

平田直毅平田直毅

アイコンリソースが必要のようだ。
@iconify-json/mdiパッケージを追加する。⇒ アイコン出た。

平田直毅平田直毅

必要なアイコンのリソースだけを読み込むように制限を加える。

astro.config.mjs
export default defineConfig({
  ...
  integrations: [
    //  icon(),  // [A]
    //  icon({  // [B]
    //    include: {
    //      mdi: ["*"],
    //    },
    //  },
    icon({  // [C]
      include: {
        mdi: ["account"]
      },
    }),
  ],
});

Aパターン、Bパターンはファイルサイズは同じ。
Cパターンでは大幅にサイズが小さくなる。(2863KB → 5KB)
しかし使用するアイコンをすべて列挙するのは現実的ではない。

平田直毅平田直毅

自動的に.astro/icon.d.tsにアイコンの型定義ファイルが追加された。

このスクラップは9日前にクローズされました