https://github.com/lyonsyonii/astro-preload
Download images at build time! Supports Iconify icons and arbitrary images.
https://github.com/lyonsyonii/astro-preload
Last synced: about 1 year ago
JSON representation
Download images at build time! Supports Iconify icons and arbitrary images.
- Host: GitHub
- URL: https://github.com/lyonsyonii/astro-preload
- Owner: LyonSyonII
- Created: 2023-06-09T16:39:13.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-10-19T08:28:07.000Z (over 2 years ago)
- Last Synced: 2025-04-13T03:09:47.331Z (about 1 year ago)
- Language: Astro
- Size: 342 KB
- Stars: 32
- Watchers: 2
- Forks: 2
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Astro Preload
Easily download images at build time!
Supports [Iconify](https://icon-sets.iconify.design/) icons and arbitrary images.
## What does it do?
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](https://github.com/astro-community/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.
## Install
```bash
npx astro add astro-preload
# or
yarn astro add astro-preload
```
Remember to move the integration import function before any other imports.
```mjs
import { defineConfig } from "astro/config";
import compress from "astro-compress";
import preload from "astro-preload";
export default defineConfig({
integrations: [preload(), compress()]
});
```
## Usage
Get icon from Iconify:
```astro
---
import { Icon } from "astro-preload/components";
---
```
Get image from arbitrary URL:
```astro
---
import { Image } from "astro-preload/components";
---
```
## API
The **Icon** component accepts the following props:
- `name`: The name of the icon. Follows the format `:`.
- `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 `![]()
` tag.