在 React 中更改 SVG 的颜色

在 React 中更改 SVG 的颜色:

  1. 不要在 SVG 上设置 fill 和 stroke 属性。
  2. 将 SVG 作为组件导入。
  3. 在组件上设置填充和描边道具,例如 <MyLogo fill="black" stroke="yellow" />
import {ReactComponent as MyLogo} from './my-logo.svg';

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

下面是 svg 的示例。

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

在 React 中更改 SVG 的颜色

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

如果尚未在 svg 中定义 fill 和 stroke ,则仅在通过组件属性设置时才会应用它们。

fill 属性设置对象内部的颜色,而 **stroke** 属性设置对象周围线条的颜色。

或者,我们可以将 SVG 粘贴到组件中并将颜色作为属性

function MyLogo({fill, stroke}) {
  // 👇️ 将 SVG 粘贴到组件中
  // 将 fill 和 stroke 颜色作为属性
  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 值作为属性并将它们应用到 svg 元素。

如果我们没有可以将 SVG 作为组件导入的加载器,这应该是我们的首选方法。

免责声明:
1.本站所有内容由本站原创、网络转载、消息撰写、网友投稿等几部分组成。
2.本站原创文字内容若未经特别声明,则遵循协议CC3.0共享协议,转载请务必注明原文链接。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.本站所有源码与软件均为原作者提供,仅供学习和研究使用。
5.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。
火焰兔 » 在 React 中更改 SVG 的颜色