<!DOCTYPE html><html><body><script>(function() { try {
    var mode = localStorage.getItem('xstyled-color-mode');
    if (mode) document.body.classList.add('xstyled-color-mode-' + mode);
  } catch (e) {} })();</script><div><div><div><div><div><div><div><a href="/"><div><noscript><picture><source/><img src="/static/211e479945572498ea6e93739c92cf93/5f18b/logo.png"/></picture></noscript></div><h2>SVGR</h2></a><div><div><svg><path></path></svg><input/></div></div><nav><ul><li><a href="/playground/">Playground</a></li><li><a href="/docs/getting-started/">Usage</a></li><li><a href="https://github.com/gregberge/svgr"><svg><path></path></svg></a></li><li><button><svg><path></path></svg></button></li></ul></nav></div></div></div></div><div></div></div></div><div></div></div><script>
  
  
  if(true) {
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  }
  if (typeof ga === "function") {
    ga('create', 'UA-154496255-2', 'auto', {});
      
      
      
      
      
      }</script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script>/*<![CDATA[*/window.pagePath="/playground/";/*]]>*/</script><script>/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-706bb75387de52aa9bbc.js"],"app":["/app-bbbed11f5d43679f4133.js"],"component---node-modules-smooth-doc-src-pages-404-js":["/component---node-modules-smooth-doc-src-pages-404-js-4e487e9c89cd05da35a9.js"],"component---src-pages-docs-cli-mdx":["/component---src-pages-docs-cli-mdx-3d3c2bc55e9ec5d80623.js"],"component---src-pages-docs-configuration-files-mdx":["/component---src-pages-docs-configuration-files-mdx-41075c338f18258d85a8.js"],"component---src-pages-docs-custom-templates-mdx":["/component---src-pages-docs-custom-templates-mdx-98d9e7f5c83aa48f8a40.js"],"component---src-pages-docs-custom-transformations-mdx":["/component---src-pages-docs-custom-transformations-mdx-e60eeb01f1275c89c12a.js"],"component---src-pages-docs-ecosystem-mdx":["/component---src-pages-docs-ecosystem-mdx-1087bb7797b64efec4c5.js"],"component---src-pages-docs-getting-started-mdx":["/component---src-pages-docs-getting-started-mdx-bfeb5e77780545dec8ea.js"],"component---src-pages-docs-jest-mdx":["/component---src-pages-docs-jest-mdx-b39a1d2a38bd7863c495.js"],"component---src-pages-docs-motivation-mdx":["/component---src-pages-docs-motivation-mdx-7cdbcd8ca17d010b434b.js"],"component---src-pages-docs-node-api-mdx":["/component---src-pages-docs-node-api-mdx-53babca1a5939d491564.js"],"component---src-pages-docs-options-mdx":["/component---src-pages-docs-options-mdx-746660ac04d0bbaa7b7a.js"],"component---src-pages-docs-parcel-mdx":["/component---src-pages-docs-parcel-mdx-035301697c462ea3027c.js"],"component---src-pages-docs-rollup-mdx":["/component---src-pages-docs-rollup-mdx-691a9989af824f400baf.js"],"component---src-pages-docs-support-mdx":["/component---src-pages-docs-support-mdx-a8260cd78d32c941066b.js"],"component---src-pages-docs-testing-mdx":["/component---src-pages-docs-testing-mdx-042634aea799a922cbe4.js"],"component---src-pages-docs-webpack-mdx":["/component---src-pages-docs-webpack-mdx-baa5eeedb33b89e10997.js"],"component---src-pages-index-js":["/component---src-pages-index-js-01fd4139ebd857a5fe76.js"],"component---src-pages-playground-mdx":["/component---src-pages-playground-mdx-a56fe0893cf981d71d32.js"]};/*]]>*/</script><script src="/polyfill-706bb75387de52aa9bbc.js"></script><script src="/webpack-runtime-37af3b2e61f94a337727.js"></script><script src="/framework-892a3274de517370df09.js"></script><script src="/app-bbbed11f5d43679f4133.js"></script><script src="/f0e45107-e3b5cac4ecd0ca6f04cd.js"></script><script src="/component---src-pages-playground-mdx-a56fe0893cf981d71d32.js"></script></body></html>

<ul><li><a href="/playground/">Playground </a> </li><li><a href="/docs/getting-started/">Usage </a> </li><li><a href="https://github.com/gregberge/svgr">   </a> </li><li>    </li> </ul>

Playground - SVGR

Other curated ideas on this topic: