怎么在React中更改SVG的颜色？

在 React 中更改 SVG 的颜色

要在 React 中更改 SVG 的颜色，请执行以下操作：

• 不要在 SVG 上设置fill和stroke属性。
• 将 SVG 作为组件导入。
• 在组件上设置fill和stroke道具。

import {ReactComponent as MyLogo} from './my-logo.svg';

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

举例

下面是 SVG 组件，这里命名为 my-logo.svg：

<svg width="400" height="400">
  <circle cx="100" cy="100" r="50" stroke-width="5" />
</svg>

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

如果它们尚未在 svg 中定义的话，fill和stroke将仅在通过组件参数设置时应用。

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

创建一个以colors为 props 渲染 SVG 的组件

或者，可以将 SVG 粘贴到组件中，并将 colors 作为 props。

function MyLogo({fill, stroke}) {
  // 👇️ SVG 粘贴到组件中
  // 
  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 元素。

以上关于怎么在React中更改SVG的颜色？的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。