React + styled-components：伪类中的内联数据 SVG 破坏了样式

Question

在使用 styled-components 3.3.2 从react-boilerplate派生的应用程序中，我尝试在伪类中显示SVG，如下所示：

import arrowDown from 'images/ico-arrow-down.svg'
import arrowUp from 'images/ico-arrow-up.svg'

const Tab = styled.div`
  &:after {
    content: url("${arrowUp}");
    position: relative;
  }
  &.active:after {
    content: url("${arrowDown}");
  }
`;

但是，第一次使用会content: url("${...}")破坏块中所有以下样式定义。

在这种情况下&.active:after，样式将被忽略，而定义position: relative中的样式&:after将被解析。

SVG 看起来格式正确，并且确实经过了 url 编码。然而，经过多次测试，SVG 中破坏样式的部分似乎是transform="translate(...)"属性中的括号，它没有进行 url 编码。他们应该是吗？

如果我在后台定义中分配 SVG 而不是伪类内容，一切都会按预期工作，因此一般设置似乎不存在问题。

这是一个错误吗？如果是的话在哪里？我该如何解决这个问题（除了在背景中使用 SVG）？我可以绕过数据解析并以某种方式简单地插入 SVG 文件 URL（作为 Webpack / React 新手询问）吗？

Answer 1

const Tab = styled.div`
  &::after {
    content: url("images/ico-arrow-up.svg");
    position: relative;
  }
  &.active::after {
    content: url("images/ico-arrow-down.svg");
  }
`;