CODEWITHSUNDEEP
reactjsstyled-componentsreact-boilerplate
gl03
gl03

Reputation: 1169

react + styled-components: inline data SVG in pseudo-class breaks styling

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)?

Upvotes: 6

Views: 2778

Answers (1)

Mohamed Ait Si Mhand
Mohamed Ait Si Mhand

Reputation: 11

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

Upvotes: 0

Related Questions