https://github.com/coderdiaz/vue-transformicons
Transformicons for Vue
https://github.com/coderdiaz/vue-transformicons
animation-css transformicons vue vue2 vuejs vuejs-components
Last synced: 5 months ago
JSON representation
Transformicons for Vue
- Host: GitHub
- URL: https://github.com/coderdiaz/vue-transformicons
- Owner: coderdiaz
- License: mit
- Created: 2018-10-04T06:00:12.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-03-08T04:40:05.000Z (over 5 years ago)
- Last Synced: 2025-02-06T13:51:10.391Z (5 months ago)
- Topics: animation-css, transformicons, vue, vue2, vuejs, vuejs-components
- Language: JavaScript
- Homepage:
- Size: 638 KB
- Stars: 5
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# [Transformicons](https://github.com/coderdiaz/vue-transformicons) · [](http://npmjs.com/package/vue-transformicons) [](https://github.com/coderdiaz/vue-transformicons/stargazers) [](https://travis-ci.org/coderdiaz/vue-transformicons) [](https://npmjs.com/package/vue-transformicons)
[Transformicons](http://transformicons.com) for Vue.
## Install/Usage
```sh
# Using npm
$ npm i -S vue-transformicons
# or yarn
$ yarn add vue-transformicons
```
```html
```
You can use **Local Registration**:
```js
import { MenuIcon } from 'vue-transformicons'
export default {
components: {
MenuIcon
}
}
```
or **Global Registration**:
```js
import VueTransformicons from 'vue-transformicons';
Vue.use(Transformicons);
// or with a custom component name
import { MenuIcon } from 'vue-transformicons';
Vue.component('custom-name', MenuIcon);
```
### Usage in SSR
For use this package with Nuxt or another SSR server, is necessary to use the `SSR` build.
```js
import { MenuIcon } from 'vue-transformicons/dist/vue-transformicons.ssr';
```
### Usage in browser
In browser you can use Unpkg, Jsdelivr, CDN.js, etc.
```sh
# 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
```
## Transformicons Components
- [Menu Icons](#menu-icons)
- [Grid Icons](#grid-icons)
- [Add Icons](#add-icons)
- [Remove Icons](#remove-icons)
- [Contact Icons](#contact-icons)
- [Form Icons](#form-icons)
- [Video Icons](#video-icons)
- [Scroll Icon](#scroll-icon)
- [Loader Icon](#loader-icon)
## Menu Icons
Provides with Menu icons.
#### Parameters:
- `animation` - string, optional - Sets the menu animation type. In case this parameter is
not provided, it will default to `butterfly`. Values available:
- `butterfly`
- `minus`
- `x-cross`
- `arrow-up`
- `arrow-360-left`
- `arrow-left`
- `active` - boolean, optional - Sets initial state for the button. Defaults to
`false`.
#### Examples
```html
```
## Grid Icons
Provides with Grid icons.
#### Parameters:
- `animation` - string, optional - Sets the menu animation type. In case this parameter is
not provided, it will default to `minus`. Values available:
- `minus`
- `check`
- `active` - boolean, optional - Sets initial state for the button. Defaults to
`false`.
#### Examples
```html
```
## Add Icons
Provides with Add icons.
#### Parameters:
- `animation` - string, optional - Sets the menu animation type. In case this parameter is
not provided, it will default to `minus`. Values available:
- `minus`
- `check`
- `active` - boolean, optional - Sets initial state for the button. Defaults to
`false`.
## Examples
```html
```
## Remove Icons
Provides with Remove icons.
#### Parameters
- `animation` - string, optional - Sets the menu animation type. In case this parameter is
not provided, it will default to `check`. Values available:
- `check`
- `chevron-left`
- `chevron-right`
- `chevron-down`
- `chevron-up`
- `active` - boolean, optional - Sets initial state for the button. Defaults to
`false`.
#### Examples
```html
```
## Contact Icons
Provides with Contact icons.
#### Parameters:
- `animation` - string, optional - So far, the only available animation
is `email`.
- `active` - boolean, optional - Sets initial state for the button. Defaults to
`false`.
#### Examples
```html
```
## Form Icons
Provides with Form icons.
#### Parameters:
- `animation` - string, optional - So far, the only available animation
is `search`.
- `active` - boolean, optional - Sets initial state for the button. Defaults to
`false`.
#### Examples
```html
```
## Video Icons
Provides with Video icons.
#### Parameters:
- `animation` - string, optional - So far, the only available animation
is `play`.
- `active` - boolean, optional - Sets initial state for the button. Defaults to
`false`.
#### Examples
```html
```
## Scroll Icon
Provides with a scroll icon.
#### Examples
```html
```
## Loader Icon
Provides with a Loader icon.
#### Examples
```html
```
## Community
All feedback and suggestions are welcome!
## License
This is a open-source software licensed under the [MIT license](https://raw.githubusercontent.com/coderdiaz/vue-transformicons/master/LICENSE)