如何在 React 中使用 SVG 图标

随着 Web 应用程序日益复杂和漂亮，图标变得越来越重要。SVG（可缩放矢量图形）的出现对于图标来说是个重大的进步，因为它们既可以缩放又可以保持清晰度，而且相比较其他图标格式，SVG 图标可以更好地支持动画和交互效果。在本文中，我们将学习如何在 React 中使用 SVG 图标。

使用 SVG 图标

导入 SVG 图标

将 SVG 图标添加到 React 中的最简单方法是将 SVG 图标导入到 React 组件中。要导入 SVG 图标，请按照以下步骤操作：

1. 将 SVG 图标保存为独立的文件（例如 icon.svg）。

2. 在 React 组件中，导入 SVG 图标：

import { ReactComponent as MyIcon } from "./icon.svg";

注意：这里需要使用一个特殊的导入语法 ReactComponent as。

1. 通过使用 <MyIcon /> 的方式在组件中渲染 SVG 图标：

function App() {
  return (
    <div>
      <MyIcon />
    </div>
  );
}

修改 SVG 图标属性

在需要更改 SVG 图标的外观时，您可以通过 CSS 对 SVG 图标进行样式更改。例如，您可以更改填充、描边线条宽度、颜色和大小等样式属性 ，如下所示：

svg {
  fill: #FFF;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 24px;
  height: 24px;
}

添加交互效果

与其他图标格式相比，SVG 图标支持更多的交互效果。在 React 中，您可以使用 JavaScript 编写这些交互效果。

例如，您可以使用 onClick 属性将按钮单击事件绑定到 SVG 图标：

-- -------------------- ---- -------
-------- ----- -
  ----- ----------- - -- -- -
    ----------------- ----------
  --

  ------ -
    -----
      ------- --------------------- --
    ------
  --
-

您还可以使用 JSX 中的内联样式和 transform 对 SVG 图标进行更改。例如，以下代码将 SVG 图标旋转 45 度：

function App() {
  return (
    <div>
      <MyIcon style={{ transform: "rotate(45deg)" }} />
    </div>
  );
}

总结

在本文中，我们了解了如何在 React 中使用 SVG 图标。您可以将 SVG 图标保存为独立的文件并通过 ReactComponent as 将其导入到 React 组件中。您还可以使用 CSS 和 JavaScript 对 SVG 图标进行样式更改和交互效果的添加。希望这篇文章能够帮助您使用 SVG 图标改进 React 应用程序。

示例代码：https://codesandbox.io/s/how-to-use-svg-icons-in-react-tcs91

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a8c90148841e9894528c61