📌
Astroインテグレーションの概要
はじめに
社内で「ウェブサイトを作成するためにAstroの環境構築を行っているが、astro-iconが使えない」という相談を受けました。原因はAstroインテグレーションが未設定だったことにありました。私自身もドキュメントに従うだけで仕様を完全に理解していなかったため、今回改めて調査しました。
Astroインテグレーションとは
Astroインテグレーションとは、開発中のプロジェクトに公式やコミュニティ、自作の機能を追加できる、Astroが提供するサービスの一つです。
（「インテグレーション」自体は、「複数のものをまとめる、統合する」などといった意味だそうです。使い方あっているのかな？）
これにより、下記のメリットがあります。
- siteマップなどの自動生成
- 画像などの最適化
- svgなどを呼び出すときのコードの簡略化
- react、vue.jsなどのフレームワークを導入可能
Astroインテグレーションの一覧
Astroインテグレーションは、以下のURLから確認できます。
Astroインテグレーションの導入
astro-iconを例に、プロジェクトにインテグレーションを導入する手順を紹介します。
まず、使用するパッケージをインストールします。
（今回は、astro-icon)
npm install astro-icon
続いて、astro.config.mjsでインテグレーションを設定します。
astro.config.mjsはプロジェクトのAstroをカスタマイズするためのファイルです。
import { defineConfig } from "astro/config";
import icon from "astro-icon";
export default defineConfig({
integrations: [icon()],
});
次に、srcディレクトリの配下にiconsディレクトリを作成し、その中にsvgファイルを格納します。
例: star.svg
最後に、astro-iconを呼び出したいファイルでastro-iconを使用します。
---
import { Icon } from 'astro-icon/components';
---
<Icon name="star" />
詳細は、以下のURLから確認できます。
おわりに
今回は、「Astroインテグレーション」に関する紹介でした。
最後まで読んでいただき、ありがとうございました！
Discussion