I want you to support stroke-width in heroicons/react

[ru88s]

import { BookOpenIcon } from "@heroicons/react/outline";

<BookOpenIcon className="w-10 stroke-1"/>

stroke-1 does not work. Is there a way to adjust the stroke-width?

[sanderfish]

Duplicate of https://github.com/tailwindlabs/heroicons/issues/241

[ukasyah-dev]

Is there a way to adjust the stroke-width?

Yes, it's pretty simple. You just need to write some css as follows:

/* Set heroicon's stroke width */
.heroicon-sw-2 path {
  stroke-width: 2 !important;
}
.heroicon-sw-1\.75 path {
  stroke-width: 1.75 !important;
}
.heroicon-sw-1\.5 path {
  stroke-width: 1.5 !important;
}
.heroicon-sw-1\.2 path {
  stroke-width: 1.2 !important;
}

Finally:

<BookOpenIcon className="w-10 h-10 heroicon-sw-1.5" />

Although the above example uses the jsx version, it can also be applied to the svg version #241 .

[bradlc]

Duplicate of #241

[Fabian-Andres]

With Tailwind ^3.0 you could use arbitrary properties like this:

<BookOpenIcon className="w-10 h-10 [&>path]:stroke-[2]" />

you can even use stroke-[2px] px, rem, em, etc.

[andrewsmithdesign]

Heya for anyone browsing this, I just got it to work without the [&>path]: attribute, just straight stroke-1 and stroke-2 etc worked (as well as stroke-[1.5] etc)

<DocumentTextIcon className="h-10 w-10 stroke-1 text-gray-400" />