Icon

The bt-icon is an alternate way to integrate icons in your views.

NOTE

This part of the documentation assume that you are familiar with the basic concepts of how icons work in Banquette. Read this part of the documentation first if you're not.

Usage

Instead of writing:

<i-material-home/>

You can write:

<bt-icon name="home" />

You can also specify the icon set you want to use:

<bt-icon name="home" set="remix" />

WARNING

You have to import the icon in your project before you use it. For example, if you do:

<bt-icon name="home" />

You have to import:

import "@banquette/vue-material-icons/homed";

or the following error will show in the console:

Icon "home" of set "material" doesn't exist. You can import it by doing: import "@banquette/vue-material-icons/home";

Theming

The main advantage of using this component instead of the individual components, is the theming.

Because you have a single component to reference, you can for example do this:

import { VueThemes } from "@banquette/vue-typescript";

VueThemes.Define('bt-icon', {
    '*': [
        // Force all icons to use the "remix" set by default.
        {
            match: VariantWildcard,
            props: {
                set: 'remix'
            }
        },
        
        // Sizes variants
        {
            match: 'sm',
            props: {
                size: '.875em',
            }
        },
        {
            match: 'lg',
            props: {
                size: '1.25em',
            }
        }
    ],
});

This would not be possible with individual icons because they each have their own name, and the theming system is based on that.

Props

Method	Description	Default
name	Name of the icon.	undefined
set	Name of the icon set to use.	'material'