<script>
  import './image.css';
  import { createEventDispatcher } from 'svelte';
  /**
   * What background color to use
   */
  export let backgroundColor;

  export let size = 'small';

  export let src = '';
  export let alt = '';

  let style = backgroundColor ? `background-color: ${backgroundColor}` : '';

  const dispatch = createEventDispatcher();

  /**
   * Optional click handler
   */
  function onClick(event) {
    dispatch('click', event);
  }
</script>

<img
  type="button"
  class={['storybook-icon', `storybook-icon--${size}`].join(' ')}
  {style}
  on:click={onClick}
  {src}
  {alt}
/>
