Spire Toolkit

Appearance

On this page

Assets / Images ​

Configuration ​

The same rules for Icons also apply to Images, so they use a pretty similar system

Open up @/config/images.config.ts and you will find your Image configuration:

ts
import { Images } from "@/framework/composables/useAssets"
import SwissMadeSoftware from "@/assets/images/swiss-made-software.svg"

export const images = Images({
    SwissMadeSoftware: SwissMadeSoftware,
    Logo: {
        Black: async () => import("@/assets/images/logo-black.svg"),
        White: async () => import("@/assets/images/logo-white.svg"),
    },
})

INFO

Note how we can either synchronously import them, or use an async import function to load those images on demand. This can be helpful for performance optimization since you could "preload" certain images that are always there, while leaving others on-demand.

Usage ​

You can use the <SpireImage/> component to display any Icon. It takes an image="" prop that will have nested IDE-Autocomplete for your Icon Configuration. Given the above Config, you would have autocomplete for SwissMadeSoftware, Logo.Black and Logo.White

Using the Type ​

For advanced usecase, like requiring a prop to be of a type Icon in a component you can use the Type AnyImage which is an alias for DeepKeys<typeof images>.