vue-icon

vue2 svg icon component

Maybe it is the smallest vue component library that contains all the feather icons

Icons

https://qinshenxue.github.io/vue-icon/

Usage

using npm

$ npm install vue-icon

The default component name is icon, you can specify a new component name withVue.use(plugin,customName).

importVuefrom'vue';
importAppfrom'./app.vue';
importfeatherfrom'vue-icon'
Vue.use(feather,'v-icon')
newVue({
el:'#app',
render:h=>h(App)
});

Or configure an object to change the name and the default icon class.

Vue.use(feather,{
name:'v-icon',
props:{
baseClass:{
type:String,
default:'v-icon'
},
classPrefix:{
type:String,
default:'v-icon-'
}
}
})
// or
Vue.use(feather,{
name:'v-icon',
data(){
return{
baseClass:'v-icon',
classPrefix:'v-icon-'
}
}
})

The configured objects are treated asmixins,so you can define it like normal Vue instance objects.

using in.vuefile

<template>
<div>
<v-iconname="eye"></v-icon>
<v-iconname="x"></v-icon>
<custom-iconname="activity"base-class="custom-icon"></custom-icon>
</div>
</template>

<script>
import customIcon from 'vue-icon/lib/vue-feather.esm'
export default{
components: {
customIcon
},
data: function () {
return {
baseClass: 'v-icon'
}
}
}
</script>
<style>
.v-icon,
.custom-icon {
width: 24px;
}
</style>

Or using script tag

<scripttype="text/javascript"src="vue.js"></script>
<scripttype="text/javascript"src="https://unpkg /vue-icon/lib/vue-feather.min.js"></script>

<!--component name is icon by default-->
<iconname="close"></icon>

Icon Style

Components don't contain any style definitions, you can define styles based onbaseClass:'icon'andclassPrefix:'icon-'.

.icon{
color:#666
}
.icon:hover{
color:#000
}
.icon-close{
color:red
}

Component Attributes

Attribute	Description	Type	Default
name	The name of icon	string	--
base-class	icon base class	string	icon
class-prefix	icon class prefix	string	icon-

Changelog

Detailed changes for each release are documented in the release notes.