如何更改 React 图标的线宽？

Question

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

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

Answer 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" />