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

export default defineConfig({
  // SSR type configuration
  output: 'server',
  adapter: node({
    mode: 'standalone'
  }),
  server: { port: 3000, host: true },
  ...
});

import icon from "astro-icon";
export default defineConfig({
  ...
  integrations: [icon()],
});

import { Icon } from 'astro-icon/components';
---
<Icon name="mdi:account" />

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

import { Icon } from '@iconify/vue'
あるいは
import { Icon } from '@iconify/react'

<Icon icon="mdi:home" />

import react from '@astrojs/react'
import vue from "@astrojs/vue"
import Icons from 'unplugin-icons/vite'

export default defineConfig({
  ...
  integrations: [react(), vue()],
  vite: {
    plugins: [Icons()]
  }
})

import CheckFill from "~icons/ph/check-fill"

<CheckFill color="red" width="500" height="500" />

Cannot read properties of null (reading 'useCallback')

import icon from 'astro-icon'
import Icons from 'unplugin-icons/vite'

export default defineConfig({
  ...
  integrations: [
    ...
    icon({
      include: {
        mdi: ['*']
      }
    })
  ],
  vite: {
    plugins: [Icons()]
  }
})