css로 svg 아이콘 흰색/검은색/원본색 쉽게 정해주기

개요

• svg를 잘 조절해서 이 목적을 절해줄 수 있다.
• 게다가 크기도 svg로 정해줄 수 있어 좋아보인다.
• 하지만 img에서 src로 svg링크를 불러오고 있었고 프로젝트 상황에따라 img를 쓰는 것을 유지하는게 좋을 수 있다. 상황에 따라 흰색/검은색/원본 아이콘 링크를 다 할당하기에도 불편하다. 원하는 색이 없을 수도 있다.

해결법

• css의 filter를 사용한다.
• stackoverflow에 언급된 내용이다.
• svg뿐만 아니라 이미지를 처리할 때 자주 사용하는 태그이다. img태그로 불러온 svg도 img이므로 필터를 적용 가능하다.
• 하지만 원본 svg가 무채색인 경우 잘 동작하지만, 아닌 경우엔 오차가 발생한다.
• 원본색 이외 흰/검만 필요하므로 자체 filter를 제작해보기로 했다.

brightness

• 밝기를 조정한다.
• 0이라면 아예 검은 색이 된다. 숫자를 조금만 크게 줘도 흰색에 아까워진다.
• 하지만 원본이 흰색/검은색인 svg의 경우 brightness만으로 해결하기엔 부족한 경우가 생긴다. 만약 유채색svg만을 사용한다면 좋은 선택이다.

contrast

• 대비를 조정한다.
• 0인 경우 무채색이 된다.

invert

• 1이라면 색을 반전 시킨다.

전략

• css in js를 사용중인 것을 양해바란다.
• 검은색
  • filter: "brightness(0) contrast(100)"
  • 무채색의 밝기를 0으로 만들면 검은색이 된다.
• 흰색
  • filter: "brightness(0) contrast(100) invert(1)"
  • 검은색을 반전시킨다.
• 이제 방법을 알았으므로 클래스 네임을 잘 조합하면 된다.