In 3 simple steps.

Step 1: Set up webpack to load SVG files.

// in module block:
{
   test: /\.svg$/,
   loader: require.resolve('raw-loader'),
}

I was using svg-inline-loader initially, which on top of loading svg files raw provides some nice configurations. Sadly the maintenance of it has stopped for over a year, and the new webpack doesn’t like it:

DeprecationWarning: loaderUtils.parseQuery()...

Raw-loader works just fine. If you have beef with your svg files, you can always just edit them first.

Step 2: import SVG!

Importing the content of SVG files is as easy as:

import scrollSVG from './symbols/scroll.svg';

Then with whichever container you want the SVG to be in, just insert them using:

d3.select('#container').html(scrollSVG);

Step 3: Style.

SVG inside SVGs are automatically clipped. Don’t forget to unclip them by setting in styles:

svg svg {
  overflow: visible;
}

There you go, enjoy!