How to force the server to convert svg into a react component?

Question

css

Good afternoon.
I'm trying to use react-svg-loader to convert svg to React Component.
Here are the webpack settings:

{
        test: /\.svg$/,
        include: [/src\/components/],
        loader: 'babel!react-svg?' + JSON.stringify({
          svgo: {
            // svgo options
            floatPrecision: 2
          }
        })
      }

When assembling, the file turns into this construction:
file.svg

import React from "react";
export default class SVG extends React.Component {
  render() {
    return <svg xmlns="http://www.w3.org/2000/svg" width="212.27" height="410.87" viewBox="0 0 199.00001 385.19423" {...this.props}><path d="M173.74 31.86h14.17v336.62h-14.17z" fill="#fff" fillRule="evenodd" /><path fill="#6fb3d2" d="M173.74 177.14h14.17v191.34h-14.17z" /><path d="M.5 28.44v345c15 15 183 15 198 0v-345c-15-15-183-15-198 0zm180.32 3.42c3.55 0 7.09 3.54 7.09 7.09v322.44c0 3.54-3.54 7.09-7.09 7.09-3.54 0-7.08-3.55-7.08-7.1V38.96c0-3.55 3.54-7.09 7.08-7.09z" opacity=".98" fill="#ccc" stroke="#333" /><text style={{
        lineHeight: "125%"
      }} x="212.02" y="452.9" fontWeight="400" fontSize="6.25" fontFamily="sans-serif" letterSpacing="0" wordSpacing="0" transform="translate(-109.07 -445.48)"><tspan x="212.02" y="452.9" style={{
          textAlign: "center"
        }} fontSize="10" textAnchor="middle">{this.props.tag}</tspan></text></svg>;
  }

}

When I try to add it with import:

import React from 'react';
import SvgComp from './file.svg';

export default class MyClass extends React.Component {
    render() {
        return <SvgComp />
    };
}

When you go to the server address, everything loads first, but after refreshing the page, an error 500 appears

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in.

Here is the server.js file:

// Add ES6/ES7 support
require('babel-core/register');

// Ignore .css and other includes
['.css', '.less', '.sass', '.ttf', '.woff', '.woff2', '.svg'].forEach((ext) => require.extensions[ext] = () => {});
require('babel-polyfill');
require('server.js');

As a result, it turns out that the file is processed on the client side, but not on the server side.

Answer 1

.big-banner {
  float:left;
  width: 50%;
  height: 500px;
}

.small-banner {
  margin-left: 50%;
  height: 250px;
}

Answer 2

Everything worked.
Won with babel plugin: https://www.npmjs.com/package/babel-plugin-inline-...