[리액트] svg 다루기

오늘 직면한 문제는.... 바로!!!!!!!!!!!!!!!

svg 파일 색상을 변경하고 싶다는 것이었습니다.

그럼 우선 svg 파일 부터 살펴봅니다.
제가 사용한 svg 파일은 말풍선 아이콘 입니다.

우선 여러분들께 아이콘 홈페이지를 추천드릴게요.
바로 여깁니다 여기!!!!

https://fontawesome.com/

여기는 아이콘도 많고 채워져있는 모양 뭐 테두리만 있는 모양 등등 다양하게 있습니다. 무엇보다도 svg 파일로 다운받을 수 있기 때문에 너무나도 좋은것입니다~ 아니면 말고요.. 전 좋으니까요

해당 페이지 혹은 자신이 가지고 있는 svg 파일을 프로젝트에 추가해줍니다.

저는 img 라는 폴더를 생성해서 거기에 svg 파일을 넣어주었습니다.

이 해당 이미지를 사용하는 방법은 두 가지 입니다!

img 태그 이용

import pencilIcon from './img/pencil-solid.svg';

<img src={pencilIcon} alt="글작성" style={{width:'50px'}}></img>

위 처럼 img 태그를 이용하는 것 입니다. 여기에도 위 코드 처럼 스타일을 추가할 수 있습니다. 근데 color가 안먹힙니다!!!!!!!! 나는 색을 바꿔야 하는데!!!! 홓홓 그럼 우짜나요 그럼 바로 다음 방법을 따라하면 됩미다ㅎ

컴포넌트로 변환

<svg
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path 
d="..."/>
</svg>

컴포넌트로 변환을 하기 위해선 svg 파일을 살펴봐야 합니다. 여기서 변경해조야 할 부분이 바로 저 svg 태그 부분 입니다.

<svg fill="curret"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path 
d="..."/>
</svg>

저렇게 fill="curret" 이걸 추가해주면 컴포넌트 처럼 사용이 가능합니다.

import {ReactComponent as CommentIcon} from './img/comment-regular.svg';


<CommentIcon width="20px" height="20px" fill="#61C454" />
        

이렇게 하면 저 fill 을 이용해서 색 변경이 가능합니다~ 물론 크기 변경도 가능하구요 다 가능합니다 오예 해결 🤩