Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot alter stroke width #211

Open
summit-dm opened this issue Mar 7, 2024 · 0 comments
Open

Cannot alter stroke width #211

summit-dm opened this issue Mar 7, 2024 · 0 comments

Comments

@summit-dm
Copy link

What version of astro-icon are you using?

No response

Astro Info

Astro                    v4.4.5
Node                     v20.11.1
System                   macOS (arm64)
Package Manager          pnpm
Output                   static
Adapter                  none
Integrations             @astrojs/tailwind
                         @astrojs/sitemap
                         @astrojs/react
                         astro-icon

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

Cannot access styles on the path, specifically stroke-width property. I have imported the Iconify Ion (@iconify-json/ion) library and am using the component like so:

Seems the rendered SVG has a symbol element inside it and the path is inside, meaning I cannot change the stroke-width.

Not sure why the symbol element is in there, if it even needs to be there. When just copying the SVG from Iconify there is no symbol element present. So what is outputting that? SVGO? I don't see a setting that would do that unless I'm missing something.
Would be awesome if you are able to expose the style properties of the path as properties on the component itself, similar to size.
Tried selecting the SVG path with CSS all different ways and tricks, nothing. My current solutions is to not use Astro Icon and just copy past the SVG so there is no symbol element. Then I can style however I like. I am also using Tailwind CSS but that doesn't seem to be affecting the SVG at all.

What's the expected result?

To be able to easily style the SVG properties. Would like to change the size of stroke-width either with CSS or as a prop on the component such as:
<Icon name"ion:chevron-forward" stroke-width="28px" />

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-ppnwvh?file=src%2Fpages%2Findex.astro

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant