Using SVG Icon causes Module parse failed: Unexpected keyword 'var'

Okay so I'm using a basic svg icon in my sidebar and out of 3 icons used, only this one is causing the error for some reason. It works fine in dev mode, so npm start works, but when I try to build it, it fails. So I create a component to return svg like

exclamationpointicon.js

import React from 'react';

const ExclamationPointIcon = () => (
    <svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path
            d="M10 6.889V10m0 3.111h.008M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z"
            stroke="#EF4444"
            strokeWidth="1.67"
            strokeLinecap="round"
            strokeLinejoin="round"
        />
    </svg>
);

export { ExclamationPointIcon };

I import it

sidebar.js

import {
    SidebarSignoutIcon,
    CircledArrowIcon,
    ExclamationPointIcon,
} from 'components/Icons';

And I just use it

sidebar.js

{someCondition && !someOther ? (
  <Wrapper>
    <ExclamationPointIcon />
    <p>Enter ID</p>
  </Wrapper>
 ) : null}

The error is referencing line 29 inside sidebar which is a styled component line:

padding: 0;

Here's the full error text

ERROR in ./app/components/SideBar/index.js 29:69
Module parse failed: Unexpected keyword 'var' (29:69)
You may need an appropriate loader to handle this file type.
| import styled from 'styled-components';
| import { ButtonReset } from 'components/Styled';
> import { SidebarSignoutIcon, CircledArrowIcon, ExclamationPointIcon, var _ref2 =
| /*#__PURE__*/
| _jsx(Wrapper, {}, void 0, _jsx(ExclamationPointIcon, {}), _jsx("p", {}, void 0, "Enter ID")); } from 'components/Icons';
 @ ./app/containers/App/index.js 62:0-41 373:64-71
 @ ./app/app.js
 @ multi ./node_modules/react-app-polyfill/ie11.js ./app/app.js

If I remove the <ExclamationPointIcon /> line it works just fine, but this doesn't make any sense since the same file is using two more icons that are created/imported in the same fashion.