Download images at build time! Supports Iconify icons and arbitrary images.
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.