{{#if delegateKey}} <button type="button" aria-label="{{label}}" aria-pressed="{{pressable ? !!pressed : ''}}" class="{{computedClass}}" :disabled delegate-key="{{delegateKey}}" focus-key="{{focusKey || ''}}" > <svg class="icon-button-svg" ref:svg> <use xlink:href="{{href}}" /> </svg> </button> {{else}} <button type="button" aria-label="{{label}}" aria-pressed="{{pressable ? !!pressed : ''}}" class="{{computedClass}}" focus-key="{{focusKey || ''}}" :disabled on:click > <svg class="icon-button-svg" ref:svg> <use xlink:href="{{href}}" /> </svg> </button> {{/if}} <style> .icon-button { padding: 6px 10px; background: none; border: none; } .icon-button-svg { width: 24px; height: 24px; fill: var(--action-button-fill-color); pointer-events: none; /* hack for Edge */ } .icon-button.big-icon .icon-button-svg { width: 32px; height: 32px; } .icon-button:hover .icon-button-svg { fill: var(--action-button-fill-color-hover); } .icon-button.not-pressable:active .icon-button-svg { fill: var(--action-button-fill-color-active); } .icon-button.pressed .icon-button-svg { fill: var(--action-button-fill-color-pressed); } .icon-button.pressed:hover .icon-button-svg { fill: var(--action-button-fill-color-pressed-hover); } .icon-button.pressed:active .icon-button-svg { fill: var(--action-button-fill-color-pressed-active); } </style> <script> import { classname } from '../_utils/classname' import { store } from '../_store/store' export default { oncreate() { this.observe('animation', animation => { if (!animation || this.store.get('reduceMotion')) { return } let svg = this.refs.svg let animations = animation.map(({properties, options}) => svg.animate(properties, options)) animations.forEach(anim => anim.play()) }) }, store: () => store, computed: { computedClass: (pressable, pressed, big, className) => { return classname( 'icon-button', !pressable && 'not-pressable', pressed && 'pressed', big && 'big-icon', className ) } } } </script>