title: Using SVG in a JSON file as a file instead of code
body: <p>I'm working on a ReactJS app and I have some custom-made icons in SVG format so I can style them as needed for hover, themes, etc.</p>
  
  <p>I can't simply put the SVG code in the main Component, it has to be injected from a JSON file. Mainly because it will display as a repeater depending on how many I need.  </p>
  
  <p>My code works perfectly this way:</p>
  
  <pre><code>{userRole.map((role, index) =&gt; (
      &lt;div id={role.id} key={role.id}&gt;
          &lt;div&gt;
              {role.name}
              &lt;div className="role-icon"&gt;
                  {role.icon}
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  ))}
  
  //JSON FILE CODE
  
  exports.userRoles = [
      {
          id: '1',
          name: 'Administrator',
          icon: &lt;svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 116.35 94.22"&gt;&lt;title&gt;super-admin&lt;/title&gt;&lt;path d="M78.25,53.94,66.58,86.6H87.11V64.07a10,10,0,0,0-6.82-9.5Zm0,0" transform="translate(-5.82 -16.67)"/&gt;&lt;path d="M64,37A10.19,10.19,0,1,0,53.81,26.85,10.2,10.2,0,0,0,64,37Zm0,0" transform="translate(-5.82 -16.67)"/&gt;&lt;path d="M47.71,54.57a10,10,0,0,0-6.82,9.5V86.6H61.42L49.75,53.94Zm0,0" transform="translate(-5.82 -16.67)"/&gt;&lt;path d="M118,91.49H10A4.22,4.22,0,0,0,5.82,95.7v11A4.21,4.21,0,0,0,10,110.88H118a4.21,4.21,0,0,0,4.22-4.21v-11A4.22,4.22,0,0,0,118,91.49Zm0,0" transform="translate(-5.82 -16.67)"/&gt;&lt;path d="M103.58,26.34a14.82,14.82,0,0,0-11-4.92H78.7a15.51,15.51,0,0,1,1,5.43,15.67,15.67,0,0,1-31.34,0,15.51,15.51,0,0,1,1-5.43H35.44A14.8,14.8,0,0,0,20.73,37.84L26,86.6H35.4V64.07A15.5,15.5,0,0,1,46,49.35l4.62-1.42A2.74,2.74,0,0,1,54,49.62L64,74.8,74,49.62a2.74,2.74,0,0,1,3.38-1.69L82,49.35A15.5,15.5,0,0,1,92.6,64.07V86.6H102l5.31-48.76a14.84,14.84,0,0,0-3.69-11.5Zm-35.91,22-2.14,3.22,1,8.44-2,5.23a.59.59,0,0,1-1.12,0l-2-5.23,1-8.44-2.14-3.22a1.85,1.85,0,0,1,.24-2.18,1.94,1.94,0,0,1,1.43-.6h4a1.94,1.94,0,0,1,1.43.6,1.85,1.85,0,0,1,.24,2.18Zm0,0" transform="translate(-5.82 -16.67)"/&gt;&lt;/svg&gt;,
      },
      {
          id='2',
          name='user',
          icon= '&lt;svg&gt;...&lt;/svg&gt; ',
      },
      {
          id='3',
          name='tester',
          icon= '&lt;svg&gt;...&lt;/svg&gt; ',
      }
      ... you get the idea
  ];
  </code></pre>
  
  <p>Now, what I am trying to accomplish is putting all that svg code in their respective files and use it in the JSON. Perhaps something like this</p>
  
  <pre><code>exports.userRoles = [
      {
          id: '1',
          name: 'Administrator',
          icon: admin.svg,
      },
      {
          id='2',
          name='user',
          icon= user.svg,
      },
      {
          id='3',
          name='tester',
          icon= tester.svg',
      }
      ... you get the idea
  ];
  </code></pre>
  
  <p>p.s.. I am aware I can use svg inside an <code>&lt;img src={icon} /&gt;</code> However, I need to preserve the SVG properties so I can style it accordingly. So it can't be used as an image</p>
  
  <p>How can I do this? Save my SVG code in their respective files, use the file and path name in the JSON line, so I can call it in my JSX code and render it as SVG HTML code?</p>
  
  <p>Thanks in advance</p>