<script lang="ts">
  export let inline: boolean = false;
  export let svg: string;
  export let onclick;
</script>

<div
  role="button"
  tabindex="0"
  on:click={onclick}
  on:keydown={onclick}>
  <span class:inline={inline}>
    {@html svg}
  </span>
</div>

<span class:inline={inline}>
  {@html svg}
</span>

<style lang="scss">
  span {
    & :global(svg) {
      width: 1em;
      height: 1em;
      fill: currentColor;
    }
    &.inline :global(svg) { transform: translate(0, 0.125em); }
  }

  div {
    background-color: green;
    user-select: none;
    padding: 1px 18px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
