Style SVG children

[bytrangle]

As I understand, you can only style the top-level <svg> element, the one with data attribute [astro-icon] like below:

<style>
    [astro-icon] {
        color: blue;
        /* OR */
        fill: blue;
    }
</style>

Targeting child of the SVG, like path element won't work:

<style lang="css">
  /* Nothing happens here*/
    [astro-icon] path {
        fill: blue;
    }
</style>

I would like to know if this is the intended behavior of Astro Icon. Is there any plan to allow for styling SVG children?

[stramel]

Thanks for bringing this up. Can you provide some more details or perhaps an example showing the issue?

We have had a couple discussions about styling children before starting in #49. Let me know if you have a different issue.

[matthacksteiner]

Sorry to hijacking this conversation - a real world example would be this:

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 40 40">
    <rect fill="#000" width="38.25" height="38.25" x=".875" y=".875" stroke="#000" stroke-width="1.75" class="rect" rx="4.125" />
    <path fill="#000" d="m21.535 26.773 7.893-6.009v-1.422l-7.893-6.009v5.405H10.37v2.63h11.165v5.405Z" />
</svg>

How can we style only the path with fill="#aaa"?

[stramel]

should be the same way as in #49

svg path {
  fill: #aaa;
}

https://stackblitz.com/edit/github-ex6klk-31wfte?file=src/pages/index.astro

Closing as duplicate of #49