Handling icon size

[jjagielka]

From the docs:

---

Size

Use the size prop to change the size of icons.

<AddressCardSolid size="40" /> 

Tailwind CSS suport

Use the class prop to change size, colors and add additional css.

Tailwind CSS example:

<AddressCardSolid class="h-24 w-24 text-blue-700 mr-4" />

---

This seems a bit confusing what is the proper way of setting the icon size, via size prop or class.

If we use the class then svg is rendered with the default width="20" height="20" overshadowed by the class="w-24 h-24". A bit unwanted.

On the other hand, the convention we use in flowbite-svelte for sizing the components is a set of predefined sizes like:

export let size: "xs" | "sm" | "md" | "lg" | "xl" = "md";

const sizes = {
  xs: "w-4 h-4',
  sm: "w-5 h-5',
  ....
}

which is completely different to the one use here:

 export let size: string = '20';

Shouldn't we be more consistent between the two libraries?

My proposal, would be to offer few predefined sizes and if user wants non-standard sizing the usage of class should be encouraged:

<AddressCardSolid size="sm" />
<AddressCardSolid class="w-4 h-8" />
<AddressCardSolid class="w-[21px] h-[23px]" /> <!-- if pixel wise control needed -->

@shinokada , @zoltanszogyenyi - your thoughts?

[shinokada]

Something like this?

It makes sense to use size for "xs" | "sm" | "md" | "lg" | "xl".

<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/tailwindcss@2.2.19/dist/tailwind.min.css" />
</svelte:head>

[shinokada]

If this is what we agree, I can update the icons.

[jjagielka]

Yes, that's exactly what I've meant.

One caveat though, the icons sizes must be aligned with text size so the below looks ok:

<div class="flex gap-2">
  <AddressCardSolid size="sm"><span class="text-sm">John Smiths</span>
</div>
<div class="flex gap-2">
  <AddressCardSolid size="lg"><span class="text-lg">John Smiths</span>
</div>

A task for @robert1508 ?

[shinokada]

I just released v0.1.2. Please check it and let me know what you think.

[jjagielka]

I think you made them too big. After all the main usage is to insert into UI like lists, navbars, etc.
Such a huge icons as h-32 won't be used normally. Of course user can set it like that, but generally it's not a purpose of the icon to be huge.

I would propose the right column settings - REPL

[shinokada]

I noticed that the Flowbite site uses, 2.5, 3, 3.5, 5, 6 etc.

How about these sizes?

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

[jjagielka]

That's sounds OK but I would not add 2xl. We can stop at w-8, as we don't have the size 2xl in flowbite-svelte.

[shinokada]

v0.2.2 is released.
I already used the class prop for Flowbite-Svette PR. I will update them in future using the size prop.