在 React 中，引入 SVG 图片是一项非常常见的任务。SVG 是一种基于 XML 的矢量图形格式，可以通过文本方式呈现。在 Web 开发中，SVG 被广泛应用于图标等 UI 设计元素上。本文将介绍在 React 中如何引入 SVG 图片。
直接作为组件引入
在 React 中，可以直接将 SVG 文件作为组件引入。为此，需要使用 import 语句将文件导入，并将其作为组件使用。示例如下：
------ - -------------- -- ---- - ---- ------------- -------- ------------- - ------ ----- --- -
在上面的例子中，我们使用了 ReactComponent 导出，将 SVG 文件导入并存储在变量 Icon 中。这个变量实际上是一个组件，可以直接在 JSX 代码中使用。
需要注意的是，ReactComponent 导出语法只适用于 Create React App 和 Webpack 的默认配置。如果您使用的不是这些架构，可能需要手动配置引入 SVG 组件的方式。
使用 img 元素引入
使用 img 元素也可以引入 SVG 文件。与其他图像格式不同，SVG 文件不必先加载到图片资源中，可以直接将文本内容映射到 src 属性上。示例如下：
-------- ------------- -
------ -
-----
---- ---------------- ---------- --
------
--
-需要注意的是，使用 img 元素引入 SVG 图片时，一定要加上 alt 属性。这是因为 SVG 是基于文本绘制的，如果图像无法显示，屏幕阅读器将无法正确显示图像描述信息。
使用 object 元素引入
使用 object 元素也可以引入 SVG 文件。object 元素会将 SVG 文件作为文档嵌入到 HTML 页面中，可以在需要时修改其样式和属性。示例如下：
-------- ------------- -
------ -
-----
------- -------------------- ------------------
---- ----------------------- ---------- --
---------
------
--
-在上面的例子中，我们使用了 type 属性将 MIME 类型设置为 image/svg+xml。这意味着浏览器将以 SVG 文本格式解析文件。如果浏览器无法解析 SVG，object 元素将退化为带有替代文本的 img 标签。
结论
通过本文，我们介绍了在 React 中引入 SVG 图片的三种方式：直接将其作为组件引入、使用 img 元素，和使用 object 元素。无论您选择哪种方式，都可以轻松地将 SVG 图片作为 React 应用程序的一部分来使用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6722113f2e7021665e0a2ae0