Условный рендеринг SVG со стилизованным компонентом

Question

Мне нужно изменить цвет SVG с помощью styled-component.

import styled from "styled-component";
import {ifProp} from "styled-tools";
import arrowSVG from "./assets/arrow.svg";

const Arrow = styled(arrowSVG)`
   fill: ${ props => props.shouldFill ? red : white };
`;

// Then use it like this:
<Arrow shouldFill={false}>
<Arrow shouldFill>

Однако это не сработает.Поскольку в тот момент, когда я делаю styled(arrowSVG), все реквизиты будут переданы в arrow.svg, поэтому React выдаст предупреждение вроде: не может распознать shouldFill как действительное свойство DOM.

Как преодолетьэто без создания новой функции для обработки условной проверки?Спасибо.

Answer 1

Возможно, это не оптимальное решение, но оно решило мою похожую проблему.Добавление оболочки в стиле div.

import ArrowSVG from "./assets/arrow.svg";

const ArrowFrame = styled.div`
   svg {
      fill: ${ props => props.shouldFill ? red : white };
   }
`;

<ArrowFrame shouldFill={false}><ArrowSVG /></ArrowFrame />
<ArrowFrame shouldFill><ArrowSVG /></ArrowFrame />

Answer 2

Я сомневаюсь, что вы можете использовать значки SVG напрямую, как вы упомянули в своем вопросе.Кроме того, это будет зависеть от того, как вы импортируете иконку SVG, как в моем случае она была импортирована как 'src' для иконки в песочнице кода.Лучше, если вы создадите Icon в качестве компонента React и передадите ему заполнение как опору или воспользуетесь одной из существующих библиотек значков SVG.

Я создал изолированную программную среду кода для той же самой, где я создалЗначок SVG в качестве компонента, который принимает заполнение как опору, которая должна решить ваш вариант использования.

введите описание ссылки здесь