tailwindlabs / heroicons

A set of free MIT-licensed high-quality SVG icons for UI development.
https://heroicons.com
MIT License
21.35k stars 1.28k forks source link

Hericon React Library - Plus Circle Outline #236

Closed Rees1993 closed 3 years ago

Rees1993 commented 3 years ago

I am using the new React Heroicons library, specifically using the outlined plus-circle. I am trying to change the stroke width to 1, using the stroke-1 class like the code below.

<PlusCircleIcon className="h-16 w-16 stroke-1 text-gray-700" />

This is not changing the width and the only way I have found is to manually enter the JSX and change the stroke width.

If I remove the stroke-width from the svg, and add the classes directly, the stroke width is automatically 1 and can be changed using stroke-2 or stroke-3.

<svg
  xmlns="http://www.w3.org/2000/svg"
  className="h-6 w-6"
  fill="none"
  viewBox="0 0 24 24"
  stroke="currentColor"
  className="h-16 w-16 text-gray-700"
>
  <path
    strokeLinecap="round"
    strokeLinejoin="round"
    d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"
  />
</svg>

Apologies if I have misunderstood how this is meant to be used.

andronocean commented 3 years ago

See #241 — this is a problem across all of the outline icons in both forms (JSX libraries and SVG).

Rees1993 commented 3 years ago

I will close this issue as it isn't just this icon but all of them which #241 addresses