Basic concepts

There are two packages of icons in Banquette:

• vue-material-icons: for the Google Material icons set,
• vue-remix-icons: for the Remix icons set.

Their role is to offer a Vue integration of the icons by creating a component for each of them.

Each component is a wrapper around the svg provided by the libraries. This way, you can do this:

<i-material-home/>

Or this for the Remix version:

<i-remix-home/>

The naming rule is simple:

<i-[ICON_SET]-[KEBAB_CASE_ICON_NAME]/>

Color

You can control the color of the icon with the color prop:

<i-material-home color="lime"/>

Or with a variable:

<i-material-home color="var(--bt-color-primary)"/>

Size

You can also control the size via the width and height props:

<i-material-home width="3rem"/>

By default, if no size is specified, the height is set to 1em. This way the icon is the same size as the text around.

Cropping

A useful functionality added by the Vue integration, is the cropping. Here is what it means:

<i-material-check height="5rem"/>

<i-material-check height="5rem" crop/>

As you can see, adding the crop prop will remove all the whitespace around the illustration.

This is useful if you use the icon in a container that you don't want to increase in height to have the icon at the expected size. For example:

<bt-button variant="success">
    <i-material-check /> Validate
</bt-button>

<bt-button variant="success">
    <i-material-check crop/> Validate
</bt-button>

If the icon gets too big when cropped, you can always resize it:

<bt-button variant="success">
    <i-material-check height="0.8em" crop/> Validate
</bt-button>

Versions

If the icon set defines multiple versions for a single icon (like Material does), they are part of the generated component. You can select the version via the version prop:

Default : <i-material-lock-clock version="default"/></p>
Outlined : <i-material-lock-clock version="outlined"/></p>
Filled : <i-material-lock-clock version="filled"/></p>
Rounded : <i-material-lock-clock version="rounded"/></p>
Sharp : <i-material-lock-clock version="sharp"/></p>
Two tone : <i-material-lock-clock version="twotone"/></p>

Default:

Outlined:

Filled:

Rounded:

Sharp:

Two tone:

By default, the version is default.

Props

Method	Description	Default
width	Width of the icon.	null
height	Height of the icon.	1em
color	Color of the icon.	'currentColor'
crop	If true the whitespaces around the icon are removed.	false
version	Version to use.	'default'