Skip to content

Icon

Icons take an important role of any application

Examples

Oruga is compatible with both Material Design Icons and FontAwesome 5 but you can also add your own custom icon pack.

Base

Show code

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

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
javascript
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
javascript
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"
}); ```

Class props

'Classes applied to the element'

Icon component

Icons take an important role of any application

html
<o-icon></o-icon>

Props

Prop nameDescriptionTypeValuesDefault
clickableWhen true makes icon clickableboolean-false
componentIcon component nameunknown-
From config:
{
  iconComponent: undefined
}
customSizeOverrides icon font sizestringDepends on library: null (smallest), fa-sm, fa-lg, fa-xl, mdi-18px, mdi-24px, mdi-36px, mdi-48px
iconIcon namestring-
overrideOverride existing theme classes completelyboolean-
packIcon pack to usestringmdi, fa, fas and any other custom icon pack
From config:
{
  iconPack: "mdi"
}
rotationRotation 0-360string | number-
sizeIcon sizestringsmall, medium, large
From config:
icon: {
  size: undefined
}
spinEnable spin effect on iconboolean-false
variantColor of the iconstringprimary, info, success, warning, danger, and any other custom color
From config:
icon: {
  variant: undefined
}

Sass variables

Current theme ➜ Oruga

SASS VariableDefault
$icon-spin-duration2s

See ➜ 📄 Full scss file

Current theme ➜ Bulma

SASS VariableDefault
$icon-spin-duration2s

See ➜ 📄 Full scss file

Current theme ➜ Bootstrap

SASS VariableDefault
$icon-spin-animation-duration1.5s

See ➜ 📄 Full scss file

Released under the MIT License.