#javascript #css #reactjs #styled-components
#javascript #css #reactjs #styled-компоненты
Вопрос:
Я создал компонент 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 внутри стилизованного компонента?
Ответ №1:
Если ваш SVG-файл является встроенным, вы могли бы принудительно преобразовать его в строку.
icon={`${Icon}`}