在 React JS 中更改 SVG 填充颜色

Posted 2023-03-05

【中文标题】在 React JS 中更改 SVG 填充颜色

【英文标题】：Change SVG Fill color in React JS

【发布时间】：2020-07-03 21:05:05

【问题描述】：

考虑：

import LOGO from './something.svg';
<img src=LOGO className='logo' /> // 

如何在 ReactJS 中更改 SVG 的填充颜色？

我也尝试过使用 ReactComponent 但我得到了'ReactComponent' is not exported from ....

import  ReactComponent as Logo1  from './something.svg';
<Logo1 /> // doesn't work : 'ReactComponent' is not exported from ....

【问题讨论】：

你在使用 create-react-app 吗？

@SergiiShvager ：不知道，我该如何检查？

你导出组件吗？看起来你不在代码中

依赖项（package.json）中有反应脚本吗？

@SergiiShvager：不，我没有。

【参考方案1】：

您必须在组件中导入 react，但要更改 svg 的填充颜色，必须将其作为组件调用，而不是将其设置为 src for img 标签。

例如，如果您有一个 svg 文件，请将其设为 React 组件，例如：

import React from 'react';

const Icon = (fill, className ) => (
  <svg className=className version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="umbrella" viewBox="0 0 596 597">
    <title>Umbrella</title>
    <desc>Umbrella icon</desc>
    <path fill=fill class="shaft" d="M260.4,335.7 L260.4,478 C260.4,543.1 313.4,596.1 378.5,596.1 C443.6,596.1 496.6,543.1 496.6,478 C496.6,457.5 479.9,440.8 459.4,440.8 C438.9,440.8 422.2,457.5 422.2,478 C422.2,502.2 402.7,521.7 378.5,521.7 C354.3,521.7 334.8,502.2 334.8,478 L334.8,335.7 L260.4,335.7 L260.4,335.7 Z"></path>
    <path class="fabric" d="M558,335.7 C578.5,335.7 595.2,319 595.2,298.5 L595.2,294.8 C593.4,132 460.4,0.9 297.6,0.9 L297.6,0.9 C133.9,0.9 0,134.8 0,298.5 C0,319 16.7,335.7 37.2,335.7 L558,335.7 L558,335.7 Z M77.2,261.3 C94.9,156.2 187,75.3 297.6,75.3 C408.2,75.3 500.4,156.2 518,261.3 L77.2,261.3 L77.2,261.3 Z"></path>
  </symbol>
</svg>
);

export default Icon;

并使用fill 调用组件中的图标。

<Icon fill="#ffffff" className="myclass" />

另一种解决方案是传递一个类似于 fill 属性的类名，并在 CSS 中使用该类名来更改颜色，例如：

.myclass path 
  fill: #ffffff;

【讨论】：

我需要使用 SVG 的文件名，通过路径，而不是通过注入的代码。谢谢。

@JAN 正如 Joe Lloyd 所说，您必须使用原始 svg 来编辑填充

【参考方案2】：

您可以使用 webpack 加载器将 SVG 转换为 react 组件，您可以在其中添加 className 来更改填充或直接将 prop fill 传递给 svg react 组件。

SVGR 是一个很棒的工具，可以将你的 SVG 转换成你可以使用的 React 组件。那么我们该如何设置呢？

首先，我们安装包 $ npm install @svgr/webpack --save-dev.

然后我们更新我们的 Webpack 配置规则以将 SVGR 用于 SVG：

const webpack = require('webpack');

module.exports = 
  entry: './src/index.js',
  module: 
    rules: [
      //...
      
        test: /\.svg$/,
        use: ['@svgr/webpack'],
      ,
    ],
  ,
  //...
;

现在我们可以将 SVG 图像作为 React 组件导入并在我们的代码中使用它，如下所示：

import React from 'react';
import ReactLogo from './logo.svg';

const App = () => 
  return (
    <div className="App">
      <ReactLogo fill="white" />
    </div>
  );

export default App;

【讨论】：

我如何处理第一段代码const webpack = require('webpack'); .... ？这个组件叫什么名字？

一般是webpack.config.js文件

如果它没有在你的配置中的任何地方使用，那么只需删除它;)

我应该把这个文件放在哪里？ React 项目如何知道它的存在？

我想你应该已经有了 webpack 配置。 Webpack 正在捆绑您的项目并将插件添加到您的代码中（就像这个 svg 之一）。搜索 webpack.config.js

【参考方案3】：

在你的 jsx 中：

import ReactComponent as Logo from './something.svg';

const MyComponent = () => <Logo className="logo" />

在你的 CSS 中：

.logo > path 
   fill: "white"

这应该可以正常工作

【参考方案4】：

导出组件

import React from 'react';
import LOGO from './something.svg';

const Logo = () => <img src=LOGO className='logo' />;
export default Logo;

要导入这个组件，你应该使用

import Logo from 'path/to/react/logo/component';

确保您在构建过程中有一个 svg 处理程序

默认情况下，Webpack 不知道如何处理 svg 文件，因此会导致构建时间失败。您需要为其添加插件或加载器。或者使用诸如 Next.js 或 Gatsby 之类的内置 webpack 设置的东西。

填充颜色

至于使用填充颜色，当您使用图像标签在图像标签中设置您的 svg 时，这是不可能的。您必须在应用中使用原始 svg，这样您才能编辑填充。

【讨论】：

但是你在哪里改变填充颜色？

好问题@JAN

@Goran_Ilic_Ilke 你不能用图像标签改变颜色。您需要直接加载 svg。