React Native에서 svg 색깔/크기 스타일링하기

✔️ 필요성

React Native에서 아이콘을 하나 만들어서 쓰는데, 위치에 따라 색깔이 바뀔 수도 있고 크기만 바꿔서 여러군데에서 사용하고 싶을 때가 있습니다. 즉, svg 파일의 크기와 색깔을 자유롭게 스타일링하고 싶습니다.

 

 

✔️ React Native에서 svg 파일 불러오도록 설치 필요

React Native에서 svg 파일을 불러와서 사용하기 위해서는 react-native-svg 그리고 react-native-svg-transformer 패키지를 설치해야 합니다. 단순히 설치 이상으로 설정해주어야 하는 것이 있기 때문에 아래 포스팅을 참고해서 설치를 끝내도록 합시다. 

React Native에서 svg 파일 사용하기

 

 

✔️ styled-components로 svg를 감싸서 스타일링하기

본 예제는 styled-components와 typescript를 사용합니다. 

svg 파일에서 컬러가 들어가는 부분에는 색코드 대신 currentColor라고 작성해줍니다.

// comma.svg

<svg width="30" height="40" viewBox="0 0 30 40" fill="none" xmlns="http://www.w3.org/2000/svg">
  <mask id="path-1-inside-1_125_105" fill="white">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M29.3776 17.9138C29.7825 16.7846 30 15.5207 30 14.1176C30 6.32069 23.2843 0 15 0C6.71573 0 0 6.32069 0 14.1176C0 21.9095 6.707 25.4072 14.9838 25.4118C13.9131 27.4843 12.5145 29.5248 11.2704 31.3399C8.64328 35.1727 6.70536 38 10 38C16.7607 38 28.0793 25.4542 29.3776 17.9138Z"/>
  </mask>
  <path fill-rule="evenodd" clip-rule="evenodd" d="M29.3776 17.9138C29.7825 16.7846 30 15.5207 30 14.1176C30 6.32069 23.2843 0 15 0C6.71573 0 0 6.32069 0 14.1176C0 21.9095 6.707 25.4072 14.9838 25.4118C13.9131 27.4843 12.5145 29.5248 11.2704 31.3399C8.64328 35.1727 6.70536 38 10 38C16.7607 38 28.0793 25.4542 29.3776 17.9138Z" 
      fill="currentColor" //색상이 들어가는 부분에 currentColor
  />
</svg>

 

comma.svg를 불러와서 styled-components로 감싼다음 color를 지정해줍니다. width와 height는 Comma 컴포넌트에서 직접 지정해줍니다. 이유는 모르겠지만 이렇게 해야 적용이 됐습니다 허허!

 

import React from 'react';
import styled from 'styled-components/native';
import Comma from '~/assets/comma.svg';

const StyledComma = styled(Comma)<{color: string}>`
  color: color;
`;

interface Props {
  color: string;
  size: number;
}

const CommaIcon = ({color, size}: Props) => {
  return (
    <StyledComma
      color={color}
      width={size}
      height={size}
    />
  );
};

export default CommaIcon;