Props like `stroke-width` are not passed down to `svg` element's children

[czottmann]

Issue description

Props passed to Icon are only applied to the "top-level" svg element but not its children. I noticed this while working w/ Tabler icons. For example, when I tell Icon to use a stroke width of 1 and to use the color red, the emitted svg element shows both those properties but they're ignored by the contained path element. (See example below.)

I don't know whether that's by design but I was expecting my settings being passed down the chain. I understand that might not always be desirable, especially when it comes to multi-color SVGs etc. But is there a way to force the props down to the path etc.? If not, might such functionality (hidden behind a toggle) be a useful addition to astro-icon?

Possible way to do it: iterate over children, filter their attributes for those that correlate w/ a passed-in prop and replace those.

Input

<Icon
  name="tabler:brand-gitlab"
  size="48"
  stroke-linecap="square"
  stroke-linejoin="square"
  stroke-width={1}
  stroke="red"
/>

Expected output

Note: I've sorted the attributes for easier visual scanning.

<svg
  astro-icon="tabler:brand-gitlab"
  height="48"
  stroke-linecap="square"
  stroke-linejoin="square"
  stroke-width="1"
  stroke="red"
  viewBox="0 0 24 24"
  width="48"
  ><path
    d="m21 14-9 7-9-7L6 3l3 7h6l3-7z"
    fill="none"
    stroke-linecap="square"
    stroke-linejoin="square"
    stroke-width="1"
    stroke="red"></path>
</svg>

Actual output

Note: I've sorted the attributes for easier visual scanning.

<svg
  astro-icon="tabler:brand-gitlab"
  height="48"
  stroke-linecap="square"
  stroke-linejoin="square"
  stroke-width="1"
  stroke="red"
  viewBox="0 0 24 24"
  width="48"
  ><path
    d="m21 14-9 7-9-7L6 3l3 7h6l3-7z"
    fill="none"
    stroke-linecap="round"
    stroke-linejoin="round"
    stroke-width="2"
    stroke="currentColor"></path>
</svg>

[stramel]

This is as expected. We only pass to the top-level svg tag. If you check out the other Iconify components, they also do the same codesandbox example. This feels like it might be an issue with the IconSet more than anything.

I will leave this open for now to see if there are more people running into this issue before deciding to add a feature for it.

[stramel]

Dug into this a bit more for the next refactor. It seems this is an issue with the Iconify Tabler Icon Collection. You should be able to use the custom icon packs as a workaround.

// src/icons/tabler.js
import { createIconPack } from 'astro-icon/pack';
export default createIconPack({ package: "@tabler/icons", dir: "icons" });

I'm going to close this out since it has a workaround and is an issue with Iconify. I have also filed a ticket upstream https://github.com/iconify/icon-sets/issues/63

[czottmann]

@stramel Thank you!