如何将 SVG 与 React 结合使用并生成图标

Question

有什么地方可以上传图标并获取 SVG 字符串向量吗？

此外，下面代码中的标签是什么？<g> <path> 和 viewBox、data-original、xmlns、d标签是？

最近，是否值得使用 SVG 代替常规图标？

  <svg viewBox="0 0 512 512">
    <g xmlns="http://www.w3.org/2000/svg" fill="currentColor">
      <path d="M0 0h128v128H0zm0 0M192 0h128v128H192zm0 0M384  0h128v128H384zm0 0M0 192h128v128H0zm0 0"
    data-original="#bfc9d1"           
       />
    </g>
 </svg>

Answer 1

这是将 SVG 与 React 结合使用的非常好的指南。 https://www.sanity.io/guides/import-svg-files-in-react

有许多在线转换器可用于创建 svg 例如 https://www.pngtosvg.com/

SVG <g> 元素用于将 SVG 形状组合在一起。
SVG <path> 元素表示要绘制的矢量是路径。也可以是 polyline 或形状，例如 circle.
<viewBox> 属性是四个值的列表：min-x、min-y , 宽度和高度
xmlns 属性是 XML 命名空间，这是使用正确的 DTD - Doctype 声明 所必需的
<d> 属性定义将要绘制的路径。

根据我的经验，使用内联 SVG 时 SVG 的执行速度要快得多。页面加载的主要阻塞元素是顺序加载的文件数量。使用内联 svg 加载页面文件中的所有图像。

SVG 的主要优点是在以不同分辨率缩放或查看时矢量相对于光栅的可扩展性。

如何将 SVG 与 React 结合使用并生成图标

How to use SVG with React and generate icons

html

javascript

css

svg

reactjs