SVG 图片如何自定义颜色

背景介绍

在使用SVG图片时，我们经常遇到需要在相同图片上使用不同颜色的情况。为了实现自定义颜色，我们可以利用React和CSS的特性来处理SVG图像的颜色。本文将介绍如何使用React组件和CSS来实现SVG的颜色自定义。

代码实现

typescript
import {FC, useMemo} from 'react';

interface Props {
  color: string;
  size: number;
  svg: string;
}

export const ColorSvg: FC<Props> = ({color, svg, size}) => {
  const style = useMemo(() => {
    const maskImage = `url(${svg})`;
    const iconStyle = {
      background: color,
      maskImage,
      WebkitMaskImage: maskImage,
    };
    const sizeStyle = {width: `${size}px`, height: `${size}px`};
    return {...iconStyle, ...maskStyle, ...sizeStyle};
  }, [svg, color, size]);
  return <div style={style} />;
};

const maskStyle = {
  maskRepeat: 'no-repeat',
  maskPosition: 'center',
  maskSize: 'cover',
  WebkitMaskRepeat: "no-repeat", 
  WebkitMaskPosition: "center", 
  WebkitMaskSize: "cover"
};

使用示例

使用ColorSvg组件非常简单。只需将所需的属性传递给组件即可。

javascript
<ColorSvg color="#ff0000" svg="path/to/svg.svg" size={24} />

总结

通过使用React和CSS的特性，我们可以轻松地实现SVG的颜色自定义。在React组件中，我们可以根据传入的属性动态生成样式，并将其应用于SVG元素。这种方法使我们能够根据需要轻松修改SVG的颜色，为我们的应用程序带来更大的灵活性和可定制性。