Transformicons for Vue.
# Using npm
$ npm i -S vue-transformicons
# or yarn
$ yarn add vue-transformicons
<div id="#app">
<menu-icon></menu-icon>
</div>
You can use Local Registration:
import { MenuIcon } from 'vue-transformicons'
export default {
components: {
MenuIcon
}
}
or Global Registration:
import VueTransformicons from 'vue-transformicons';
Vue.use(Transformicons);
// or with a custom component name
import { MenuIcon } from 'vue-transformicons';
Vue.component('custom-name', MenuIcon);
For use this package with Nuxt or another SSR server, is necessary to use the SSR
build.
import { MenuIcon } from 'vue-transformicons/dist/vue-transformicons.ssr';
In browser you can use Unpkg, Jsdelivr, CDN.js, etc.
# Unpkg
https://unpkg.com/vue-transformicons@latest/dist/vue-transformicons.js
# JSDelivr
https://cdn.jsdelivr.net/npm/vue-transformicons@latest/dist/vue-transformicons.min.js
Provides with Menu icons.
animation
- string, optional - Sets the menu animation type. In case this parameter isbutterfly
. Values available:
butterfly
minus
x-cross
arrow-up
arrow-360-left
arrow-left
active
- boolean, optional - Sets initial state for the button. Defaults tofalse
.<menu-icon></menu-icon>
<menu-icon animation="minus"></menu-icon>
<menu-icon animation="x-cross"></menu-icon>
<menu-icon animation="arrow-up"></menu-icon>
<menu-icon animation="arrow-left"></menu-icon>
<menu-icon animation="arrow-left" :active="true"></menu-icon>
Provides with Grid icons.
animation
- string, optional - Sets the menu animation type. In case this parameter isminus
. Values available:
minus
check
active
- boolean, optional - Sets initial state for the button. Defaults tofalse
.<grid-icon></grid-icon>
<grid-icon animation="rearrange"></grid-icon>
<grid-icon animation="collapse"></grid-icon>
<grid-icon animation="collapse" :active="true"></grid-icon>
Provides with Add icons.
animation
- string, optional - Sets the menu animation type. In case this parameter isminus
. Values available:
minus
check
active
- boolean, optional - Sets initial state for the button. Defaults tofalse
.<add-icon></add-icon>
<add-icon animation="minus"></add-icon>
<add-icon animation="check"></add-icon>
<add-icon animation="minus" :active="true">
Provides with Remove icons.
animation
- string, optional - Sets the menu animation type. In case this parameter ischeck
. Values available:
check
chevron-left
chevron-right
chevron-down
chevron-up
active
- boolean, optional - Sets initial state for the button. Defaults tofalse
.<remove-icon></remove-icon>
<remove-icon animation="check"></remove-icon>
<remove-icon animation="chevron-left"></remove-icon>
<remove-icon animation="chevron-right"></remove-icon>
<remove-icon animation="chevron-down"></remove-icon>
<remove-icon animation="chevron-up"></remove-icon>
<remove-icon animation="check" :active="true"></remove-icon>
Provides with Contact icons.
animation
- string, optional - So far, the only available animationemail
.active
- boolean, optional - Sets initial state for the button. Defaults tofalse
.<contact-icon></contact-icon>
<contact-icon :active="true"></contact-icon>
<contact-icon animation="email" ></contact-icon>
Provides with Form icons.
animation
- string, optional - So far, the only available animationsearch
.active
- boolean, optional - Sets initial state for the button. Defaults tofalse
.<form-icon></form-icon>
<form-icon :active="true"></form-icon>
<form-icon animation="search"></form-icon>
Provides with Video icons.
animation
- string, optional - So far, the only available animationplay
.active
- boolean, optional - Sets initial state for the button. Defaults tofalse
.<video-icon></video-icon>
<video-icon :active="true"></video-icon>
<video-icon animation="play"></video-icon>
Provides with a scroll icon.
<scroll-icon></scroll-icon>
Provides with a Loader icon.
<loader-icon></loader-icon>
All feedback and suggestions are welcome!
This is a open-source software licensed under the MIT license