Icon | Buval

Icon

Icons take an important role of any application

The icon element is a container for any type of icon font. Because the icons can take a few seconds to load, and because you want control over the space the icons will take, you can use the icon class as a reliable square container that will prevent the page to "jump" on page load.

<span class="icon">
    <i class="fas fa-home"></i>
</span>

By default, the icon container will take up exactly 1.5rem x 1.5rem. The icon itself is sized accordingly to the icon library you're using. For example, Font Awesome 5 icons will inherit the font size.

Colors

Since icon fonts are simply text, you can use the text color modifiers to change the icon's color.

<span class="icon has-text-info">
    <i class="fas fa-info-circle"></i>
</span>
<span class="icon has-text-success">
    <i class="fas fa-check-square"></i>
</span>
<span class="icon has-text-warning">
    <i class="fas fa-exclamation-triangle"></i>
</span>
<span class="icon has-text-danger">
    <i class="fas fa-ban"></i>
</span>

Sizes

The icon container comes in 4 sizes. It should always be slightly bigger than the icon it contains. For example, Font Awesome 5 icons use a font-size of 1em by default (since it inherits the font size), but provides additional sizes.

The yellow background is only here for demonstration purposes, to highlight the icon container's area.

Container class	Container size	Font Awesome 5 class	Icon size
`icon is-small`	`1rem x 1rem`	`fas`	`1em`
`icon`	`1.5rem x 1.5rem`	`fas`	`1em`
`icon`	`1.5rem x 1.5rem`	`fab fa-lg`	`1.33em`
`icon is-medium`	`2rem x 2rem`	`fas`	`1em`
		`fab fa-lg`	`1.33em`
		`fab fa-2x`	`2em`
`icon is-large`	`3rem x 3rem`	`fas`	`1em`
		`fab fa-lg`	`1.33em`
		`fab fa-2x`	`2em`
		`fab fa-3x`	`3em`

Others

Here is how the icon container can be used with Material Design Icons.

Container class	Container size	MDI class	Icon size
`icon is-small`	`1rem x 1rem`	`mdi`	`1em`
`icon`	`1.5rem x 1.5rem`	`mdi mdi-18px`	`18px`
`icon`	`1.5rem x 1.5rem`	`mdi mdi-24px`	`24px`
`icon is-medium`	`2rem x 2rem`	`mdi`	`1em`
		`mdi mdi-18px`	`18px`
		`mdi mdi-24px`	`24px`
		`mdi mdi-36px`	`36px`
`icon is-large`	`3rem x 3rem`	`mdi`	`1em`
		`mdi mdi-18px`	`18px`
		`mdi mdi-24px`	`24px`
		`mdi mdi-36px`	`36px`
		`mdi mdi-48px`	`48px`

MDI also provides modifier classes for:

light and dark icons
rotated & flipped icons

Type	Material Design Icon class	Result
Light color	`mdi mdi-light`
Dark color	`mdi mdi-dark`
Light inactive color	`mdi mdi-light mdi-inactive`
Dark inactive color	`mdi mdi-dark mdi-inactive`
Flipped	`mdi mdi-flip-h` `mdi mdi-flip-v`
Rotated	`mdi mdi-rotate-45` `mdi mdi-rotate-90` `mdi mdi-rotate-180`

Container class	Container size	Ionicon class	Icon size
`icon is-small`	`1rem x 1rem`	`ionicons`	`1em`
`icon`	`1.5rem x 1.5rem`	`ionicons`	`1em`
`icon is-medium`	`2rem x 2rem`	`ionicons`	`1em`
`icon is-large`	`3rem x 3rem`	`ionicons`	`1em`

Buval is compatible with both Material Design Icons , FontAwesome 4 and FontAwesome 5 but you can also add your custom icon pack.
They adapt to most elements background automatically — but you can also override their colors.

Material Design Icons

<template>
    <section>
        <div class="block">
            <b-icon
                pack="mdi"
                icon="account"
                size="is-small">
            </b-icon>
            <b-icon
                pack="mdi"
                icon="home"
                size="is-small">
            </b-icon>
            <b-icon
                pack="mdi"
                icon="view-dashboard"
                size="is-small">
            </b-icon>
        </div>

        <div class="block">
            <b-icon pack="mdi" icon="account"></b-icon>
            <b-icon pack="mdi" icon="home"></b-icon>
            <b-icon pack="mdi" icon="view-dashboard"></b-icon>
        </div>

        <div class="block">
            <b-icon
                pack="mdi"
                icon="account"
                size="is-medium">
            </b-icon>
            <b-icon
                pack="mdi"
                icon="home"
                size="is-medium">
            </b-icon>
            <b-icon
                pack="mdi"
                icon="view-dashboard"
                size="is-medium">
            </b-icon>
        </div>

        <div class="block">
            <b-icon
                pack="mdi"
                icon="account"
                size="is-large"
                type="is-success">
            </b-icon>
            <b-icon
                pack="mdi"
                icon="home"
                size="is-large"
                type="is-info">
            </b-icon>
            <b-icon
                pack="mdi"
                icon="view-dashboard"
                size="is-large"
                type="is-primary">
            </b-icon>
        </div>

        <button class="button is-dark">
            <b-icon pack="mdi" icon="check"></b-icon>
            <span>Finish</span>
        </button>

        <button class="button is-warning">
            <b-icon pack="mdi" icon="check"></b-icon>
            <span>Finish</span>
        </button>
    </section>
</template>

Using far or fad while having FontAwesome free tier might have missing icons.

FontAwesome

<template>
    <section>
        <div class="block">
            <b-icon
                pack="fas"
                icon="user"
                size="is-small">
            </b-icon>
            <b-icon
                pack="fas"
                icon="home"
                size="is-small">
            </b-icon>
            <b-icon
                pack="fas"
                icon="tachometer-alt"
                size="is-small">
            </b-icon>
        </div>

        <div class="block">
            <b-icon
                pack="fas"
                icon="user">
            </b-icon>
            <b-icon
                pack="fas"
                icon="home">
            </b-icon>
            <b-icon
                pack="fas"
                icon="tachometer-alt">
            </b-icon>
        </div>

        <div class="block">
            <b-icon
                pack="fas"
                icon="user"
                size="is-medium">
            </b-icon>
            <b-icon
                pack="fas"
                icon="home"
                size="is-medium">
            </b-icon>
            <b-icon
                pack="fas"
                icon="tachometer-alt"
                size="is-medium">
            </b-icon>
        </div>

        <div class="block">
            <b-icon
                pack="fas"
                icon="user"
                size="is-large"
                type="is-success">
            </b-icon>
            <b-icon
                pack="fas"
                icon="home"
                size="is-large"
                type="is-info">
            </b-icon>
            <b-icon
                pack="fas"
                icon="tachometer-alt"
                size="is-large"
                type="is-primary">
            </b-icon>
        </div>

        <button class="button is-dark">
            <b-icon pack="fas" icon="check"></b-icon>
            <span>Finish</span>
        </button>

        <button class="button is-warning">
            <b-icon pack="fas" icon="check"></b-icon>
            <span>Finish</span>
        </button>

        <button class="button is-warning">
            <b-icon
                pack="fas"
                icon="sync-alt"
                custom-class="fa-spin">
            </b-icon>
            <span>Refresh</span>
        </button>
    </section>
</template>

You can set the defaultIconComponent constructor option to render icons with the vue-fontawesome component.

import { library } from '@fortawesome/fontawesome-svg-core';
// internal icons
import { faCheck, faCheckCircle, faInfoCircle, faExclamationTriangle, faExclamationCircle,
    faArrowUp, faAngleRight, faAngleLeft, faAngleDown,
    faEye, faEyeSlash, faCaretDown, faCaretUp, faUpload } 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, faUpload);
Vue.component('vue-fontawesome', FontAwesomeIcon);

// ...

import Buval from '@apolokak/buval'
Vue.use(Buval, {
  defaultIconComponent: 'vue-fontawesome',
  defaultIconPack: 'fas',
});

Object syntax

New! 0.7.0

You can also use object syntax for type props just like Vuejs class.

Green color

<template>
    <section>
        <b-checkbox v-model="isGreen">Green color</b-checkbox>

        <div class="block">
            <b-icon :type="{ 'is-success': isGreen }" icon="user"></b-icon>
            <b-icon :type="{ 'is-success': isGreen }" icon="home"></b-icon>
            <b-icon :type="{ 'is-success': isGreen }" icon="tachometer-alt"></b-icon>
        </div>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                isGreen: true
            }
        }
    }
</script>

Custom Icon Pack

New! 0.8.3

You can also add your own custom font (Ionicons is used in this example).

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

<template>
    <section>
        <div class="block">
            <b-icon
                pack="ionicons"
                icon="person"
                size="is-small">
            </b-icon>
            <b-icon
                pack="ionicons"
                icon="home"
                size="is-small">
            </b-icon>
            <b-icon
                pack="ionicons"
                icon="apps"
                size="is-small">
            </b-icon>
        </div>

        <div class="block">
            <b-icon
                pack="ionicons"
                icon="person">
            </b-icon>
            <b-icon
                pack="ionicons"
                icon="home">
            </b-icon>
            <b-icon
                pack="ionicons"
                icon="apps">
            </b-icon>
        </div>

        <div class="block">
            <b-icon
                pack="ionicons"
                icon="person"
                size="is-medium">
            </b-icon>
            <b-icon
                pack="ionicons"
                icon="home"
                size="is-medium">
            </b-icon>
            <b-icon
                pack="ionicons"
                icon="apps"
                size="is-medium">
            </b-icon>
        </div>

        <div class="block">
            <b-icon
                pack="ionicons"
                icon="person"
                size="is-large"
                type="is-success">
            </b-icon>
            <b-icon
                pack="ionicons"
                icon="home"
                size="is-large"
                type="is-info">
            </b-icon>
            <b-icon
                pack="ionicons"
                icon="apps"
                size="is-large"
                type="is-primary">
            </b-icon>
        </div>

        <button class="button is-dark">
            <b-icon pack="ionicons" icon="checkmark"></b-icon>
            <span>Finish</span>
        </button>

        <button class="button is-warning">
            <b-icon pack="ionicons" icon="checkmark"></b-icon>
            <span>Finish</span>
        </button>

        <button class="button is-warning">
            <b-icon
                pack="ionicons"
                icon="refresh">
            </b-icon>
            <span>Refresh</span>
        </button>

        <div class="block">
            <p>
                Can also customize some properties of the default icon packs. In this example, default sizes for FontAwesome have been modified.
            </p>
            <b-icon
                pack="mdi"
                icon="account"
                size="is-small"
                type="is-success">
            </b-icon>
            <b-icon
                pack="mdi"
                icon="account"
                type="is-info">
            </b-icon>
            <b-icon
                pack="mdi"
                icon="account"
                size="is-medium"
                type="is-danger">
            </b-icon>
            <b-icon
                pack="mdi"
                icon="account"
                size="is-large"
                type="is-primary">
            </b-icon>
        </div>
    </section>
</template>

<script>
    const customIconConfig = {
        customIconPacks: {
            'mdi': {
                sizes: {
                    'default': 'mdi-24px',
                    'is-small': 'mdi-18px',
                    'is-medium': 'mdi-36px',
                    'is-large': 'mdi-48px'
                }
            },
            'ionicons': {
                sizes: {
                    'default': 'is-size-5',
                    'is-small': '',
                    'is-medium': 'is-size-3',
                    'is-large': 'is-size-1'
                },
                iconPrefix: 'ion-md-',
                internalIcons: {
                    'check': 'checkmark',
                    'information': 'information',
                    'check-circle': 'checkmark-circle-outline',
                    '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',
                    'menu-down': 'arrow-dropdown',
                    'menu-up': 'arrow-dropup'
                }
            }
        }
    }
    export default {
        created() {
            this.$buval.config.setOptions(customIconConfig)
        }
    }
</script>

API

Name	Description	Type	Value	Default
`type`	Type (color) of the icon, optional	String, Object	`is-white`, `is-black`, `is-light`, `is-dark`, `is-primary`, `is-mix`, `is-info`, `is-success`, `is-warning`, `is-danger`, and any other colors you've set in the `$colors` list on Sass	—
`pack`	Icon pack to use	String	`mdi`, `fa`, `fas`, `far`, `fad`, `fal`	`fa`
`icon`	Icon name	String	—	—
`size`	Icon size, optional	String	`is-small`, `is-medium`, `is-large`	—
`custom-size`	Overrides icon font size, optional	String	Depends on library: `null` (smallest), `fa-lg`, `fa-2x`, `fa-3x`, `fa-4x`, `fa-5x`, `mdi-18px`, `mdi-24px`, `mdi-36px`, `mdi-48px`	Depends on `size` prop
`custom-class`	Add class to icon font (`<i>` tag), optional. See here for MDI, here for FontAwesome 4 and here for FontAwesome 5 custom classes	String	—	—

Variables #

You can use these variables to customize, Simply set one or multiple of these variables before importing Buval. Learn how.

Name	Type	Default
`$icon-dimensions`	size	`1.5rem`
`$icon-dimensions-small`	size	`1rem`
`$icon-dimensions-medium`	size	`2rem`
`$icon-dimensions-large`	size	`3rem`
`$icon-svg-height`	size	`1.5rem`
`$icon-svg-width`	size	`1.5rem`