Astro-cached-icon NPM

astro-cached-icon

This package is still in beta, don't use in production Effortlessly integrate Iconify icons into your Astro projects with caching and bundling for optimal performance.

Features

Seamless integration with Astro: Works effortlessly within Astro's component model.
Iconify compatibility: Leverages the vast collection of icons from Iconify.
Caching and bundling: Optimizes loading times by caching icons and bundling them into your Astro project.
Existence check: Ensures icons are available before rendering, preventing errors.
TypeScript support: Provides type safety and enhanced code completion.
Flexible usage: Supports both name and pack props or a combined icon prop for convenient icon selection.
Customizable SVG attributes: Allows for fine-grained control over SVG attributes.

Motive

this package is heavily inspired by

astro-icon
astro-preload and is basically created to fix their shortcomings

Installation

npm install astro-cached-icon

just import and use

import Icon from 'astro-cached-icon';

Usage

<Icon name="home" pack="mdi" />

or the shorthand

this is preferred
<Icon icon="mdi:home" />

it also takes normal SVG attributes

<Icon name="home" pack="mdi" width="24" height="24" class="icon-custom" style="color: red;" />

recommendations

use Iconify Intellisence VSCode extention if working with vscode to get preview and completion. VSCode

Additional notes

Refer to the Iconify documentation for available icon packs and names: https://iconify.design/
For more advanced usage and configuration options, check out the package's GitHub repository.