Search code examples
cssreactjsant-design-pro

Set the thickness of ant design icons in CSS


Attached Image of icon to set the thickness

I have tried to set the thickness of the circle using stroke and stroke-width in css but none of them worked. The icon is imported from the antdesign . Anybody can help with this? Much appreciated. Thanks

Currently my code looks like this(React)

<PlusCircleOutlined
    style={{
         fontSize: "50px",
         color: "#408021",
         storke: "#408021",
         strokeWidth: "2px",
        }}
 />
enter code here

Solution

  • You have a typo error "storke", should be "stroke", but this is not the problem. To make the lines more thickness you will need to use the stroke property equal white or equal to the background color to erase part of the filled area:

      <PlusCircleOutlined  style={{
            fontSize: "50px",
             color: "#408021",
             strokeWidth: "30", // --> higher value === more thickness the filled area
             stroke: "white" 
      }}/>