[css] svg 색 변경하기

react component로 불러온 svg 파일의 색을 변경하고 싶었다.

import { ReactComponent as Search } from "../assets/ic-search.svg";

 

 

svg 파일에서 코드를 보면 fill과 stroke라고 적혀진 부분을 모두 "current"로 바꾼다.

<svg width="33" height="33" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M42 42L27.375 27.375" stroke="current" stroke-width="5" stroke-linecap="round"/>
//...

 

찾아보니 fill로 하라고 하는 사람들이 많던데 나는 선으로 이루어진 아이콘이라 그런가 stroke를 변경해야 색이 변경되었다.

fill에 색상을 집어넣으면 아래와 같이 가운데 부분이 채워진다.

const SearchBtn = styled(Search)`    
    stroke: #000;
`;

그 후 이런 식으로 원하는 색을 넣어주면 변경된다.