How to use SVG with React and generate icons

user_15453019 0
Viewed 115

Is there any place where I can upload an icon and get an SVG string vector?

Also, what are those tags in the code below?<g> <path> and viewBox, data-original, xmlns, d tags are?

Lately, Is the performance worth using SVG in place of regular icons?

  <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>
reactjs svg css html javascript
1 Answers

Here's a very good guide to using SVG with react. https://www.sanity.io/guides/import-svg-files-in-react

There are many online convertors you can use to create svg's e.g https://www.pngtosvg.com/

  • The SVG <g> element is used to group SVG shapes together.
  • The SVG <path> element indicates that the vector to draw is a path. The could alternatively be a polyline or a shape e.g circle.
  • The <viewBox> attribute is a list of four values: min-x, min-y, width and height
  • The xmlns attribute is XML Namespace which is needed to use the correct DTD - Doctype Declaration
  • The <d> attribute defines the path that will be drawn.

From my experience SVG performs significantly faster when using inline SVG's. The main blocking element for page loading is the numberous amount of files that load sequentially. Using inline svg loads all the images within the page file.

The major benefit of SVG's are the scalability of vector over raster when zooming or viewing at differant resolutions.

user_21202610
Related