svg 를 자유롭게 커스텀 하기

이번에는 프로젝트 중에 하나의 아이콘을 가지고 제 마음대로 가로 세로 길이와 색깔을 변경하고 싶었습니다.

<img> 태그를 이용해 svg를 사용할 수 있지만 길이와 색을 변경하지 못해 컴포넌트화 하여 사용했습니다.

 

우선 assets 폴더에 이미지들을 받아줍니다

 

그 후에 저는 바텀바를 컴포넌트화 하기 위해서 다음과 같이 만들었습니다

import { ReactComponent as SearchIcon } from "../assets/search.svg";
import { ReactComponent as HomeIcon } from "../assets/home.svg";
import { ReactComponent as NoteAltIcon } from "../assets/note_alt.svg";
import { ReactComponent as ForYouIcon } from "../assets/for_you.svg";

export const BottomBar = () => {
  return (
    <div className="BottomBar">
      <HomeIcon width="24px" height="24px" />
      <SearchIcon width="24px" height="24px" fill="#5A5A5A" />
      <NoteAltIcon width="24px" height="24px" />
      <ForYouIcon width="24px" height="24px" />
    </div>
  );
};

 

 컴포넌트화 한 것들의 prop에 width, height, 색을 변경할 꺼면 fill까지 넣어줍니다

 

그리고 svg 파일에 가서 변경할 것들을 current로 바꿔줍니다

 

width와 height가 current로 바껴있는 모습

 

색상을 변경하기 위해서는 path안에 있는 fill 속성을 current로 바꿔주어야 합니다

 

그럼 다음과 같이 아이콘의 색과 크기가 변경된 것을 볼 수 있습니다

 

 

실질적으로 path의 영역이 그림의 진짜 영역같은데,, 정확히 24가 나오진 않는다. 내가 생각하기엔 모든 아이콘은 테두리에 꽉채워서 그리지 않기 때문이라 생각한다. 또, rect라는 태그도 포함되는 경우를 볼 수 있는데 이 경우는 잘 모르겠다 나중에 찾아봐야겠다. (rect때문에 아이콘의 크기가 비교적 작음)