디자인 시안을 받고, 내가 선택할 수 있는 이미지 파일은 PNG
, WebP
, SVG
이렇게 세 가지였다.
처음에는 용량을 고려하지 않고 가장 익숙했던 png 파일로 작업을 시작했다.
그리고 마주한 두 가지 문제점!
물론 모바일 화면에 맞췄던 이미지가 데스크 탑 사이즈로 확대되니 이미지가 깨질 수 밖에 없었고, 색이 다른 이미지 파일이 이미 있었기에 사실 큰 문제는 아니었다.
하지만 아이콘 색상을 바꾸기 위해 이미지 파일 자체를 변경해야한다는 점이 자꾸 걸렸다.
그리하여 svg 사용하기 도전!
용량이 작고, 백터 이미지라는 점에서 아무리 확대해도 이미지가 깨지지 않으며, 동적으로 스타일링이 가능하다.
-> SVG는 XML로 작성되어 CSS와 JS를 통해 접근이 가능하다!✨
create-react-app
으로 시작했다면 별도의 라이브러리 설치없이 ReactComponent로 사용 가능하다.Step 1
src
폴더 안에assets
폴더를 생성하고 svg파일을 넣는다.-> 이유는 모르지만 public안의 images 폴더에 있는 svg는 사용이 안된다..!
Step 2
import { ReactComponent as `이름` } from `경로`;
위와 같이 컴포넌트로 import하여 사용할 수 있는데, 자신이 원하는 컴포넌트 명으로 쓸 수 있다.
Step 3
해당 SVG파일에서 접근하고 싶은 속성 값을 'current'로 바꿔준다.->
fill
은 border 안쪽의 색상값,stroke
는 border 색상값을 의미한다.
-> 선 두께는stroke-width
!
Step 4
current
로 설정한 모든 속성을props
로 전달하여 사용 가능하다.
-> 다른 컴포넌트와 마찬가지로 state에 따라 스타일을 부여할 수도, 이벤트를 걸 수 도 있다.
-> StyledComponent를 사용한다면, 다음과 같이 사용할 수 도 있다.const StyledProfile = styled(Profile)` background-color : red; `;