【问题标题】:How to change the line-width of a React Icon?如何更改 React 图标的线宽?
【发布时间】:2020-12-12 17:45:43
【问题描述】:

我四处寻找一个简单的解决方案,但找不到任何有效的方法。我正在尝试为我的输入表单减小这些 React SVG 图标的线宽,并使图标更薄。这可能吗?

我尝试使用 CSS stroke 和 stroke-width 属性,但没有用。

【问题讨论】:

  • 如果你能分享你的任何 SVG 图标的代码,我会看看它并让它工作。在 codepen 或 jsfiddle 上分享。 :)
  • 您的问题显示了研究工作。我已经评价了 :) 享受和快乐编码 :)

标签: css reactjs sass


【解决方案1】:
  1. 如果您直接使用 SVG 代码作为 React 组件。您需要在设置了 height, width and fill 属性的顶层的每个 SVG 代码中直接使用 stroke-width 属性。

试试这个:

stroke-width="1"
  1. 如果您使用 React-Icons,您可以直接在它们上设置一个 className 并将您的 CSS 应用到您的 CSS 文件中。

例如:

import { FaBars } from "react-icons/fa";

然后在使用 set 并应用你的 CSS 时。

<FaBars className="fa-bars" />

【讨论】:

  • 感谢您的回复。我正在使用 react-icons 库,并为图标提供各自的 CSS 类。我能够增加高度、宽度、设置颜色等,但我只是想知道我是否能够改变 CSS 中线条的宽度/粗体。
  • 而我们可以直接通过 .fa-bars path{ stroke-width: 67px; 来增加宽度但到目前为止减小初始宽度不起作用的宽度。很快就会看到解决方案 Insha Allah。如果我的回答对您有帮助,请点击勾选图标和评分来接受答案,以便其他开发人员也可以从您的问题中受益。谢谢你:)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2022-04-15
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-01-25
  • 1970-01-01
相关资源
最近更新 更多