shlogg · Early preview
Ramu Narasinga @karthik-m22

DOMParser In React-Scan: Parsing SVG Icons

DOMParser parses XML or HTML source code into a DOM Document. In react-scan, it's used to convert SVG strings into DOM elements for rendering.

I found DOMParser in react-scan source code as shown below.

const iconSprite = new DOMParser().parseFromString(
    ICONS,
    'image/svg+xml',
  ).documentElement;

    
    

    
    




This picked from line 54 in packages/scan/src/core/index.ts. In this article, we understand

What is DOMParser?
How it is used in react-scan?


  
  
  What is DOMParser?

The DOMParser interface provides the ability to parse XML or HTML source code from a string into a DOM Document.
You can perform the opposite operation — converting a DOM tree into XML or HTML source — using the XMLSerializer interface....