vuikit-icons

Install

$ npm install --save @vuikit/icons

Usage

import Vue from 'vue'
import VuikitIcons from '@vuikit/icons'

Vue.use(VuikitIcons)

<template>
  <div>
    <vk-icons-heart></vk-icons-heart>
    <vk-icons-check></vk-icons-check>
  </div>
</template>

Integration with Vuikit

To apply the Vuikit styles the icons must be used with one of the vk-icon components. Those will automatically recognize the icons registered with a vk-icons prefix and allow them to be used by their name.

import Vue from 'vue'
import Vuikit from 'vuikit'
import VuikitIcons from '@vuikit/icons'

Vue.use(Vuikit)
Vue.use(VuikitIcons)

<template>
  <div>
    <vk-icon icon="heart"></vk-icon>
    <vk-icon-link icon="check"></vk-icon-link>
    <vk-icon-button icon="twitter"></vk-icon-button>
  </div>
</template>

Smaller Bundle Size

Installing the entire library is useful for prototyping and testing but for production is recommended to cherry pick the desired icons and register them manually.

import VkIconsHeart from '@vuikit/icons/lib/heart'

// globally
Vue.component('VkIconsHeart', VkIconsHeart)

// or locally
export default {
  components: {
    VkIconsHeart
  }
}

Custom Icons

Vuikit icons are in essence UIkit icons converted to Vue functional components, and you can convert your custom icons as well. Fork this repo locally and the svg files in the custom directory, then use the console to execute the conversion.

npm install
npm run custom

License

MIT © Miljan Aleksic

Acknowledgments

The icons source code is copyrighted by UIkit © 2013-2018 YOOtheme GmbH, getuikit.com.