title: How to render SVGs coming from api response using next/image or <img> in Next.js?
body: <p>I've got a bunch of svgs coming from an api response, which I get inside <code>useEffect</code>. Response looks like this</p>
  <pre><code>{svg1: 'https://remoteserver.com/assests/svg1.svg', ...and so on}
  </code></pre>
  <p>( These svgs aren't static coming from <code>/public</code> folder. So I don't import them at top.)
  I want to render them in nextjs using <code>next/image</code> or normal <code>&lt;img&gt;</code> tag, passing the url into <code>src</code>. I know that next.js by default don't support svgs.</p>
  <pre><code> &lt;Image alt='SVG from api'
          src={response.svg1}
          width={'45px'}
          height={'45px'}
          objectFit='contain' /&gt;
  </code></pre>
  <p>According to <a href="https://nextjs.org/docs/api-reference/next/image#dangerously-allow-svg" rel="nofollow noreferrer">docs</a>, this is possible with <code>dangerouslyAllowSVG</code>, but there is security risk here, so I don't want to go this route.
  I know packages like <a href="https://react-svgr.com/" rel="nofollow noreferrer">SVGR</a> and <a href="https://github.com/airbnb/babel-plugin-inline-react-svg" rel="nofollow noreferrer">babel-inline-svg</a> are there to solve the issue, but they are for using svgs as react components.
  I've also tried <a href="https://www.npmjs.com/package/next-images" rel="nofollow noreferrer">next-images</a> and made use of <code>withImages</code> inside <code>next.config.js</code>.</p>
  <pre><code>const withImages = require('next-images')
  module.exports = withImages({
       reactStrictMode: true,
       env: {
          BASE_URL: process.env.BASE_URL
          },
       images: {
        domains: ['remoteserver.com', 'remoteserver2.com']
        },
    webpack(config, options) {
      return config
    }
  })
  </code></pre>
  <p>But the build is failing when I try <code>next build</code>.</p>
  <pre><code>./static/images/Logo.png
  TypeError: unsupported file type: undefined (file: undefined)
  </code></pre>
  <p>What am I missing/doing wrong here ? Are there any alternate solutions ?</p>