Tailwind stroke-width classes are ignored due to the hardcoded path attribute

[andronocean]

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-coded stroke-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...

[andronocean]

I'd be happy to put together a PR when I have the chance, if there's interest in fixing this.

[perepelitca]

@andronocean That would be great! I just faced the same problem and moreover - with the same PlusCircle Outline icon.

[Rees1993]

@andronocean Would highly appreciate a PR if you get a chance!

[andronocean]

I'll see if I can get to this later this week :)

[Kerosz]

What's the status on this issue ?

[andronocean]

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.

[andronocean]

Heads up to anyone watching this, my PR resolving this is now available at #281. Tests and (if necessary) corrections are welcome!

[surjithctly]

Any idea why the PR not accepted yet? I don't see any reviews or discussions.

[andronocean]

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.

[sbc640964]

What's up with that?

[JoshMoreno]

Workaround - All credit goes to @natemate90 👏 Found here - https://github.com/tailwindlabs/heroicons/pull/281#issuecomment-952812522

@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>

[elisaado]

@JoshMoreno thank you! Setting

path,
circle,
ellipse,
line,
polygon,
polyline,
rect {
  stroke-width: inherit;
}

in a global css file worked for me

[sgoodluck]

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.

import { ChevronRightIcon } from '@heroicons/react/24/solid';
...
<ChevronRightIcon className="h-4 w-4 stroke-[4px]" />
...

Seems to have no effect on latest

[terrasoff]

Use stroke-width attribute for @heroicons/react pack:

<ClockIcon className="size-6" stroke-width={1} />