快捷導(dǎo)航

在React中使用SVG的幾種方式

更新時間：2024年11月27日 08:26:04 作者：窗邊的anini

在React中,SVG（Scalable?Vector?Graphics）的使用非常普遍,因為它們提供了可伸縮的矢量圖形,這對于現(xiàn)代Web應(yīng)用來說是非常重要的,以下是幾種常見的在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組件中，適用于不需要動態(tài)修改SVG屬性的場景。

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

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

效果展示：

內(nèi)聯(lián)SVG

將SVG代碼直接寫入組件中，這樣可以利用React的JSX語法對其進行操作，適用于需要動態(tài)修改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組件，這樣可以提供更多的交互性和可維護性，適用于需要復(fù)用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 組件封裝自定義圖標(biāo)

Ant Design 的 Icon 組件提供了一種封裝自定義圖標(biāo)的方法，適用于需要或者已經(jīng)引入了 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} />
);

優(yōu)缺點對比

方法	優(yōu)點	缺點
作為圖像元素直接引用	- 簡單直接 - 易于緩存和復(fù)用	- SVG代碼不能直接操作 - 不支持React的JSX語法
內(nèi)聯(lián)SVG	- 支持React的JSX語法 - 可以動態(tài)操作SVG屬性	- 文件體積可能增大 - 難以維護大型SVG代碼
React SVG組件	- 提供更多的交互性和可維護性	- 需要額外的組件封裝 - 可能增加構(gòu)建體積
使用SVG庫	- 簡化SVG的加載和使用 - 易于維護和更新	- 依賴外部庫 - 可能影響性能
利用Antd的Icon組件封裝自定義圖標(biāo)	- 易于集成到Ant Design UI - 風(fēng)格統(tǒng)一	- 僅限于Ant Design生態(tài) - 需要Ant Design的依賴

補充：fill="currentColor"

fill="currentColor" 是一個SVG屬性，用于設(shè)置元素填充顏色（fill）的值為當(dāng)前文本顏色，即 currentColor。

具體解釋

fill屬性：指定SVG元素（例如 <path>, <circle>）的填充顏色。
currentColor值：這是一個特殊的CSS關(guān)鍵字，表示“使用當(dāng)前的文本顏色”。這樣，如果父元素的 color 樣式發(fā)生變化，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。