如何更改 React 图标的线宽？

Question

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

我尝试使用 CSS 笔画和笔划宽度属性，但它不起作用。

Answer 1

1. 如果你直接使用 SVG 代码作为 React 组件。您需要在设置属性的stroke-width顶层的每个 SVG 代码中直接使用该属性。height, width and fill

尝试这个：

stroke-width="1"

2. 如果您使用 React-Icons，您可以直接在它们上设置 className 并在 CSS 文件中应用 CSS。

例如：

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

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

<FaBars className="fa-bars" />