在 React 中显示 SVG 文件
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
文件。
Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn