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
パッケージを追加する。⇒ アイコン出た。
SSRの場合はアイコンリソースがすべて読み込まれてしまうようだ。
ここのアイコンが使える。
必要なアイコンのリソースだけを読み込むように制限を加える。
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日前にクローズされました