Easily download images at build time!
Supports Iconify icons and arbitrary images.

At build time, Astro Preload downloads the images from the provided urls and saves them to public/assets/preloaded/.

Can be useful in combination with tools like astro-compress or to avoid including remote assets at runtime.

In development mode Astro Preload will forward the urls directly, to avoid downloading the files multiple times.

npx astro add astro-preload
# or
yarn astro add astro-preload

Remember to move the integration import function before any other imports.

import { defineConfig } from "astro/config";
import compress from "astro-compress";
import preload from "astro-preload";

export default defineConfig({
  integrations: [preload(), compress()]
});

Get icon from Iconify:

---
import { Icon } from "astro-preload/components";
---
<!-- Automatically fetches and downloads Material Design Icon's "github" SVG -->
<Icon pack="mdi" name="github" />

<!-- Equivalent shorthand -->
<Icon name="mdi:github" />

Get image from arbitrary URL:

---
import { Image } from "astro-preload/components";
---
<!-- Automatically fetches and downloads image -->
<Image url="https://examplecat.com/cat.png" />

The Icon component accepts the following props:

• name: The name of the icon. Follows the format <pack>:<name>.
• pack: The pack of the icon. Can be skipped if a name with shorthand is provided.
• size: The size of the icon. Applied to both width and height.
• url: The URL of the icon. Overrides default Iconify URL.

The Image component accepts the following props:

• name: The name of the downloaded image. If not provided it will try to be inferred from the url.
• url: The URL of the image.
• size: The size of the image. Applied to both width and height.

Any other props are passed to the wrapped <img> tag.