{"id":16403641,"url":"https://github.com/coderdiaz/vue-transformicons","last_synced_at":"2025-10-26T17:30:34.363Z","repository":{"id":107873181,"uuid":"151525441","full_name":"coderdiaz/vue-transformicons","owner":"coderdiaz","description":"Transformicons for Vue","archived":false,"fork":false,"pushed_at":"2020-03-08T04:40:05.000Z","size":653,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-06T13:51:10.391Z","etag":null,"topics":["animation-css","transformicons","vue","vue2","vuejs","vuejs-components"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/coderdiaz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-10-04T06:00:12.000Z","updated_at":"2020-09-04T14:28:17.000Z","dependencies_parsed_at":null,"dependency_job_id":"621c4415-dfba-40b0-af3e-b4065c818696","html_url":"https://github.com/coderdiaz/vue-transformicons","commit_stats":{"total_commits":39,"total_committers":3,"mean_commits":13.0,"dds":"0.41025641025641024","last_synced_commit":"72459b7db421f0ec1c61affe15b40971c9d4c62b"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coderdiaz%2Fvue-transformicons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coderdiaz%2Fvue-transformicons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coderdiaz%2Fvue-transformicons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coderdiaz%2Fvue-transformicons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/coderdiaz","download_url":"https://codeload.github.com/coderdiaz/vue-transformicons/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238375040,"owners_count":19461529,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation-css","transformicons","vue","vue2","vuejs","vuejs-components"],"created_at":"2024-10-11T05:49:56.575Z","updated_at":"2025-10-26T17:30:29.022Z","avatar_url":"https://github.com/coderdiaz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [Transformicons](https://github.com/coderdiaz/vue-transformicons) \u0026middot; [![NPMVERSION](https://img.shields.io/npm/v/vue-transformicons.svg)](http://npmjs.com/package/vue-transformicons) [![GITHUBSTARS](https://img.shields.io/github/stars/coderdiaz/vue-transformicons.svg)](https://github.com/coderdiaz/vue-transformicons/stargazers) [![BUILD](https://travis-ci.org/coderdiaz/vue-transformicons.svg?branch=master)](https://travis-ci.org/coderdiaz/vue-transformicons) [![DOWNLOADS](https://img.shields.io/npm/dt/vue-transformicons.svg)](https://npmjs.com/package/vue-transformicons)\n\n\n[Transformicons](http://transformicons.com) for Vue.\n\n## Install/Usage\n\u003c!-- Replace the docs for usage the plugin --\u003e\n```sh\n# Using npm\n$ npm i -S vue-transformicons\n\n# or yarn\n$ yarn add vue-transformicons\n```\n\n```html\n\u003cdiv id=\"#app\"\u003e\n  \u003cmenu-icon\u003e\u003c/menu-icon\u003e\n\u003c/div\u003e\n```\n\nYou can use **Local Registration**:\n```js\nimport { MenuIcon } from 'vue-transformicons'\nexport default {\n  components: {\n    MenuIcon\n  }\n}\n```\n\nor **Global Registration**:\n```js\nimport VueTransformicons from 'vue-transformicons';\nVue.use(Transformicons);\n\n// or with a custom component name\nimport { MenuIcon } from 'vue-transformicons';\nVue.component('custom-name', MenuIcon);\n```\n\n### Usage in SSR\nFor use this package with Nuxt or another SSR server, is necessary to use the `SSR` build.\n```js\nimport { MenuIcon } from 'vue-transformicons/dist/vue-transformicons.ssr';\n```\n\n### Usage in browser\n\u003c!-- Write an example for use the plugin in browser from CDN --\u003e\nIn browser you can use Unpkg, Jsdelivr, CDN.js, etc.\n```sh\n# Unpkg\nhttps://unpkg.com/vue-transformicons@latest/dist/vue-transformicons.js\n\n# JSDelivr\nhttps://cdn.jsdelivr.net/npm/vue-transformicons@latest/dist/vue-transformicons.min.js\n```\n\n## Transformicons Components\n- [Menu Icons](#menu-icons)\n- [Grid Icons](#grid-icons)\n- [Add Icons](#add-icons)\n- [Remove Icons](#remove-icons)\n- [Contact Icons](#contact-icons)\n- [Form Icons](#form-icons)\n- [Video Icons](#video-icons)\n- [Scroll Icon](#scroll-icon)\n- [Loader Icon](#loader-icon)\n\n## Menu Icons\nProvides with Menu icons.\n\n#### Parameters:\n- `animation` - string, optional - Sets the menu animation type. In case this parameter is\n  not provided, it will default to `butterfly`. Values available:\n  - `butterfly`\n  - `minus`\n  - `x-cross`\n  - `arrow-up`\n  - `arrow-360-left`\n  - `arrow-left`\n- `active` - boolean, optional - Sets initial state for the button. Defaults to\n  `false`.\n\n#### Examples\n```html\n\u003cmenu-icon\u003e\u003c/menu-icon\u003e\n\u003cmenu-icon animation=\"minus\"\u003e\u003c/menu-icon\u003e\n\u003cmenu-icon animation=\"x-cross\"\u003e\u003c/menu-icon\u003e\n\u003cmenu-icon animation=\"arrow-up\"\u003e\u003c/menu-icon\u003e\n\u003cmenu-icon animation=\"arrow-left\"\u003e\u003c/menu-icon\u003e\n\u003cmenu-icon animation=\"arrow-left\" :active=\"true\"\u003e\u003c/menu-icon\u003e\n```\n\n## Grid Icons\nProvides with Grid icons.\n\n#### Parameters:\n- `animation` - string, optional - Sets the menu animation type. In case this parameter is\n  not provided, it will default to `minus`. Values available:\n  - `minus`\n  - `check`\n- `active` - boolean, optional - Sets initial state for the button. Defaults to\n  `false`.\n\n#### Examples\n```html\n\u003cgrid-icon\u003e\u003c/grid-icon\u003e\n\u003cgrid-icon animation=\"rearrange\"\u003e\u003c/grid-icon\u003e\n\u003cgrid-icon animation=\"collapse\"\u003e\u003c/grid-icon\u003e\n\u003cgrid-icon animation=\"collapse\" :active=\"true\"\u003e\u003c/grid-icon\u003e\n```\n\n## Add Icons\nProvides with Add icons.\n\n#### Parameters:\n- `animation` - string, optional - Sets the menu animation type. In case this parameter is\n  not provided, it will default to `minus`. Values available:\n  - `minus`\n  - `check`\n- `active` - boolean, optional - Sets initial state for the button. Defaults to\n  `false`.\n\n## Examples\n```html\n\u003cadd-icon\u003e\u003c/add-icon\u003e\n\u003cadd-icon animation=\"minus\"\u003e\u003c/add-icon\u003e\n\u003cadd-icon animation=\"check\"\u003e\u003c/add-icon\u003e\n\u003cadd-icon animation=\"minus\" :active=\"true\"\u003e\n```\n\n## Remove Icons\nProvides with Remove icons.\n\n#### Parameters\n- `animation` - string, optional - Sets the menu animation type. In case this parameter is\n  not provided, it will default to `check`. Values available:\n  - `check`\n  - `chevron-left`\n  - `chevron-right`\n  - `chevron-down`\n  - `chevron-up`\n- `active` - boolean, optional - Sets initial state for the button. Defaults to\n  `false`.\n\n#### Examples\n```html\n\u003cremove-icon\u003e\u003c/remove-icon\u003e\n\u003cremove-icon animation=\"check\"\u003e\u003c/remove-icon\u003e\n\u003cremove-icon animation=\"chevron-left\"\u003e\u003c/remove-icon\u003e\n\u003cremove-icon animation=\"chevron-right\"\u003e\u003c/remove-icon\u003e\n\u003cremove-icon animation=\"chevron-down\"\u003e\u003c/remove-icon\u003e\n\u003cremove-icon animation=\"chevron-up\"\u003e\u003c/remove-icon\u003e\n\u003cremove-icon animation=\"check\" :active=\"true\"\u003e\u003c/remove-icon\u003e\n```\n\n## Contact Icons\nProvides with Contact icons.\n\n#### Parameters:\n- `animation` - string, optional - So far, the only available animation\n  is `email`.\n- `active` - boolean, optional - Sets initial state for the button. Defaults to\n  `false`.\n\n#### Examples\n```html\n\u003ccontact-icon\u003e\u003c/contact-icon\u003e\n\u003ccontact-icon :active=\"true\"\u003e\u003c/contact-icon\u003e\n\u003ccontact-icon animation=\"email\" \u003e\u003c/contact-icon\u003e\n```\n\n## Form Icons\nProvides with Form icons.\n\n#### Parameters:\n- `animation` - string, optional - So far, the only available animation\n  is `search`.\n- `active` - boolean, optional - Sets initial state for the button. Defaults to\n  `false`.\n\n#### Examples\n```html\n\u003cform-icon\u003e\u003c/form-icon\u003e\n\u003cform-icon :active=\"true\"\u003e\u003c/form-icon\u003e\n\u003cform-icon animation=\"search\"\u003e\u003c/form-icon\u003e\n```\n\n## Video Icons\nProvides with Video icons.\n\n#### Parameters:\n- `animation` - string, optional - So far, the only available animation\n  is `play`.\n- `active` - boolean, optional - Sets initial state for the button. Defaults to\n  `false`.\n\n#### Examples\n```html\n\u003cvideo-icon\u003e\u003c/video-icon\u003e\n\u003cvideo-icon :active=\"true\"\u003e\u003c/video-icon\u003e\n\u003cvideo-icon animation=\"play\"\u003e\u003c/video-icon\u003e\n```\n\n## Scroll Icon\nProvides with a scroll icon.\n\n#### Examples\n```html\n\u003cscroll-icon\u003e\u003c/scroll-icon\u003e\n```\n\n## Loader Icon\nProvides with a Loader icon.\n\n#### Examples\n```html\n\u003cloader-icon\u003e\u003c/loader-icon\u003e\n```\n\n## Community\nAll feedback and suggestions are welcome!\n\n## License\nThis is a open-source software licensed under the [MIT license](https://raw.githubusercontent.com/coderdiaz/vue-transformicons/master/LICENSE)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoderdiaz%2Fvue-transformicons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoderdiaz%2Fvue-transformicons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoderdiaz%2Fvue-transformicons/lists"}