button 안의 svg 파일 color 바꾸기 (fill이 적용되지 않는 경우)

1. 문제

button 안에 svg 파일과 text를 넣고, click 유무에 따라 색을 바꿔주는 작업을 했다.
button 하나를 바꾸는 작업이라면 쉽게 할 수 있었지만, button을 모듈화하여 작업하다보니 index.tsx와 styles.ts로 파일을 나눠서 코드를 작성했다.

text의 color와 button의 background-color를 변경하는 것은 해냈지만, svg의 색을 바꾸는 과정에서 삽질을 많이 했다.
fill을 이용해서 색을 바꾸는 코드를 작성했지만 Chrome 개발자도구에서는 적용이 되고, 화면 상에는 적용이 안 되는 문제가 발생했다.

2. 해결

해결 방법이 야매(?)긴 하지만 그래도 성공했다.
해결 방법은 fill 대신 filter를 사용하는 것이다.

사용한 코드를 첨부한다.

2.1. svg 파일 내의 fill 값을 #fff으로 변경

<svg width="22" height="22" viewBox="0 0 22 22" fill="#fff" xmlns="http://www.w3.org/2000/svg">
<path d="M11.0003 4.125C5.23218 4.125 0.350927 10.3125 0.144677 10.5806C0.052134 10.7008 0.00195312 10.8483 0.00195312 11C0.00195312 11.1517 0.052134 11.2992 0.144677 11.4194C0.350927 11.6875 5.23218 17.875 11.0003 17.875C16.7684 17.875 21.6497 11.6875 21.8559 11.4194C21.9485 11.2992 21.9986 11.1517 21.9986 11C21.9986 10.8483 21.9485 10.7008 21.8559 10.5806C21.6497 10.3125 16.7684 4.125 11.0003 4.125ZM11.0003 16.5C6.71718 16.5 2.7503 12.375 1.58155 11C2.7503 9.625 6.7103 5.5 11.0003 5.5C15.2903 5.5 19.2503 9.625 20.4191 11C19.2503 12.375 15.2903 16.5 11.0003 16.5Z" fill="#fff"/>
<path d="M14.4375 10.3127C14.551 10.3126 14.6627 10.2845 14.7626 10.2307C14.8625 10.177 14.9476 10.0993 15.0102 10.0047C15.0729 9.91006 15.1111 9.8014 15.1215 9.68841C15.132 9.57542 15.1143 9.4616 15.07 9.35711C14.6918 8.60403 14.1098 7.97219 13.3903 7.53344C12.6708 7.0947 11.8427 6.86665 11 6.87523C9.90598 6.87523 8.85677 7.30983 8.08318 8.08342C7.3096 8.85701 6.875 9.90622 6.875 11.0002C6.875 12.0943 7.3096 13.1435 8.08318 13.917C8.85677 14.6906 9.90598 15.1252 11 15.1252C11.8427 15.1338 12.6708 14.9058 13.3903 14.467C14.1098 14.0283 14.6918 13.3964 15.07 12.6434C15.1143 12.5389 15.132 12.4251 15.1215 12.3121C15.1111 12.1991 15.0729 12.0904 15.0102 11.9958C14.9476 11.9012 14.8625 11.8235 14.7626 11.7698C14.6627 11.716 14.551 11.6878 14.4375 11.6877C14.3448 11.6975 14.2512 11.6864 14.1633 11.6552C14.0755 11.6241 13.9957 11.5738 13.9298 11.5079C13.8639 11.442 13.8136 11.3622 13.7825 11.2744C13.7514 11.1866 13.7403 11.0929 13.75 11.0002C13.7403 10.9076 13.7514 10.8139 13.7825 10.7261C13.8136 10.6382 13.8639 10.5584 13.9298 10.4926C13.9957 10.4267 14.0755 10.3763 14.1633 10.3452C14.2512 10.3141 14.3448 10.303 14.4375 10.3127Z" fill="#fff"/>
</svg>

2.2. filter의 brightness 속성 사용

// styles.ts

import styled from "styled-components";

interface StyledButtonProps {
  isClicked: boolean;
}

export const StyledButton = styled.button<StyledButtonProps>`
  (중략)
`;

// 버튼 안의 텍스트 스타일 지정
export const ButtonText = styled.span<StyledButtonProps>`
  (중략)
`;

// 버튼 안의 이미지 스타일 지정
export const ButtonIcon = styled.img<StyledButtonProps>`
  width: 20px;
  height: 20px;
  filter: ${({ isClicked }) => (isClicked ? "brightness(100%)" : "brightness(0%)")};
`;

이번 기회를 통해 filter에 대해 공부할 수 있었다.

3. filter

3.1. filter란?

• 요소(보통 <img>)에 대한 시각 효과 (예: 흐림/채도 등) 정의
  
  
• 기본값: none
• 상속여부: X
• 애니효과: O
• CSS버전: CSS3
• JS구문: object .style.filter = "grayscale (100 %)";

3.2. filter 구문

selector {filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() | initial | inherit ; }

3.3. 속성값

• none

  • 효과 지정 안 함. (기본값)

• blur (px)

  • 이미지에 흐림 효과 적용
    • 값이 클수록 더 흐려짐. 값 지정 안 하면 0 사용

• brightness(%)

  • 이미지의 밝기 조정
    • 0 % : 이미지를 완전히 검정색으로 만듦
    • 100 % (1) : 원본 이미지. (기본값)
    • 100 % 초과 : 더 밝은 이미지

• contrast(%)

  • 이미지의 대비 조정
    • 0 % : 이미지를 완전히 검정색으로 만듦
    • 100 % (1) : 원본 이미지. (기본값)
    • 100 % 초과 : 대비를 더 높여 결과를 제공.

• grayscale(%)

  • 이미지를 회색조로 변환. (흑백이미지 만듦)
    • 0% (0): 원본이미지. (기본값)
    • 100% : 완전 회색이미지. (흑백이미지에 사용)

• hue-rotate(deg)

  • 이미지에 색조 회전 적용.
    • 이 값은 이미지 샘플이 조정될 색상 원 주위의 각도 수를 정의
    • 0deg : 원본이미지. (기본값)
    • 참고 : 최대값은 360deg

• invert (%)

  • 이미지의 샘플을 반전시킴
    • 0 % (0) : 원본이미지. (기본값)
    • 100 % : 이미지를 완전히 반전시킴
    • 참고 : 음수값 비허용

• invert (%)

  • 이미지의 샘플을 반전시킴
    • 0 % (0) : 원본이미지. (기본값)
    • 100 % : 이미지를 완전히 반전시킴
    • 참고 : 음수값 비허용

• opacity(%)

  • 이미지의 불투명도 수준
    • 0 % : 완전 투명
    • 100 % (1) : 완전 불투명 (=원본 이미지). (기본값)
    • 참고 : 음수값 비허용

• url ()

  • SVG 필터를 지정하는 XML 파일의 위치를 취하며, 특정 필터 요소에 대한 앵커를 포함 가능
    • filter: url (svg-url # element-id)

• initial

  • 이 속성의 기본값으로 설정

• inherit

  • 부모요소의 속성값 상속

참고

https://homzzang.com/b/css-330