6

In an app derived from react-boilerplate using styled-components 3.3.2 I am trying to display SVGs in pseudo-classes like this:

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}");
  }
`;

However, the first use of content: url("${...}") breaks all following style definitions in the block.

In this case &.active:after styles are ignored, while position: relative in the &:after definition is parsed.

The SVGs look properly formatted and they do get url-encoded. However, after much testing, the part in the SVG that breaks the styling seems to be the parentheses in transform="translate(...)" attributes, which do not get url-encoded. Should they be?

If I assign the SVGs in background definitions instead of a pseudo-class content everything works as intended, so it doesn't seem to be a problem with the general setup.

Is this a bug? If yes where? How can I work around this (except using the SVGs in backgrounds)? Can I circumvent the data parsing and plainly insert the SVG file URL somehow (asking as a Webpack / React newbie)?

dance2die
  • 35,807
  • 39
  • 131
  • 194
gl03
  • 1,109
  • 12
  • 18
  • I'm not really sure but are these quotes necessary? "${arrowUp}", why don't you try without it instead ${arrowUp} – vitomadio Sep 01 '18 at 17:06
  • not sure either, but they seem necessary - leaving them out breaks the styles completely (i.e. they are not parsed). – gl03 Sep 01 '18 at 17:12

1 Answers1

0
const Tab = styled.div`
  &::after {
    content: url("images/ico-arrow-up.svg");
    position: relative;
  }
  &.active::after {
    content: url("images/ico-arrow-down.svg");
  }
`;
Mohamed Ait Si Mhand
  • 11
  • 1