在 React 中更改 SVG 的颜色

作者

在 React 中更改 SVG 的颜色

Change the color of an SVG in React

要在 React 中更改 SVG 的颜色：

  1. 不要在 SVG 上设置fill和stroke属性。
  2. 将 SVG 作为组件导入。
  3. 在组件上设置fill和strokeprops，例如
    <MyLogo fill="black" stroke="yellow" />.
应用程序.js
import {ReactComponent as MyLogo} from './my-logo.svg';

export default function App() {
  return (
    <div>
      <MyLogo fill="black" stroke="yellow" />
    </div>
  );
}

这是svg示例。

我的标志.svg
<svg width="400" height="400">
  <circle cx="100" cy="100" r="50" stroke-width="5" />
</svg>

反应改变svg颜色

请注意，我们没有在
元素上设置fill和stroke属性。svg

填充和描边只有在未在svg.

fillprop 设置对象内部的颜色，prop设置围绕对象绘制的线条的颜色。 stroke

或者，您可以将 SVG 粘贴到组件中并将颜色作为道具。

应用程序.js
function MyLogo({fill, stroke}) {
  // 👇️ paste SVG into a component
  // take fill and stroke colors as props
  return (
    <svg fill={fill} stroke={stroke} width="400" height="400">
      <circle cx="100" cy="100" r="50" stroke-width="5" />
    </svg>
  );
}

export default function App() {
  return (
    <div>
      <MyLogo fill="black" stroke="yellow" />
    </div>
  );
}

上面的代码示例实现了相同的结果，但我们将 SVG 直接存储在组件中，而不是从具有svg扩展名的文件中导入它。

请注意，该MyLogo组件将fill和stroke值作为 props 并将它们应用于svg元素。

如果您没有允许您将 SVG 作为组件导入的加载器，这应该是您的首选方法。

感谢Robyn Van Gool的大量更正并帮助我改进了文章。

–

发表评论