Stroke Width not working on SVG with React

[josegomes123]

I'm running a react app with Tailwind and using HeroIcons, trying to apply className="stroke-current stroke-1" or any different stroke-width to the JSX element does nothing,

I have to edit the strokeWidth manually at <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}

Any idea if this is supposed to happen? I tried reproducing the bug, but I dont know any code playground online that supports both React and Tailwind.

[simonswiss]

Hey!

Chances are that you are applying stroke-1 to the svg element, but the strokeWidth attribute is overriding this because it's declared on the path element itself.

If you add className="stroke-1" to the path which has the strokeWidth attribute, it should works (I just tried on a NextJS project with the academic-cap heroicon, and it worked 👍

[josegomes123]

That was the issue! Thank you!

So is it normal to put all the styling of the SVG files on the path tag (ie colors and stuff) or should I limit that only to stroke width?

[simonswiss]

I haven't had to do it before, but there is nothing wrong with applying classes to a specific <path> element within an SVG to style it 👍

I usually let the fill, stroke-width etc be defined by the path attributes, but you can override it with Tailwind classes!

[Ankushch27]

Hi @simonswiss, but this means that we have to use directly copy and use the svg code to apply the stroke-width to the path.
The problem is what to do in case of importing the icons as React components?

[bowetech]

This is not working for me
<SpeakerphoneIcon className="text-yellow-400 h-12 w-12 stroke-1" />
What exactly should my code look like

[kwadoskii]

Same for me and it didn't work for me.

<XIcon className="h-5 text-gray-700 stroke-1" />

[dpkshrma]

The solution mentioned above applies to the entire svg being copied into the react component and adding stroke-1 classname to path manually which is not ideal for heroicons as we would import icons from @heroicons/react lib like so:

import { IconComponent } from '@heroicons/react/outline'

A better solution is warranted imho.

[dpkshrma]

ref tailwindlabs/heroicons#241