Icon

The icon components provide a unified way to include SVG icons across the frontend. They handle loading, colors, and fallbacks, so you can use them consistently in buttons, forms, and dashboards.

There are three main classes:

IconAsset – Displays static SVGs from the /icons folder (e.g. the CARE logo). Only SVG files are supported here — other formats (PNG, JPG, …) are not allowed. Use this when you want to render application-specific assets that are not part of Bootstrap Icons.

IconBootstrap – Loads icons from the bundled Bootstrap icon set. This is the low-level building block behind BasicIcon and can be used directly if you need tight control.

IconLoading – Renders a simple spinner animation. Useful to indicate waiting states, either directly or via BasicIcon with iconName="loading".

Example for rendering the CARE logo with IconAsset:

<IconAsset
    name="logo"
    :height="200"
/>

import IconAsset from "@/basic/icon/IconAsset.vue";

export default {
  components: { IconAsset }
}

---

Usage hints:

• Use BasicIcon for most cases; it dynamically wraps IconBootstrap and shows a loader until the SVG is ready.

• Use IconAsset for application logos or other custom icons in /icons.

• Use IconLoading whenever you need a spinner (or pass loading as the iconName to BasicIcon).

All icon components support optional size, color, and accessibility-friendly defaults.