<shape-shifter>
shape-shifter is an all-in-one icon element that can morph into different shapes. Pretty cool for animated icons but works for static icons, too!
Maintained by Martin Kleinschrodt (https://github.com/maklesoft).
Demo
Usage
With Bower
-
Install the component
$ bower install shape-shifter
-
Load polymer platform and shape-shifter element
<script src="bower_components/platform/platform.js"></script> <link rel="import" href="bower_components/shape-shifter/shape-shifter.html">
-
Start using it!
<shape-shifter shape="plus"></shape-shifter>
Without Bower
-
Import Web Components' polyfill:
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/polymer.js"></script>
-
Import Custom Element:
<link rel="import" href="shape-shifter.html">
-
Start using it!
<shape-shifter shape="plus"></shape-shifter>
Options
| Attribute | Options | Default | Description |
|---|---|---|---|
shape | plus, cancel, check, menu, more, left, right, top, down, copy, edit, home, save, trash | [empty] | The shape to take on. If empty, will show nothing. |
color | string | #000 | The color of the element |
springy | boolean | false | Use a different animation |
Custom CSS properties
--shape-shifter-primary-color defines the primary stroke color. Default is currentColor --shape-shifter-secondary-color defines the secondary stroke color. Default is #ffffff
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -m 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request :D
History
For detailed changelog, check Releases.
