Icon

The Icon component helps to display icons the right way. Icons are an important part of any application. Oruga is compatible with both Material Design Icons and FontAwesome 5 but you can also add your own custom icon pack.

Examples

Base

Show code

HTML

<section class="odocs-spaced">
    <p>
        <o-icon pack="fas" icon="user" size="small" />
        <o-icon pack="fas" icon="home" size="small" />
        <o-icon pack="fas" icon="tachometer-alt" size="small" />
    </p>

    <p>
        <o-icon pack="fas" icon="user" />
        <o-icon pack="fas" icon="home" />
        <o-icon pack="fas" icon="tachometer-alt" />
    </p>

    <p>
        <o-icon pack="fas" icon="user" size="medium" />
        <o-icon pack="fas" icon="home" size="medium" />
        <o-icon pack="fas" icon="tachometer-alt" size="medium" />
    </p>

    <p>
        <o-icon pack="fas" icon="user" size="large" variant="success" />
        <o-icon pack="fas" icon="home" size="large" variant="info" />
        <o-icon
            pack="fas"
            icon="tachometer-alt"
            size="large"
            variant="primary" />
    </p>

    <p>
        <o-button variant="success">
            <o-icon pack="fas" icon="check" />
            <span>Finish</span>
        </o-button>

        <o-button variant="warning">
            <o-icon pack="fas" icon="check" />
            <span>Finish</span>
        </o-button>

        <o-button variant="warning">
            <o-icon pack="fas" icon="sync-alt" spin />
            <span>Refresh</span>
        </o-button>
    </p>
</section>

Custom icon pack

You can also add it during Oruga import as default config.

TIP

Take a look at below example code (click on "Show code") to know all internal icons to replace with the releated icons of your custom icon pack

Show code

HTML

<section class="odocs-spaced">
    <p>
        <o-icon pack="ionicons" icon="person" size="small" />
        <o-icon pack="ionicons" icon="home" size="small" />
        <o-icon pack="ionicons" icon="apps" size="small" />
    </p>

    <p>
        <o-icon pack="ionicons" icon="person" />
        <o-icon pack="ionicons" icon="home" />
        <o-icon pack="ionicons" icon="apps" />
    </p>

    <p>
        <o-icon pack="ionicons" icon="person" size="medium" />
        <o-icon pack="ionicons" icon="home" size="medium" />
        <o-icon pack="ionicons" icon="apps" size="medium" />
    </p>

    <p>
        <o-icon
            pack="ionicons"
            icon="person"
            size="large"
            variant="success" />
        <o-icon pack="ionicons" icon="home" size="large" variant="info" />
        <o-icon
            pack="ionicons"
            icon="apps"
            size="large"
            variant="primary" />
    </p>

    <p>
        <o-button variant="primary">
            <o-icon pack="ionicons" icon="checkmark" />
            <span>Finish</span>
        </o-button>

        <o-button variant="warning">
            <o-icon pack="ionicons" icon="checkmark" />
            <span>Finish</span>
        </o-button>

        <o-button variant="warning">
            <o-icon spin pack="ionicons" icon="refresh" />
            <span>Refresh</span>
        </o-button>
    </p>
</section>

JS

import { ref, onBeforeMount, onBeforeUnmount } from "vue";
import { useOruga, type OrugaConfig } from "@oruga-ui/oruga-next";

const customIconPacks = {
    ionicons: {
        sizes: {
            default: "is-size-5",
            small: "",
            medium: "is-size-3",
            large: "is-size-1",
        },
        iconPrefix: "ion-md-",
        internalIcons: {
            check: "checkmark",
            information: "information",
            alert: "alert",
            "alert-circle": "alert",
            "arrow-up": "arrow-up",
            "chevron-right": "arrow-forward",
            "chevron-left": "arrow-back",
            "chevron-down": "arrow-down",
            eye: "eye",
            "eye-off": "eye-off",
            "caret-down": "arrow-dropdown",
            "caret-up": "arrow-dropup",
            loading: "reload-outline",
            times: "close-outline",
            "close-circle": "close-circle-outline",
        },
    },
};

// all code is only for example purpose

const orugaConfig = ref<OrugaConfig>({});

const oruga = useOruga();

onBeforeMount(() => {
    // save old config settings
    orugaConfig.value = oruga.config.getConfig();
    // override custom config settings
    oruga.config.setOption("iconComponent", undefined);
    oruga.config.setOption("customIconPacks", customIconPacks);
});

onBeforeUnmount(() => {
    // restore old settings
    oruga.config.setConfig(orugaConfig.value);
});

SCSS

@import "https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css";

Override icon pack

You can also customize some properties of the default icon packs. In this example, default sizes for FontAwesome have been modified.

Hide code

JS

const customIconConfig = {
    customIconPacks: {
        fas: {
            sizes: {
                default: null,
                small: null,
                medium: "fa-lg",
                large: "fa-xl"
            }
        }
    }
}

import Oruga from "@oruga-ui/oruga";
app.use(Oruga, {
    iconComponent: "vue-fontawesome",
    iconPack: "fas",
    ...customIconConfig
}); ```

Custom icon component

TIP

You can set the `iconComponent` config option to render icons with the vue-fontawesome component (it should work with other Vue icon components as well).

Hide code

JS

import { library } from "@fortawesome/fontawesome-svg-core";
// internal icons
import {
    faCheck,
    faCheckCircle,
    faInfoCircle,
    faExclamationTriangle,
    faExclamationCircle,
    faArrowUp,
    faAngleRight,
    faAngleLeft,
    faAngleDown,
    faEye,
    faEyeSlash,
    faCaretDown,
    faCaretUp
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

library.add(
    faCheck,
    faCheckCircle,
    faInfoCircle,
    faExclamationTriangle,
    faExclamationCircle,
    faArrowUp,
    faAngleRight,
    faAngleLeft,
    faAngleDown,
    faEye,
    faEyeSlash,
    faCaretDown,
    faCaretUp
);
app.component("vue-fontawesome", FontAwesomeIcon);

// ...

import Oruga from "@oruga-ui/oruga";
app.use(Oruga, {
    iconComponent: "vue-fontawesome",
    iconPack: "fas"
}); ```

Icon Component

Icons take an important role of any application.

<o-icon></o-icon>

Props

Prop name	Description	Type	Values	Default
clickable	Makes the icon interactive by clicking and focusable	boolean	-	false
component	Icon component name	DynamicComponent	-	From config: {   iconComponent: undefined }
customClass	Add class to icon font. See icon library documentation for custom classes.	string	-
customSize	Overrides icon font size	string	Depends on library: null (smallest), fa-sm, fa-lg, fa-xl, mdi-18px, mdi-24px, mdi-36px, mdi-48px
icon	Icon name	string	-
override	Override existing theme classes completely	boolean	-
pack	Icon pack to use	string	mdi, fa, fas and any other custom icon pack	From config: {   iconPack: "mdi" }
rotation	Rotation 0-360	number | string	-
size	Icon size	string	small, medium, large	From config: icon: {   size: undefined }
spin	Enable spin effect on icon	boolean	-	false
variant	Color of the icon	string	primary, info, success, warning, danger, and any other custom color	From config: icon: {   variant: undefined }

Events

Event name	Properties	Description
click	event event - native event	on item click event

Class Inspector

Classes applied to the element:

➜ Want to know how does the Class Inspector work?

Class props inspector is useful to see class props you want to use to customize Oruga components and how they change a component. You can click on Inspect button to find the exact element where a specific class prop acts.

In the Class props inspector there are other columns:

Class prop

This column contains the name of the Class prop you want to inspect.
If you find a name with a link ( ▷ classPropName) this refers to a subitem (e.g. Dropdown Item in Dropdown).

Description

This column contains the description of the Class prop you want to inspect.
👉 This icon indicates some warning, e.g. this Class prop is visible only on mobile.

Props

This column contains a list of props that activate the class, e.g. if a class prop contains disabled prop it means that only when the component has disabled prop.

Suffixes

This column contains all the possible suffixes that you'll receive if you use a function to customize your Class prop.

Class prop	Description	Props	Suffixes
rootClass	Class of the root element.
sizeClass	Class of the root element with size.	size	small medium large
variantClass	Class of the root element with variant.	variant	primary info warning danger
clickableClass	Class of the root element when clickable.	clickable
spinClass	Class of the root element when spin.	spin

Sass Variables

Current theme ➜ Oruga

SASS Variable	Default
$icon-color	inherit
$icon-font-size	inherit
$icon-spin-animation-duration	2s

See ➜ 📄 SCSS file

Current theme ➜ Bulma

SASS Variable	Default
$icon-spin-duration	2s

See ➜ 📄 SCSS file

Current theme ➜ Bootstrap

SASS Variable	Default
$icon-spin-animation-duration	1.5s

See ➜ 📄 SCSS file