在React中使用SVG的几种方式

在React中，SVG（Scalable Vector Graphics）的使用非常普遍，因为它们提供了可伸缩的矢量图形，这对于现代Web应用来说是非常重要的。以下是几种常见的在React中使用SVG的方法，每种方法都有其特定的用例和最佳实践。

一个 SVG 示例

<?xml version="1.0" encoding="UTF-8"?>
<svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>heart</title>
  <path d="M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5-24.4 23.9-43.5 51.7-56.9 82.8-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3 0.1-35.3-7-69.6-20.9-101.9z" />
</svg>

作为图像元素直接引用

最直接的方式是将SVG文件作为图像元素<img>引入到React组件中，适用于不需要动态修改SVG属性的场景。

import React from 'react';
import HeartSvg from './heart.svg';

export function SvgImgDemo() {
  return <img src={HeartSvg} style={{ color: 'pink' }} />;
}

效果展示：

内联SVG

将SVG代码直接写入组件中，这样可以利用React的JSX语法对其进行操作，适用于需要动态修改SVG属性的场景。

import React from 'react';

export function SvgDemo() {
  return (
    <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">
      <path d="M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5-24.4 23.9-43.5 51.7-56.9 82.8-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3 0.1-35.3-7-69.6-20.9-101.9z" />
    </svg>
  );
}

React SVG组件

将SVG封装为React组件，这样可以提供更多的交互性和可维护性，适用于需要复用SVG组件的场景。

import React from 'react';

export const HeartIcon = () => (
  <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">
    <path d="M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5-24.4 23.9-43.5 51.7-56.9 82.8-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3 0.1-35.3-7-69.6-20.9-101.9z" />
  </svg>
);

export function SvgComponentDemo() {
  return <HeartIcon />;
}

使用SVG库

使用像react-svg这样的库可以更简单地加载和使用SVG文件，适用于需要处理大量SVG文件的场景。

import React from 'react';
import { ReactSVG } from 'react-svg';

export const ReactSvgComp = () => <ReactSVG src="heart.svg" />;

利用 Antd 的 Icon 组件封装自定义图标

Ant Design 的 Icon 组件提供了一种封装自定义图标的方法，适用于需要或者已经引入了 Ant Design 库的项目。

import React from 'react';
import Icon from '@ant-design/icons';
import { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';

const HeartSvgComp = () => (
  <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">
    <path d="M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5-24.4 23.9-43.5 51.7-56.9 82.8-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3 0.1-35.3-7-69.6-20.9-101.9z" />
  </svg>
);

export const IconSvg = (props: Partial<CustomIconComponentProps>) => (
  <Icon style={{ color: 'pink' }} component={HeartSvgComp} {...props} />
);

优缺点对比

方法	优点	缺点
作为图像元素直接引用	- 简单直接 - 易于缓存和复用	- SVG代码不能直接操作 - 不支持React的JSX语法
内联SVG	- 支持React的JSX语法 - 可以动态操作SVG属性	- 文件体积可能增大 - 难以维护大型SVG代码
React SVG组件	- 提供更多的交互性和可维护性	- 需要额外的组件封装 - 可能增加构建体积
使用SVG库	- 简化SVG的加载和使用 - 易于维护和更新	- 依赖外部库 - 可能影响性能
利用Antd的Icon组件封装自定义图标	- 易于集成到Ant Design UI - 风格统一	- 仅限于Ant Design生态 - 需要Ant Design的依赖

补充：fill="currentColor"

fill="currentColor" 是一个SVG属性，用于设置元素填充颜色（fill）的值为当前文本颜色，即 currentColor。

具体解释

• fill属性 ：指定SVG元素（例如 <path>, <circle>）的填充颜色。
• currentColor值 ：这是一个特殊的CSS关键字，表示"使用当前的文本颜色"。这样，如果父元素的 color 样式发生变化，SVG元素的填充颜色会自动匹配。

使用示例

<div style="color: blue;">
  <svg width="100" height="100" viewBox="0 0 24 24">
    <path fill="currentColor" d="M12 2L2 22h20L12 2z"/>
  </svg>
</div>

在上面的例子中，<path> 元素的填充颜色会变成蓝色，因为它继承了父 <div> 的文本颜色 color: blue。

优势

使用 fill="currentColor" 的一个主要好处是增强了SVG的灵活性和可重用性------无需修改SVG代码本身就能通过外部CSS控制其颜色。