导出组件

Question

考虑：

import LOGO from './something.svg';
<img src={LOGO} className={'logo'} alt="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 ....

Answer 1

您可以使用webpack加载程序将SVG转换为react组件，然后可以在其中添加className来更改填充或将prop填充直接传递给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;

Answer 2

导出组件

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

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

要导入此组件，您应该使用

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

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

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

填充颜色

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

Answer 3

您必须在组件中导入反应，但要更改填充颜色，必须将svg称为组件，而不是将其src标记为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 prop），并在CSS中使用该类名来更改颜色，例如：

.myclass path {
  fill: #ffffff;
}

Answer 4

在您的jsx中：

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

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

在您的CSS中：

.logo > path {
   fill: "white"
}

这应该很好

在React JS中更改SVG填充颜色

4 个答案:

导出组件

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

填充颜色