css로 svg 아이콘 컬러 변경

사이트에서 아이콘 이미지 등은 클릭시 컬러가 변경될 때도 있고 

디자인 변경시 컬러가 변경될 때가 많다.

백터 이미지만 있으면 이런 변경사항에 대응해 css로 컬러 변경이 가능함.

(백그라운드 이미지 필터를 사용해도 될 것 같지만 

특정 컬러로의 변경은 불가능하다)

 

mask-image에 svg 이미지 경로를 연결하고 

background-color로 컬러 마스크를 씌우면 됨

-webkit-mask-image:url(/static/img/arrdn_mn.svg/);
        mask-image:url(/static/img/arrdn_mn.svg/);
        -webkit-mask-size: 9px;
        mask-size: 9px;
        background-color:$txtColor;

사이즈도 조정가능하고 svg라 변형도 간단해서 유용하게 썼던 속성이다.