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 #241

[ukasyah99]

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.