将内联svg用作具有样式化组件的伪元素会返回错误

Question

我有一个NextJS应用程序，并使用react-inline-svg。这会自动将svg转换为React组件。但是，每当我在伪元素上尝试使用此svg时，都会出现以下错误：

Module parse failed: Identifier 'React' has already been declared (2:7)
You may need an appropriate loader to handle this file type.
| import React from "react";
> import React from "react";
| import styled, { css } from 'styled-components';

我不确定该如何解决。

import styled, { css } from 'styled-components';

import GreenArrow from '../../../static/images/greenarrow.svg';

h3::before {
    content: '';
    position: absolute;
    background-image: url(${GreenArrow});
    background-size: 8px 12px;
    background-position: center;
    background-repeat: no-repeat;