【问题标题】: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,它应该可以工作。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2020-05-11
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2021-12-12
        • 1970-01-01
        • 2019-04-06
        • 2020-07-12
        相关资源
        最近更新 更多