기본적으로 아이콘이 없는 테마에서 커스텀 아이콘을 표시하고 싶습니다. 대체로 잘 동작하지만, fill에 currentColor를 사용할 수 없습니다.
아래처럼 하면 동작합니다:
&::before {content: svg-uri('<svg fill="red" ...
하지만 아래처럼 하면 동작하지 않고, 기본적으로 검은색으로 표시됩니다:
&::before {content: svg-uri('<svg fill="currentColor" ...
이전에 이런 작업을 해보신 분이 계신가요? 제가 놓치고 있는 것이 무엇인지 확실하지 않습니다..
제가 아는 한 currentColor는 CSS로 인라인된 SVG에서는 작동하지 않습니다. 불행히도 색상은 SVG에 하드코딩해야 합니다. 이전에 색상을 변경하기 위해 사용했던 한 가지 우회 방법은 CSS 필터이지만, 이 방식에도 단점이 있습니다.
아, 그렇군요. @awesomerobot님 감사합니다! 다양한 색상 스킴을 지원하면서도 적용할 수 있는 유일한 접근 방식이 마크업에 아이콘을 포함하는 것이 맞나요?
네, 불행히도 그렇습니다! CSS를 사용하면 일부 영역에서 장식용 아이콘을 더 쉽게 추가할 수 있을 텐데, 더 나은 방법이 있으면 좋겠습니다.