React 中如何引入 SVG 图片

在 React 中，引入 SVG 图片是一项非常常见的任务。SVG 是一种基于 XML 的矢量图形格式，可以通过文本方式呈现。在 Web 开发中，SVG 被广泛应用于图标等 UI 设计元素上。本文将介绍在 React 中如何引入 SVG 图片。

直接作为组件引入

在 React 中，可以直接将 SVG 文件作为组件引入。为此，需要使用 import 语句将文件导入，并将其作为组件使用。示例如下：

import { ReactComponent as Icon } from './icon.svg';

function MyComponent() {
  return <Icon />;
}

在上面的例子中，我们使用了 ReactComponent 导出，将 SVG 文件导入并存储在变量 Icon 中。这个变量实际上是一个组件，可以直接在 JSX 代码中使用。

需要注意的是，ReactComponent 导出语法只适用于 Create React App 和 Webpack 的默认配置。如果您使用的不是这些架构，可能需要手动配置引入 SVG 组件的方式。

使用 img 元素引入

使用 img 元素也可以引入 SVG 文件。与其他图像格式不同，SVG 文件不必先加载到图片资源中，可以直接将文本内容映射到 src 属性上。示例如下：

function MyComponent() {
  return (
    <div>
      <img src="./icon.svg" alt="icon" />
    </div>
  );
}

需要注意的是，使用 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