delightful-icons
v0.5.0
Published
Icons that implement Material Design's delightful details.
Downloads
15
Readme
<delightful-icons>
Material Design: Creative Customization
delightful-icons
is a collection of icon sets and a helper <delightful-icon>
element to assist transitioning between them. Each icon set is a pair of icons that can transition from one to another with an animation. These animations are part of Material Design's delightful details.
<delightful-icon>
<delightful-icon>
is a helper element that wraps any element that uses an <iron-icon>
. You can use it to define which icons to transition to.
<!-- Import transitions individually -->
<link rel="import" href="./bower_components/delightful-icons/icons/menu-arrow-back.html">
<link rel="import" href="./bower_components/delightful-icons/icons/menu-arrow-forward.html">
<!-- Or all transitions -->
<link rel="import" href="./bower_components/delightful-icons/icons/all.html">
<!-- Import transitions before <delightful-icon> element -->
<link rel="import" href="./bower_components/delightful-icons/delightful-icon.html">
<delightful-icon icon="menu" next="arrow-back" toggle-on="click">
<paper-icon-button></paper-icon-button>
</delightful-icon>
<delightful-icon icon="play-arrow" next="pause" toggle-on="click">
<paper-icon-button></paper-icon-button>
</delightful-icon>
<delightful-icon icon="add" next="create" toggle-on="click">
<paper-icon-button></paper-icon-button>
</delightful-icon>
There are two ways to trigger a transition:
- Change the
icon
property - Set the
next
property and invoketoggle()
<delightful-icon>
can listen to a default event from its wrapped element to toggle on by setting the toggle-on
attribute to the event name.
Wrapped element
By default, <delightful-icon>
will use its first child as the wrapped element and set the icon
property. This can be customized further with query
and property
attributes.
<delightful-icon icon="menu" next="arrow-back" toggle-on="click"
query=".use-this" property="displayIcon">
<div>
<!-- <delightful-icon> will set the displayIcon property of this element -->
<my-custom-element class="use-this"></my-custom-element>
</div>
</delightful-icon>
Multi-icon transitions
You can transition between several icons, provided each icon transitioned to has an imported animation for the icon it is transitioning from.
<!-- This button will transition between menu, arrow-back, and arrow-forward -->
<delightful-icon id="menu-arrows" icon="menu">
<paper-icon-button></paper-icon-button>
</delightful-icon>
<script>
window.addEventListener('WebComponentsReady', function() {
var delight = document.querySelector('#menu-arrows');
delight.iconElement.addEventListener('click', function() {
if (delight.icon === 'menu') {
delight.icon = 'arrow-back';
} else if (delight.icon === 'arrow-back') {
delight.icon = 'arrow-forward';
} else {
delight.icon = 'menu';
}
});
});
</script>
Styling
The following custom properties are available for styling:
Custom Property | Description | Default
------------------------------|---------------------|----------
--delightful-icons-duration
| Transition duration | 0.2s
--delightful-icons-easing
| Transition easing | cubic-bezier(0.4, 0, 0.2, 1)
Compatibility
On browsers that do not support CSS transforms, the icon will immediately change from one to another without a transition.
- IE 11 does not support CSS transforms on SVG elements.
- Microsoft Edge is considering CSS transforms for SVG.
- Safari 9 supports CSS transforms, but due to other maintenance complications I have chosen to disable animations for 9. Safari 10+ will show animations correctly.