Closed bytrangle closed 1 year ago
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.
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"
?
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
As I understand, you can only style the top-level
<svg>
element, the one with data attribute[astro-icon]
like below:Targeting child of the SVG, like
path
element won't work:I would like to know if this is the intended behavior of Astro Icon. Is there any plan to allow for styling SVG children?