Блог

Я создал компонент react, который динамически отображает SVG-изображения. Он принимает 3 разных реквизита, ширину имени и высоту. В другом компоненте я создал компонент в стиле li. Я пытаюсь заменить маркеры li компонентом Icon внутри стилизованного компонента li.

Это то, что у меня есть на данный момент.

 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;

  amp;: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;

  

Реквизит icon возвращает объект вместо SVG-изображения. Есть ли способ отправить компонент Icon внутри стилизованного компонента?

Если ваш SVG-файл является встроенным, вы могли бы принудительно преобразовать его в строку.

 icon={`${Icon}`}