Navbar의 SVG 아이콘을 흰색으로 만드는 방법

개발
1

안녕하세요. Custom Header Icons 컴포넌트를 사용 중입니다.
wwww

이것들을 흰색으로 만들고 싶습니다.

2

컴포넌트가 각 아이콘을 포함하기 위해 custom-header-icon-link 클래스를 가진 요소를 사용하는 것으로 보입니다. SVG 아이콘을 사용하는 경우, 다음과 같이 타겟팅할 수 있어야 합니다:

.custom-header-icon-link svg {
    stroke: white;
}

때때로 SVG는 선으로 만들어졌 것처럼 보이지만 실제로는 채워진 도형으로 만들어져 있을 수 있으므로, stroke: white를 fill: white로 변경해야 할 수 있습니다.

3

안녕하세요, 두 가지를 모두 시도해 보았지만 여전히 이렇게 보입니다:
wwww
제공해 주신 CSS를 적용해도 아무런 변화가 없었습니다.

5

음, 거기서 무슨 일이 일어나고 있는지 확실하지 않네요! 아이콘이 이미지 파일이 아니라 SVG인지 다시 한번 확인해 보세요. 다른 스타일링이 덮어쓰고 있을 수도 있으니 stroke: white !important;를 시도해 볼 수도 있습니다.

CSS가 아무런 반응을 보이지 않을 때 제가 좋아하는 ‘정상성 검사’ 중 하나는 셀렉터에 배경색을 추가하는 것입니다.

.custom-header-icon-link svg {
  background-color: pink;
  stroke: white;
}

이렇게 하면 배경색이 보이지 않는다면, 셀렉터가 올바른 요소를 지정하지 못하고 있는 문제일 수 있습니다. 이 경우 브라우저의 인스펙터 도구가 정말 유용합니다. 요소의 위계를 살펴보고 셀렉터를 어떻게 작성해야 하는지 더 잘 파악할 수 있기 때문입니다.

Chrome에서는 ctrl+shift+c를 누른 후 아이콘을 클릭하면 목록에서 해당 요소로 바로 이동합니다. 요소 탭의 스크린샷을 올려주시면 구조가 어떻게 되어 있는지 함께 살펴볼 수 있습니다. 예를 들어, 제가 미리보기에서 해당 컴포넌트를 시도했을 때의 모습은 다음과 같습니다:

image
image424×184 18.5 KB

6

집에 가서 시도해볼게요. 벌써 8시간쯤 동안 이거 동작하게 하려고 시도 중인데 :upside_down_face: background-color도 전에 시도했던 것 중 하나였고, Inspect Element을 계속 만져봤는데도 여전히 안 됐어요. 몇 시간 뒤 집에 가서 “important” 관련 설정도 시도해보고 업데이트할게요! 그리고 네, 100% .SVG 링크 맞아요.

7

아, 정말 답답하겠네요!

문제 해결에 도움이 될 수 있는 또 다른 기법은 인스펙터에서 스타일을 요소에 직접 추가하여 작동하는지 확인하는 것입니다(스타일 탭의 element.style 부분을 사용). 참고: 이러한 변경은 현재 창에만 영향을 미치는 임시 변경이며, 새로고침 시 삭제됩니다.

image
image592×155 21.2 KB

8

여기 제 아이콘과 해당 요소 검사(Inspect Element) 결과입니다:

bbbb
bbbb720×375 20.8 KB

여러분이 나열해 주신 모든 CSS 코드를 시도해 보았는데, "stroke"와 "fill"을 모두 적용해 봤습니다. "!important"를 사용해도 효과가 없었습니다. 무엇이 이런 문제를 일으키는지 전혀 모르겠습니다.
다만, 뭔가 발견한 것 같습니다. 저는 .SVG "이미지"를 사용하고 있는데, 요소 검사에서는 여전히 <img> 태그로 표시되고 있습니다. 반면, 여러분이 보여주신 것과는 달리 <svg class=" 태그로 나타나지 않습니다. 이것이 Custom Header Icons의 버그일까요?

9

아하, 네, 그게 변경 사항이 아무런 효과를 내지 못한 이유인 것 같습니다. 실제 태그가 없으니까요. 컴포넌트가 이를 태그 안에 넣은 것은 버그라고 생각하지 않습니다. SVG를 표시하는 방법 중 하나일 뿐이지만, 스타일링을 더 어렵게 만들긴 합니다. SVG 파일 자체에 접근할 수 있다면, 그곳에서 stroke 또는 fill 색상을 변경할 수 있습니다(예: stroke=“black” 속성과 같은 것으로, 하나 이상일 수 있습니다).

SVG를 편집할 수 없다면 CSS 필터를 사용해 볼 수 있습니다. 이를 통해 요소에 특정 시각 효과를 추가할 수 있습니다. 현재 검은색으로 보이기 때문에, 이를 반전시켜 흰색을 얻을 수 있도록 시도해 볼 수 있습니다.

.custom-header-icon-link img {
  filter: invert(100%);
}

셀렉터가 이제 svg가 아니라 img여야 한다는 점에 유의하세요.