Spire Toolkit

Appearance

On this page

Icons ​

Configuration ​

If you're reading this, you're probably not a designer. However, we developers can do our best to enforce certain things:

  • Use the same Icon for the same Action every time
  • Make Icon changes (which the client will most likely request) easy

Open up @/config/icons.config.ts and you will find your Iconography configuration:

ts
import { Icons } from "@/framework/composables/useIcons"

export const icons = Icons({
    Car: "fa fa-car-side",
    User: {
        Profile: "bi bi-circle-user",
        Edit: "fa fa-pencil-user",
    },
})

INFO

Note how we used Bootstrap Icons and Fontawesome at the same time. Since this is nothing but a CSS-Class Map you can use whatever icon library you like, just make sure to import the css libraries in your styles.config.ts

Usage ​

You can use the <SpireIcon/> component to display any Icon. It takes an icon="" prop that will have nested IDE-Autocomplete for your Icon Configuration. Given the above Config, you would have autocomplete for Car, User.Edit and User.Profile

Using the Type ​

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