如何在 React.js 中使用 SVG

在 React.js 中，SVG 可以像普通的 HTML 元素一样进行处理。这意味着您可以使用 JSX 语法创建 SVG 元素。在本文中，我们将介绍如何在 React.js 中使用 SVG。

在 React.js 中使用 SVG 的方法

有两种方法在 React.js 中使用 SVG：

1. 直接在 JSX 中使用 SVG 元素
2. 将 SVG 图像作为组件导入并在 JSX 中使用

直接在 JSX 中使用 SVG 元素

要在 JSX 中使用 SVG 元素，只需使用 SVG 标记并将其视为常规 HTML 标记即可。例如：

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

将 SVG 图像作为组件导入并在 JSX 中使用

将 SVG 图像作为组件导入并在 JSX 中使用是一种更有效的方法。这使您的代码更具可读性，并使您可以在多个位置重复使用 SVG 元素。

要将 SVG 图像作为组件导入和使用，请执行以下操作:

1. 创建一个名为“SVGIcon.js”的新文件，该文件包含您的 SVG 代码。
2. 在文件中导入 React 和 SVG 代码。
3. 创建一个新的“SVGIcon”组件，其中包含您的 SVG 元素。
4. 在您的组件中包含必要的属性（如“width”和“height”）。
5. 在您的 JSX 中使用“SVGIcon”组件。

在“SVGIcon.js”中，您可以将您的 SVG 代码包装在一个无标题的<svg> 元素中，如下所示：

import React from 'react';

const SVGIcon = (props) => (
    <svg width={props.width} height={props.height} viewBox="0 0 24 24">
        /* your SVG code here */
    </svg>
);

export default SVGIcon;

您可以使用props.width和props.height来指定您的 SVG 元素的大小。

要在 JSX 中使用该组件，请使用<SVGIcon>标签，并传递必要的属性。例如：

import React from 'react';
import SVGIcon from './SVGIcon'

const ExampleComponent = () => (
    <div>
        <SVGIcon width="50" height="50" />
    </div>
);

export default ExampleComponent;

总结

在本文中，我们介绍了在 React.js 中使用 SVG 的两种方法。您可以直接在 JSX 中使用 SVG 元素，也可以将 SVG 图像作为组件导入并在 JSX 中使用。无论采用哪种方法，都在React.js中使用SVG非常容易。