Icons

Use icons with love, and moderation.

If you followed the integration guide, icons will be globally registered with a vk-icons prefix, eg. vk-icons-check, and we recommend to follow that convention for cross component compatibility. That way they will not conflict with other components plus will become easily recognizable.

Usage

As long as the icons are registered with the vk-icons prefix you can reference them by the name across the different components supporting them.

<vk-icons-check attrs>...</vk-icons-check>

You don't have to register all the icons, on the contrary it would be best to cherry pick the ones you need.

import Vue from 'vue'
import { IconCheck, IconClose } from '@vuikit/icons'

// register globally
Vue.component('VkIconsCheck', IconCheck)
Vue.component('VkIconsClose', IconClose)

// or locally
export default {
  components: {
    VkIconsCheck: IconCheck,
    VkIconsClose: IconClose
  }
} 

Note Check the Icon component to render the icons with inherit styles and other benefits.

Custom Icons

If you want to register your own collection of icons make sure those are functional components, returning a raw svg element and registered globally or locally as described above. That's important as the components supporting icons would expect that.

You can convert the svg files to Vue functional components on your own way, but you can also use the Vuikit Icons build process which will make the conversion for you.

Additionally, if using Webpack the Vuikit Icons loader will do the conversion on the fly. Pretty neat!

Library

Here is an overview of all currently available icons.

App

Devices

Storage

Direction

Editor

Brands