Как добавить иконку для content (:before) styled-components?

Question

[Alexander]

Здравствуйте, подскажите пожалуйста как добавить иконку для content before в styled-components?

Исходный код:

import { IoIosArrowBack} from 'react-icons/io'

 &::before {
    content: url(IoIosArrowBack);
    display: block;
    width: 20px;
    height: 20px;
  }

Answer 1

[Дарья]

Преобразовать иконку IoIosArrowBack в ссылку, которую сможет использовать content

const reactSvgComponentToMarkupString = (Component, props) =>
  `data:image/svg+xml,${encodeURIComponent(
    renderToStaticMarkup(createElement(Component, props))
  )}`;

Comments

[Дарья]

Для этого преобразования нужны: React.createElement(), ReactDOMServer.renderToStaticMarkup()и encodeURIComponent()