https://github.com/zerodevx/zero-transformicon
DEPRECATED - Animated icon buttons! A Polymer port of Transformicons.
https://github.com/zerodevx/zero-transformicon
Last synced: about 1 month ago
JSON representation
DEPRECATED - Animated icon buttons! A Polymer port of Transformicons.
- Host: GitHub
- URL: https://github.com/zerodevx/zero-transformicon
- Owner: zerodevx
- License: mit
- Created: 2015-12-13T09:21:51.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2018-04-10T07:30:55.000Z (almost 8 years ago)
- Last Synced: 2025-12-08T09:49:15.962Z (3 months ago)
- Language: HTML
- Homepage: https://zerodevx.github.io/zero-transformicon
- Size: 244 KB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
v0.1.0
# ``
Animated icon buttons! A Polymer port of [Transformicons](http://transformicons.com).
All of Transformicon goodness encapsulated in one incredibly easy-to-use web
component.
### Let's get this money
1. Import dependencies.
```html
```
2. Use anywhere.
```html
```
### Demo
Check out the demo site: https://zerodevx.github.com/zero-transformicon
### Included icons
| Icon name | Transition description |
|---------------------|------------------------|
| menu-xbutterfly | Hamburger to X in two stages |
| menu-minus | Hamburger to Minus sign |
| menu-xcross | Hamburger to X in one stage |
| menu-arrowup | Hamburger to Up Arrow |
| menu-arrow360left | Hamburger to Left Arrow in psychedelic 360° madness |
| menu-arrowleft | Hamburger to Left Arrow |
| grid-collapse | Grid symbol that collapses to a small X |
| grid-rearrange | Grid symbol that rearranges to a large X |
| plus-check | Plus sign to to Check symbol |
| plus-minus | Plus sign to Minus sign |
| remove-check | X to to Check symbol |
| remove-chevronleft | X to Left Chevron |
| remove-chevronright | X to Right Chevron |
| remove-chevrondown | X to Down Chevron |
| remove-chevronup | X to Up Chevron |
| main-envelope | Opened Mail icon to Closed Mail icon |
| search-xcross | Search icon to X |
### Published properties
| Property | Type | Description |
|----------|---------|-------------|
| icon | String | *Icon name* as defined in [included icons](#Included_icons). |
| color | String | CSS color property applied to this instance. Defaults to "black". |
| active | Boolean | Sets initial state of icon - `true` displays icon in "opened" state. Defaults to `false`. Fires an `active-changed` custom event when state changes. |
### Installation
**Install through Bower**
bower install --save zerodevx/zero-transformicon#^0.1.0
Alternatively, download the project as a ZIP file and unpack into your
components directory. Note that `` depends on:
* `Polymer`: https://github.com/Polymer/polymer
Source provided as-is - no assumptions are made on your production build
workflow.
**Load from [Rawgit CDN](https://rawgit.com)**
If you're not using Polymer,
```html
```
### Credits
Big thank you to the kind folks at [Grey Ghost Visuals](https://github.com/grayghostvisuals/transformicons),
[Bennett Feely](http://bennettfeely.com) and [Sara Soueidan](http://sarasoueidan.com)
for creating these awesome UI pieces. This is simply their work wrapped in some
Polymer magic.
### License
MIT, though I'll greatly appreciate a note if you find this useful.
### Version history
1. 2015-12-13: v0.1.0
* Initial commit.