pinafore/routes/_components/IconButton.html

{{#if delegateKey}}
  <button type="button"
          aria-label="{{label}}"
          aria-pressed="{{pressable ? !!pressed : ''}}"
          class="{{computedClass}}"
          :disabled
          delegate-key="{{delegateKey}}" >
    <svg class="icon-button-svg">
      <use xlink:href="{{href}}" />
    </svg>
  </button>
{{else}}
  <button type="button"
          aria-label="{{label}}"
          aria-pressed="{{pressable ? !!pressed : ''}}"
          class="{{computedClass}}"
          :disabled
          on:click >
    <svg class="icon-button-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);
  }

  .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'

  export default {
    computed: {
      computedClass: (pressable, pressed, big, className) => {
        return classname(
          'icon-button',
          !pressable && 'not-pressable',
          pressed && 'pressed',
          big && 'big-icon',
          className
        )
      }
    }
  }
</script>