'How to insert SVG file using React , having it's path/url?

I have an array of objects as shown below, I want to display coresponding svg file of each object.icon, the first object is using ion-icons element and it works but how do I render svg file having only it's path/url? I want to avoid importing the svg files because there will be like 70 of them :)

  [{
    id: 1,
    name: 'HTML',
    icon: <ion-icon class='skill-icon' name='logo-html5' />,
  },
  {
    id: 2,
    name: 'CSS',
    icon: './img.svg' />,
  },]

Solution 1:^[1]

import svgName from './img.svg'

  [{
    id: 1,
    name: 'HTML',
    icon: <ion-icon class='skill-icon' name='logo-html5' />,
  },
  {
    id: 2,
    name: 'CSS',
    icon: svgName,
  },]

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Ilian Futekov

'How to insert SVG file using React , having it's path/url?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]