[FEAT]: Mini variation

[mvartuc]

Description

Would love to be able to use the "Mini" variation with all the icons. It's especially useful in header elements and form components. Saves time playing with the icon sizes and a lot of component libraries utilize it so it'd make it easier to implement them.

Additional Information

No response

[shinokada]

Can you try size="20"?

[mvartuc]

   <button
    type="button"
    class="group inline-flex items-center rounded-md bg-white bg-opacity-0 px-3 py-2 text-sm font-medium text-indigo-100 hover:bg-opacity-10 focus:outline-none"
    aria-expanded="false"
  >
    <span>Categories</span>
    <!-- Heroicon name: mini/chevron-down -->
    <svg
      class="ml-2 h-5 w-5 text-indigo-100"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 20 20"
      fill="currentColor"
      aria-hidden="true"
    >
      <path
        fill-rule="evenodd"
        d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
        clip-rule="evenodd"
      />
    </svg>
    <ChevronDown size="20" class="ml-2 h-5 w-5 text-indigo-100" />
  </button>

Here's the result: (Left one is the mini variation and the right one is outline with size="20")

[shinokada]

Try viewBox and variation props and let me know:

<ChevronDown size="20" viewBox="0 0 20 20" variation="solid" class="ml-2 h-5 w-5 text-indigo-100" />

[mvartuc]

Left:

<svg
  class="ml-2 h-5 w-5 text-indigo-100"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 20 20"
  fill="currentColor"
  aria-hidden="true"
>
  <path
    fill-rule="evenodd"
    d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
    clip-rule="evenodd"
  />
</svg>

Middle: <ChevronDown size="20" viewBox="0 0 20 20" variation="solid" class="ml-2 h-5 w-5 text-indigo-100" /> Right: <ChevronDown size="20" class="ml-2 h-5 w-5 text-indigo-100" />

[shinokada]

How about this?

<ChevronDown size="20" viewBox="0 0 20 20" class="ml-2 w-4 h-4 text-red-900" />
<ChevronDown size="20" viewBox="0 0 20 20" class="ml-2 w-3 h-3 text-red-900" />

[mvartuc]

left one is still the mini variation svg path, the right ones are w-4 h-4 and w-3 h-3 in that order

[shinokada]

Change the strokeWidth prop:

<ChevronDown size="20" viewBox="0 0 20 20" strokeWidth="2" class="ml-2 w-4 h-4 text-white" />

Top mini-svg and Bottom svelte-heros-v2.

When I have time, I will add mini.

[mvartuc]

Is there a reason you can't introduce a new variation? Just seems like there's no direct conversion. I've played with the stroke width as well just doesn't translate easily at all.

[shinokada]

I need to update my script to add 20/solid for all icons.

[shinokada]

Can you try the latest and let me know?

pnpm I -D 'svelte-heros-v2@latest

Use variation="mini":

<AcademicCap variation="mini" />

[mvartuc]

Works great! Thanks a lot for the quick fix.

[mvartuc]

The only problem is that the icon is focusable, I even added tabindex="-1" but it's still focusable when clicked directly on it.

  <button
    use:popover.button
    type="button"
    class:bg-opacity-10={$popover.expanded}
    class="group inline-flex items-center rounded-md bg-white bg-opacity-0 px-3 py-2 text-sm font-medium text-indigo-100 hover:bg-opacity-10"
    aria-expanded="false"
  >
    <span>Categories</span>
    <!-- Heroicon name: mini/chevron-down      -->
    <svg
      class="ml-2 h-5 w-5"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 20 20"
      fill="currentColor"
      aria-hidden="true"
    >
      <path
        fill-rule="evenodd"
        d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
        clip-rule="evenodd"
      />
    </svg>

    <ChevronDown variation="mini" class="ml-2 h-5 w-5" aria-hidden="true" tabindex="-1" />
  </button>

The left one doesn't produce any focus indicators but the right one does for some reason. I tried removed role="img" as well but it still does this.

[shinokada]

Can you add tabindex="-1" to the button?

tabindex="-1" works when I use it as it is.