Icons config
#

By default Vuestic UI uses Material Design icons. If that's too basic for you - vuestic has powerful icon config.

Depending on icon library, they could use classes, ligatures or components. So you have to configure vuestic icons to work with your icon solution.

Find out more about the VaIcon component

Fonts
#

We want to use the <va-icon name='icon-name' /> pattern. We can setup a config for a specific icon name pattern. In that config we provide an icon class, attributes, tag, contents (innerHTML) or a Vue component relative to icon name.

Font name pattern
#

Font name pattern is similar to vue dynamic routes. We can use dynamic segments to dynamically generate IconConfig in resolve function. Dynamic segments should be written in curly brackets.

Interactive playground
#

Here you can see how your code will be transformed with different icon configs. You can change icon config params to see how it impact on final render. See our presets before play.

By default Vuestic require only Material Icons. Other icon libraries you need to setup yourself.

va-icon name="

fa-book

" /

const fonts = [{

name: '

fa-{code}

resolve: ({ code }) => ({

class:

`fas fa-${code}`

content:

attrs:

tag:

})

}]

Aliases
#

To make code simpler we can use aliases. Alias has a to prop which would change the name of a given icon to the value of to and look for an appropriate font config. All the props from resolved font would be applied to that icon if they were not defined in alias config.

Example aliases config
#

import VuesticLogoSVGComponent from "some-component.vue";

const aliases = [
  {
    name: "close",
    to: "fa4-times",
  },
  {
    name: "twitter",
    to: "fa4-twitter",
    color: "#1da1f2", // Twitter blue brand color
  },
  {
    name: "vuestic-logo",
    component: VuesticLogoSVGComponent,
    color: "primary",
  },
  {
    name: "english",
    to: "flag-gb-small",
  },
];

Vuestic component aliases
#

We use some icons in our components by default. You can redefine them by changing it's alias.

va-unsorted

swap_vert

va-sort-asc

va-arrow-up

va-sort-desc

va-arrow-down

va-arrow-first

mi-first_page

va-arrow-last

mi-last_page

va-arrow-right

mi-chevron_right

va-arrow-left

mi-chevron_left

va-arrow-down

mi-expand_more

va-arrow-up

mi-expand_less

va-calendar

mi-calendar_today

va-delete

mi-delete_outline

va-check

mi-check

va-check-circle

mi-check_circle

va-warning

mi-warning

va-clear

mi-highlight_off

va-close

mi-close

va-loading

mi-loop

va-plus

mi-add

va-minus

mi-remove

Let's build our config
#

We need to update icons config in our global config. Icons config is a flat array with Vuestic default font and aliases. We can use the createIconsConfig() helper to create a new config with Vuestic defaults and our custom fonts and aliases merged together. For example:

import { createVuestic, createIconsConfig } from "vuestic-ui";

const aliases = [
  /*...*/
];
const fonts = [
  /*...*/
];

createApp(App)
  .use(createVuestic({
    config: {
      icons: createIconsConfig({ aliases, fonts }),
    },
  }))
  .mount("#app");

IconConfig
#

You can use IconConfig properties in aliases, fonts and as return in resolve function.

Prop	Type	Description
class	`string \| undefined`	Class that will be applied to the icon. Can be a string or a function that accepts dynamic segment value and returns a string.
content	`string \| undefined`	Content that will be inside the icon. Can be a string or a function that accepts dynamic segment value and returns a string.
component	`VueComponent \| undefined`	VueComponent that will be used instead of a tag.
attrs	`Record<string, any> \| undefined`	Props that will be bound to `component`. Can be an object or a function that accepts dynamic segment value and returns an object.
to	`string \| undefined`	Here you can define name of a config which values will be merged to this config
tag	`string \| undefined`	A tag to render icon with. By default - `i`
color	`string \| undefined`	Sets the CSS `color` property to a given value
rotation	`number \| string \| undefined`	Rotates the icon by specified angle (in degrees)
spin	`'clockwise' \| 'counter-clockwise' \| undefined`	Applies the spin animation to the icon

Icons config #

Fonts #

Font name pattern #

Interactive playground #

Aliases #

Example aliases config #

Vuestic component aliases #

Let's build our config #

IconConfig #