Closed ru88s closed 2 years ago
Duplicate of https://github.com/tailwindlabs/heroicons/issues/241
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 .
Duplicate of #241
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.
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" />
stroke-1 does not work. Is there a way to adjust the stroke-width?