CodeGrid 12th Event Site

astro-iconを使ったアイコンの実装と管理

全2回

Astroプロジェクトで、よりパフォーマンスやアクセシビリティに配慮したアイコン実装ができるastro-iconを紹介します。SVGのスプライト化も少ない労力でできます。

後編 アイコンのスタイリングとスプライト化

astroファイルに実装したアイコンのCSSによるスタイリングと、パフォーマンスに配慮したスプライト化の方法について解説します。またiconifyによらないローカルのSVGファイルをアイコンとして実装する方法についても触れます。

前編 astro-iconのメリットと基本的な使い方

Astroで開発をしているなら、アイコンの実装はastro-iconが便利です。前編は従来のアイコン実装との違いや、astro-iconを用いたアイコンの基本的な実装方法を解説します。