前言
在前端开发中，svg 是一个非常重要的图形格式。它可以很方便地实现矢量图形，并且在不同分辨率或大小下都能保持清晰度。而 react-svg 是一个非常优秀的 npm 包，它提供了一种方便的方式来加载 svg 图像，同时也可以让我们更好地在 react 应用中使用 svg。
安装
要使用 react-svg，我们首先需要安装它。可以使用 npm 或者 yarn 进行安装：
npm install react-svg # 或者 yarn add react-svg
使用
react-svg 提供了一个 React 组件 Svg，我们可以使用它来加载 svg 图像。Svg 组件有以下三个属性：
- src：svg 图像的路径，可以是绝对路径，也可以是相对路径；
- loader：可选的 svg loader；
- fallback：可选的组件，当加载 svg 图像失败时会显示它。
下面是一个简单的使用示例：
-- -------------------- ---- -------
------ ----- ---- ------------
-------- ----- -
------ -
-----
---- -------------- --
------
--
-注意事项
在使用 react-svg 时，有几个需要注意的细节：
- Svg 组件只能渲染单个 svg 元素，如果需要同时渲染多个 svg 元素，需要使用多个 Svg 组件；
- 如果需要使用一些 React 的属性，例如 ref 或者 onClick，需要将它们应用到 Svg 组件的包裹元素上，而不是 svg 元素上；
- 在一些情况下，需要手动设置 svg 图像的大小，可以使用 viewBox 和 width、height 属性来实现。
示例代码
下面是一个完整的 react-svg 使用示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---- ------------
-------- ----- -
------ -
-----
----
--------------
----- ---- -- ----------------- -
--------- -- -- ---------- ---------- -
---------- ------------ -- ---- ---------- -
------- ------- -------- ------- -------- -
--
------
--
-总结
react-svg 是一个非常方便的 npm 包，它使得在 React 应用中使用 svg 图像变得非常简单。在使用 react-svg 时，我们需要注意 Svg 组件只能渲染单个 svg 元素，需要手动设置 svg 图像的大小，同时也要考虑一些 React 的属性无法直接应用到 svg 元素上的细节。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f10183f403f2923b035c220