Gatsby: SVG importing as a React component rather than path / data URI

[tshelburne]

Description

When I use an SVG (both in CSS via url(...) and JS via import), the imported data is a React component.

Steps to reproduce

I'm not really sure - it happens every time I import any SVG.

import icon from '../_images/icons/icon-premium-app.svg'

Expected result

I would expect the following data URI

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ni41MiA0Ni41MiI+PHRpdGxlPmljb24tcHA8L3RpdGxlPjxwYXRoIGQ9Ik0zNi42MywwSDkuODhBOS45MSw5LjkxLDAsMCwwLDAsOS44OFYzNi42NGE5LjkxLDkuOTEsMCwwLDAsOS44OCw5Ljg4SDM2LjYzYTkuOTIsOS45MiwwLDAsMCw5Ljg5LTkuODhWOS44OEE5LjkyLDkuOTIsMCwwLDAsMzYuNjMsMFptLjcsMzJhNC45Myw0LjkzLDAsMCwxLTQuOTMsNC45MkgyMC4zVjI5LjU2SDI0YzQuOTMsMCw4Ljg5LTIuNjQsOC44OS03Ljcydi0uMDZjMC00LjQ5LTMuMTctNy42LTguNDItNy42aC05VjM2Ljg5SDE0LjA1QTQuOTIsNC45MiwwLDAsMSw5LjEyLDMyVjEzLjZhNC45Miw0LjkyLDAsMCwxLDQuOTMtNC45MkgzMi40YTQuOTMsNC45MywwLDAsMSw0LjkzLDQuOTJabS0xNy02LjcxVjE4LjU0SDI0YzIuNDIsMCwzLjkzLDEuMTYsMy45MywzLjMzdi4wNmMwLDEuODktMS40MiwzLjMzLTMuODQsMy4zM1oiIGZpbGw9IiNmZmYiLz48L3N2Zz4=

Actual result

This shows up in it's place as a string (although if I console.log the imported value, it appears to be an actual function reference to the module, devtools image below)

var React = __webpack_require__(/*! react */ "./node_modules/react/index.js");

function IconPremiumApp (props) {
    return React.createElement("svg",props,[React.createElement("title",{"key":0},"icon-pp"),React.createElement("path",{"d":"M36.63,0H9.88A9.91,9.91,0,0,0,0,9.88V36.64a9.91,9.91,0,0,0,9.88,9.88H36.63a9.92,9.92,0,0,0,9.89-9.88V9.88A9.92,9.92,0,0,0,36.63,0Zm.7,32a4.93,4.93,0,0,1-4.93,4.92H20.3V29.56H24c4.93,0,8.89-2.64,8.89-7.72v-.06c0-4.49-3.17-7.6-8.42-7.6h-9V36.89H14.05A4.92,4.92,0,0,1,9.12,32V13.6a4.92,4.92,0,0,1,4.93-4.92H32.4a4.93,4.93,0,0,1,4.93,4.92Zm-17-6.71V18.54H24c2.42,0,3.93,1.16,3.93,3.33v.06c0,1.89-1.42,3.33-3.84,3.33Z","fill":"#fff","key":1})]);
}

IconPremiumApp.defaultProps = {"viewBox":"0 0 46.52 46.52"};

module.exports = IconPremiumApp;

IconPremiumApp.default = IconPremiumApp;

Environment

  System:
    OS: macOS 10.14.1
    CPU: x64 Intel(R) Core(TM) i7-5557U CPU @ 3.10GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.14.1 - ~/.nvm/versions/node/v10.14.1/bin/node
    npm: 6.5.0 - ~/.nvm/versions/node/v10.14.1/bin/npm
  Browsers:
    Chrome: 71.0.3578.98
    Firefox: 62.0.3
    Safari: 12.0.1
  npmPackages:
    gatsby: ^2.0.19 => 2.0.19
    gatsby-image: ^2.0.15 => 2.0.15
    gatsby-plugin-manifest: ^2.0.5 => 2.0.5
    gatsby-plugin-offline: ^2.0.5 => 2.0.5
    gatsby-plugin-react-helmet: ^3.0.0 => 3.0.0
    gatsby-plugin-react-svg: ^2.0.0 => 2.0.0
    gatsby-plugin-sass: ^2.0.2 => 2.0.2
    gatsby-plugin-sharp: ^2.0.7 => 2.0.7
    gatsby-source-filesystem: ^2.0.4 => 2.0.4
    gatsby-transformer-sharp: ^2.1.4 => 2.1.4

[sidharthachatterjee]

Hey @tshelburne

gatsby-plugin-react-svg uses svg-react-loader under the hood which converts imported SVGs into React components.

If you remove it, you should get data URIs for SVGs.

You can also exclude the specific SVG or folder in exclude the plugin's options (https://github.com/jacobmischka/gatsby-plugin-react-svg#readme)

options: {
  rule: {
    exclude: /_images/icons
  }
}

[tshelburne]

@sidharthachatterjee Wow, that's remarkably obvious, thanks for that.

[sidharthachatterjee]

You're absolutely welcome, @tshelburne 🙂

Closing this for now, please comment if there is anything else