pinafore/routes/_components/IconButton.html

{#if delegateKey}
  <button type="button"
          title={label}
          aria-label={label}
          aria-pressed={pressable ? !!pressed : ''}
          class={computedClass}
          {disabled}
          delegate-key={delegateKey}
          focus-key={focusKey || ''} >
    <svg class="icon-button-svg {svgClassName || ''}" ref:svg>
      <use xlink:href={href} />
    </svg>
  </button>
{:else}
  <button type="button"
          title={label}
          aria-label={label}
          aria-pressed={pressable ? !!pressed : ''}
          class={computedClass}
          focus-key={focusKey || ''}
          {disabled}
          on:click >
    <svg class="icon-button-svg {svgClassName || ''}" ref:svg>
      <use xlink:href={href} />
    </svg>
  </button>
{/if}
<style>
  .icon-button {
    padding: 6px 10px;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .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;
  }

  /*
   * regular styles
   */

  .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);
  }

  /*
   * muted
   */

  .icon-button.muted-style .icon-button-svg {
    fill: var(--action-button-deemphasized-fill-color);
  }

  .icon-button.muted-style:hover .icon-button-svg {
    fill: var(--action-button-deemphasized-fill-color-hover);
  }

  .icon-button.muted-style.not-pressable:active .icon-button-svg {
    fill: var(--action-button-deemphasized-fill-color-active);
  }

  .icon-button.muted-style.pressed .icon-button-svg {
    fill: var(--action-button-deemphasized-fill-color-pressed);
  }

  .icon-button.muted-style.pressed:hover .icon-button-svg {
    fill: var(--action-button-deemphasized-fill-color-pressed-hover);
  }

  .icon-button.muted-style.pressed:active .icon-button-svg {
    fill: var(--action-button-deemphasized-fill-color-pressed-active);
  }

</style>
<script>
  import { classname } from '../_utils/classname'
  import { store } from '../_store/store'

  export default {
    data: () => ({
      big: false,
      muted: false,
      disabled: false,
      svgClassName: void 0,
      focusKey: void 0,
      pressable: false,
      pressed: false,
      className: void 0,
      delegateKey: void 0
    }),
    store: () => store,
    computed: {
      computedClass: ({ pressable, pressed, big, muted, className }) => {
        return classname(
          'icon-button',
          !pressable && 'not-pressable',
          pressed && 'pressed',
          big && 'big-icon',
          muted && 'muted-style',
          className
        )
      }
    },
    methods: {
      animate (animation) {
        let { reduceMotion } = this.store.get()
        if (!animation || reduceMotion) {
          return
        }
        let svg = this.refs.svg
        let animations = animation.map(({ properties, options }) => svg.animate(properties, options))
        animations.forEach(anim => anim.play())
      }
    }
  }
</script>