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 bothwidth
andheight
.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 bothwidth
andheight
.
Any other props are passed to the wrapped <img>
tag.