SVG（Scalable Vector Graphics）是一种矢量图形格式，它可以轻松地缩放和调整大小而不会失真。在前端开发中，使用 SVG 可以更加灵活地展现图形效果。本文将介绍如何在 React 中嵌入 SVG，并提供示例代码以供学习和参考。
嵌入 SVG 的方法
在 React 中，有两种嵌入 SVG 的方法：作为组件或作为图像文件引用。以下是两种方法的详细说明：
1. 将 SVG 作为组件嵌入
将 SVG 文件作为一个组件进行导入和使用是最简单的方法。React 提供了内置的 <svg> 标签，可以直接在 JSX 中使用。例如，下面是一个包含一个圆形的 SVG 文件 circle.svg：
<svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg>
要在 React 中使用该 SVG 文件，需要将其导入到组件中：
-- -------------------- ---- -------
------ - -------------- -- ------ - ---- ---------------
-------- ------------- -
------ -
-----
------- --
------
--
-上述代码中，ReactComponent 是特殊的导入类型，指示 webpack 将 SVG 文件转换为 React 组件。
2. 引用 SVG 图像文件
另一种嵌入 SVG 的方法是引用 SVG 文件作为图像文件，然后将其嵌入到 <img> 标签中。例如，下面是一个包含一个圆形的 SVG 文件 circle.svg：
<svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg>
要在 React 中使用该 SVG 文件，可以将其作为图像文件进行导入：
-- -------------------- ---- -------
------ ------ ---- ---------------
-------- ------------- -
------ -
-----
---- ------------ ------------ --
------
--
-上述代码中，circle 是 SVG 文件的引用。在使用时，需要将其放置在 src 属性中。
示例代码
下面是一个完整的示例代码，演示如何在 React 中嵌入 SVG：
-- -------------------- ---- -------
------ - -------------- -- ------ - ---- ---------------
------ -------- ---- -----------------
-------- ------------- -
------ -
-----
------ --- -------
------------
------- --
------------
---- -------------- -------------- --
------
--
-以上代码中，Circle 组件和 triangle 图片都是从不同的 SVG 文件中导入的。
结论
本文介绍了如何在 React 中嵌入 SVG，包括两种方法：将 SVG 作为组件嵌入和引用 SVG 图像文件。通过本文的学习和示例代码，读者可以更好地理解如何在 React 中使用 SVG，并应用到实际开发中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12381