在 React 中显示 SVG 文件

1. 在 React 中使用 src 属性包含 svg
2. 在 create-react-app 2.0 中包含本地托管的 svg 文件和 React

React 经常被誉为最流行的 JavaScript 框架之一，但实际上，它只是一个用于构建用户界面的库。与任何其他 Web 应用程序一样，具有图像、视频和其他视觉内容的 React 应用程序比其他应用程序更具吸引力。

如今，越来越多的开发人员使用 .svg 图标来显示重要的视觉效果，例如徽标。

在 React 中使用 src 属性包含 svg

有多种方法可以在 React 应用程序中显示 .svg 文件。本文讨论了在 React 应用程序中包含 .svg 视觉效果的两种方法。

使用 svg 文件扩展名来显示可视文件的一种方法是使用 <img> 元素的 src 属性。让我们看一个具有 .svg 文件的示例。

export default function App() {
  return (
    <div className="App">
      <img
        src={"https://svgshare.com/i/e77.svg"}
        style={{ width: 50, height: 50 }}
      ></img>
    </div>
  );
}

如你所见，源文件采用 svg 格式，但如果你查看 CodeSandbox，此代码可以正常工作并且确实显示了应有的视觉效果。

但是，将这些文件显示为 <img> 元素意味着它们将被视为普通图像并失去 svg 文件的独特功能。

因此，以这种方式显示 svg 图像可能会删除它的一些独特属性。最好在本地托管它们。

在 create-react-app 2.0 中包含本地托管的 svg 文件和 React

create-react-app 包的更新版本包括必要的加载器，并允许你导入本地存储的 .svg 资产并在不牺牲任何属性的情况下使用它们。

下面是使用 import 语句来显示 .svg 文件的示例。

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

我们指定 svg 文件的相对路径并导入名为 export 的 ReactComponent，尽管我们在应用程序中使用 as 语句将其引用为 LogoSvg。

最好记住 ReactComponent 名称不是可选的，并且有必要在 create-react-app 中导入 svg 文件。