在 CSS 中设置蚂蚁设计图标的粗细答案

【问题标题】：Set the thickness of ant design icons in CSS在 CSS 中设置蚂蚁设计图标的粗细
【发布时间】：2021-04-04 14:10:24
【问题描述】：

Attached Image of icon to set the thickness

我尝试在 css 中使用 stroke 和 stroke-width 来设置圆的粗细，但它们都不起作用。图标是从 antdesign 导入的。有人可以帮忙吗？非常感激。谢谢

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

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

【问题讨论】：

标签： css reactjs ant-design-pro

【解决方案1】：

我总是喜欢将我的样式保留在 css 中，所以我做到了：

-在我的 jsx 中：

<PlusCircleOutlined className="icon-bold" />

-在我的风格中：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

感谢您的回答，它确实有效。但是有一个问题。如果我将笔画宽度设置为 30，则将图标放在图像上时会出现白色外边框。你能建议一种方法来设置不影响背景颜色的厚度吗？

【解决方案3】：

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

【讨论】：