Handling icon size about flowbite-svelte-icons HOT 8 CLOSED

<script>
  import { twMerge } from 'tailwind-merge';
  export let size = 'md';
  export let role = 'img';
  export let ariaLabel = 'address card solid';
  const sizes = {
    xs: 'w-6 h-6',
    sm: 'w-8 h-8',
    md: 'w-10 h-10',
    lg: 'w-20 h-20',
    xl: 'w-36 h-36'
  };
</script>

<svg
  xmlns="http://www.w3.org/2000/svg"
  fill="currentColor"
  {...$$restProps}
  class={twMerge(sizes[size], $$props.class)}
  {role}
  aria-label={ariaLabel}
  viewBox="0 0 20 16"
  on:click
  on:keydown
  on:keyup
  on:focus
  on:blur
  on:mouseenter
  on:mouseleave
  on:mouseover
  on:mouseout
>
  <path
    fill="currentColor"
    d="M18 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2ZM6.5 3a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5ZM3.014 13.021l.157-.625A3.427 3.427 0 0 1 6.5 9.571a3.426 3.426 0 0 1 3.322 2.805l.159.622-6.967.023ZM16 12h-3a1 1 0 0 1 0-2h3a1 1 0 0 1 0 2Zm0-3h-3a1 1 0 1 1 0-2h3a1 1 0 1 1 0 2Zm0-3h-3a1 1 0 1 1 0-2h3a1 1 0 1 1 0 2Z"
  />
</svg>

<script>
  import AddressCardSolid from './AddressCardSolid.svelte'
</script>

<AddressCardSolid />
<AddressCardSolid size="xs" class="text-red-500"/>
<AddressCardSolid size="sm" class="text-blue-700"/>
<AddressCardSolid size="md" />
<AddressCardSolid size="lg" />
<AddressCardSolid size="xl" />

<svelte:head>
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/tailwind.min.css" />
</svelte:head>

  const sizes = {
    xs: 'w-3 h-3',
    sm: 'w-4 h-4',
    md: 'w-5 h-6',
    lg: 'w-6 h-6',
    xl: 'w-8 h-8',
   2xl: 'w-12 h-12'
  };