[英]Change SVG Fill color in React JS
考虑:
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 ....
您必须在组件中导入 react,但要更改填充颜色,必须将 svg 作为组件调用,而不是将其作为img
标签的src
。
例如,如果您有一个 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 。
<Icon fill="#ffffff" className="myclass" />
另一种解决方案是传递一个 className 像 fill prop 并在 CSS 中使用该类名来更改颜色,例如:
.myclass path {
fill: #ffffff;
}
您可以使用 webpack 加载器将 SVG 转换为 react 组件,然后您可以添加 className 来更改填充或直接将 prop 填充传递给 svg react 组件。
SVGR 是一个很棒的工具,可以将您的 SVG 转换为您可以使用的 React 组件。 那么我们如何设置呢?
首先,我们安装包 $ npm install @svgr/webpack --save-dev。
然后我们更新我们的 Webpack 配置规则以对 SVG 使用 SVGR:
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;
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';
默认情况下,Webpack 不知道如何处理 svg 文件,因此它会导致构建时失败。 您需要向其中添加插件或加载程序。 或者使用像 Next.js 或 Gatsby 这样的内置 webpack 设置的东西。
至于使用填充颜色,当您使用图像标签在图像标签中设置 svg 时,这是不可能的。 您必须在您的应用程序中使用原始 svg,这样您就可以编辑填充。
在你的 jsx 中:
import { ReactComponent as Logo } from './something.svg';
const MyComponent = () => <Logo className="logo" />
在你的 css 中:
.logo > path {
fill: "white"
}
这应该工作得很好
这在 react-native 中对我有用。 如果你有 svg 文件,你可以像这样在 function 组件中使用它。
例如。
import React from 'react';
import {Svg, Path} from 'react-native-svg';
const Icon = ({fill = 'white', height, width}) => (
<Svg height={height} width={width} viewBox="0 0 15 15">
<Path d="xxx xxx xxx" fill={fill} />
</Svg>
);
然后导入这个组件并传递所需的填充道具值
希望这对你也有用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.