-
Notifications
You must be signed in to change notification settings - Fork 1.3k
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
Tailwind stroke-width classes are ignored due to the hardcoded path attribute #241
Comments
I'd be happy to put together a PR when I have the chance, if there's interest in fixing this. |
@andronocean That would be great! I just faced the same problem and moreover - with the same PlusCircle Outline icon. |
@andronocean Would highly appreciate a PR if you get a chance! |
I'll see if I can get to this later this week :) |
What's the status on this issue ? |
@Kerosz I haven't had time to do this yet, and I still haven't seen anything from the actual heroicons maintainers about it... Nonetheless, I now need this urgently myself at work, so you can expect a fork & PR in the next few days. |
Heads up to anyone watching this, my PR resolving this is now available at #281. Tests and (if necessary) corrections are welcome! |
Any idea why the PR not accepted yet? I don't see any reviews or discussions. |
Not sure. It does seem popular based on reactions, but I'm obviously biased :) That said, my PR has gotten a bit out-of-date. I'll try to find some time in the next few days to catch up to the newer commits in the main repo. I'd love to hear from some heroicons maintainers what they want to do, in case any changes are necessary. |
What's up with that? |
Workaround - All credit goes to @natemate90 👏 @layer base {
/* stroke-width: 2 is a browser default and can be overridden with class="stroke-1" etc. */
svg {
stroke-width: 2;
}
path,
circle,
ellipse,
line,
polygon,
polyline,
rect {
stroke-width: inherit;
}
} Then stuff like this will work <template>
<PhotographIcon class="w-5 h-5 stroke-1"/>
</template>
<script setup lang="ts">
import {PhotographIcon} from '@heroicons/vue/outline'
</script> |
@JoshMoreno thank you! Setting
in a global css file worked for me |
I know this is rather stale at this point -- but I wanted to check if recent changes have broken the ability to set arbitrary stroke widths when importing the icon directly? e.g.
Seems to have no effect on latest |
I've started using the outline icons in a new project, with Tailwind CSS. I've run into a problem since Tailwind's stroke-width
stroke-1
etc. classes don't work, because each<path>
has a hard-codedstroke-width="2"
attribute that overrides the inherited class style.Could
stroke-width="2"
be placed on the<svg>
element instead? According to the spec this is still inherited (so defaults work), but a class style takes precedence because of specificity. My own quick tests on latest Chrome, Safari, and Firefox confirm this.I'm using the SVG code directly (inlining in HTML), though it seems like this would be an issue for all the methods. I can fix this manually on each icon, but it's a pain...
The text was updated successfully, but these errors were encountered: