在反应中添加 SVG - JavaScript

在现代的 Web 开发中，SVG 成为了越来越流行的选择。SVG 是一种嵌入式的矢量图形格式，可以在 Web 页面上提供良好的可伸缩性和互操作性。

在这篇文章中，我们将介绍如何在 React 中添加 SVG，并说明可用的一些工具和库。

如何在 React 中添加 SVG

直接嵌入

最简单的方法是将 SVG 代码直接嵌入到组件中。可以将 SVG 文件中的代码复制到 React 组件中，并将其放置在 <svg> 标记中。

function MyComponent() {
  return (
    <svg width='100' height='100'>
      <rect x='0' y='0' width='100' height='100' fill='red' />
    </svg>
  )
}

SVG 作为组件

可以将 SVG 文件作为 React 组件使用，以便在需要时轻松地重复使用。可以使用 create-react-app 提供的 svg-react-loader 工具将 SVG 文件转换为可以导入的 React 组件。

import {ReactComponent as Logo} from './logo.svg';

function MyComponent() {
  return (
    <div>
      <Logo className='logo' />
      <h1>Welcome to my app</h1>
    </div>
  )
}

在上述代码中，我们使用 as 属性将 SVG 组件重命名为 Logo，并将其导入到我们的 MyComponent 组件中。然后，我们可以像使用其他组件一样使用它。

使用 React 组件库

如果您不想手动创建 SVG，或者没有设计 SVG 的经验，可以尝试使用的 React 组件库，例如 react-icons（包含了许多常用的图标）或 react-svg（可浏览 NPM 包）。

应该注意什么

SVG 高度宽度

当您添加 SVG 时，必须设置其高度和宽度。SVG 中的所有元素都会相对于该尺寸进行坐标定位。如果您不设置宽度和高度，则 SVG 不会被渲染。

SVG 中的 CSS 修改

您可以使用 CSS 来修改 SVG 图像的样式。但是，请注意，SVG 元素的一些 CSS 属性与常规 HTML 元素具有不同的默认值。例如，fill 属性的默认值为 black 而不是 none。

SVG 可访问性

当您创建可访问的应用程序时，请确保您的 SVG 具有适当的标签和描述性文本。这将使屏幕阅读器能够正确处理图像，并为使用者提供准确的上下文。

结论

SVG 对于现代 Web 开发来说越来越重要，并且可以很容易地在 React 上添加。在添加 SVG 时，请记住设置高度和宽度，使用 CSS 调整样式，并确保为其提供适当的访问性。