동일한 이미지를 각 컴포넌트에서 색상만 다르게 사용하려면 어떻게 해야 할까? 같은 이미지 파일을 색상별로 편집해 사용하기엔 용량 문제도 크고 과정이 복잡해진다. 이럴 때 유용하게 사용할 수 있는 것이 바로 CSS filter 속성이다.

CSS filter란?

• 다양한 함수를 사용해 이미지의 색상, 밝기, 투명도 등을 조정하거나, 이미지에 흐림 효과나 변형 효과를 적용할 수 있는 속성.
• 그림자 효과를 추가하거나, 이미지를 왜곡시키고 돌리는 등 다양한 시각적 효과를 생성할 수도 있다.

아래는 버튼의 카메라 이미지에 filter 속성을 적용한 코드이다.

ImgAddBtn type="submit">
            <ImgBtn
              src={Camera}
              className="cameraIcon"
              alt="프로필 사진 추가하기"
            />
          </ImgAddBtn>

filter 속성을 이용해서 SVG 이미지의 색상을 변경하려면 아래와 같이 여러 값의 %를 조절해주어야 한다. 변경하고 싶은 색상 코드를 [해당 홈페이지]의 Target color에 넣어주면 내가 원하는 색상으로 변경하는 filter 값이 자동으로 완성된다.

export const ImgBtn = styled.img`
  &.cameraIcon {
    filter: invert(95%) sepia(0%) saturate(0%) hue-rotate(140deg)
      brightness(104%) contrast(107%);
  }
`;