31

Vue Unicons for developers

 5 years ago
source link: https://www.tuicool.com/articles/hit/mUvqAr2
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

BfEj2uJ.png!web

1000+ Pixel-perfect svg unicons for your next project as Vue components

Demo

https://antonreshetov.github.io/vue-unicons

Developed with love for developers

A simple way to add the necessary icons and install them.

jEbiU3V.gif

Install

NPM

Installing with npm is recommended and it works seamlessly with webpack.

npm i vue-unicons

Download

You can download latest version from the Github: Download

Quick start

Global

To use in your project:

  1. Import vue-unicons
  2. Grab the icons you want and add then into Unicon library
  3. Install Unicon into Vue

main.js

import Vue from 'vue'
import App from './App.vue'
import Unicon from 'vue-unicons'
import { uniConstructor, uniCarWash } from 'vue-unicons/src/icons'

Unicon.add([uniConstructor, uniCarWash])
Vue.use(Unicon)

new Vue({
  render: h => h(App)
}).$mount('#app')

App.vue

<template>
  <unicon name="constructor" fill="royalblue"></unicon>
  <unicon name="car-wash" fill="limegreen"></unicon>
</template>

Props

Name Description Type Accepted values name Icon name string - width Width of icon string - height Height of icon string - fill Fill color of icon string HEX or color name

Events

Name Description Payload click Triggered when icon was clicked -

License

Vue Unicons licensed under MIT.

Unicons licensed under Apache 2.0


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK