Syled Component Render a React Component

1
votes

I created a react component that renders SVG images dynamically. It takes in 3 different props, name width, and height. In another component, I created a li styled component. I am trying to replace the li bullets with the Icon component inside the styled li component.

This is what I have so far.

import Icon from '../icon/Icon';

const Li = styled.li`
  padding: 20px 10px 0 20px;
  font-size: 16px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.75;
  letter-spacing: normal;
  color: #42484d;

  &:before {
    content: '';
    display: inline-block;
    height: 1em;
    width: 1em;

    background-image: url(${(props) => props.icon});

    background-size: contain;
    background-repeat: no-repeat;
    margin-right:0.5em;   
  }

`;


const CheckList = ({ className }) => (
  <Root fluid>
    <ListRow>
      <List>
        {textArr.map(({ text }) => (        
          <Li
            checkkey={text}
            icon={Icon}
          >
            {text}
          </Li>
        ))}
      </List>
    </ListRow>
  </Root>
);

export default CheckList;

The icon prop is returning an object instead of the SVG image. Is there a way to sender the Icon component inside of the styled component?

1
javascriptcssreactjsstyled-components

1 Answers

0
votes

If your SVG file is inline, you could force-transform it into a string.

icon={`${Icon}`}