在 CSS 中设置 ant design 图标的粗细

Question

Attached Image of icon to set the thickness

我曾尝试在 css 中使用 stroke 和 stroke-width 设置圆的粗细，但 none 成功了。图标是从 antdesign 导入的。有人可以帮忙吗？非常感激。谢谢

目前我的代码看起来像这样（React）

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

Answer 1

您似乎有错字：storke: "#408021"。将其更新为 stroke，它应该可以工作。

Answer 2

你有一个错字“storke”，应该是“stroke”，但这不是问题所在。要使线条更粗，您需要使用 stroke 属性等于 white 或等于背景颜色来擦除部分填充区域：

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

Answer 3

我总是喜欢将我的风格保留在 css，所以我做到了：

-在我的 jsx 中：

<PlusCircleOutlined className="icon-bold" />

-我的风格是：

.icon-bold {
  stroke-width: 25;
  stroke: black;
  color: black;
}

在 CSS 中设置 ant design 图标的粗细

Set the thickness of ant design icons in CSS

css

reactjs

ant-design-pro