React - svg 파일을 확장성있는 컴포넌트로 만들어서 스타일링 하기

React

:svg 파일 컴포넌트로 만들어서 스타일링 하기

| 시작하기에 앞서

리액트로 개발을 하다보면, svg파일을 좀더 확장성 있게 사용하기 위해 부모컴포넌트에서 받아온 props에 따라 조건부 렌더링 (ex: 다른 배경색)을 해주고 싶을때가 있다. 각각의 svg파일을 색만 다를 뿐인데  파일을 여러개 만들어 import하면 비효율적이기 떄문이다. 따라서 아래와 같이 확장성 있게, svg 컴포넌트를 만들어 배경색만 props에 따라 바꿔주면 디자인 리소스도 줄어들게 될것이다.

• (ex) svg 파일을 넘어온 props에 따라서, 배경색이 다르게 보여주고 싶을때

| 해결방법

그럴때는 간단히 svg파일을 리액트 컴포넌트로 export 해주기만 하면 되고, 이러한 컴포넌트를 import 하고, 이 컴포넌트에 클래스를 명시해줘서 (명시해줄 class는 정해주고 싶은데에 정해주면 된다. 나같은 경우는 svg의 배경색을 바꿔줘야 했기 떄문에 svg의 path 태그에 className을 걸어줘서 scss 파일에서 fill: 바꿀색 과 같이 처리해주었다) , 넘어온 props에 따라 다르게 정해주면 된다.

참고링크: https://github.com/facebook/create-react-app/issues/1388

> export한 svg 컴포넌트 예시

#StarIcon 컴포넌트

import React from 'react';

export default () =>

<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">

<path className="starColor" fill="#51ABF3" fill-rule="evenodd" d="M6 9.121L2.292 11 3 7.02 0 4.202l4.146-.581L6 0l1.854 3.621 4.146.58-3 2.82L9.708 11z"/>

</svg>

> svg 컴포넌트를 import한 컴포넌트 (별점 컴포넌트 예시 참고용)

/**

* node module import

*/

import React from 'react';

import { range } from 'lodash';

//아이콘

import Star from './StarIcon';

import StarEmpty from './StarEmptyIcon';

import StarHalf from './StarHalfIcon';

const StarRating = ({

color,

rating,

maxRating,

size,

}) => {

return (

<div className={"starRating starRating--"+ size +" starRating--" + color }>

{range(maxRating).map(idx => {

if (rating - idx > 0.5) {

return <Star key={idx} color={color} size={size} />;

} else if (rating - idx > 0) {

return <StarHalf key={idx} color={color} size={size} />;

}

return <StarEmpty key={idx} color={color} size={size} />;

})}

</div>

);

};

export default StarRating;

> 컴포넌트 스타일링한 scss 파일(참고용)

.starRating {

border: none;

display: inline-block;

margin: 0px 16px;

&--big{

svg{

width: 24px;

height: 24px;

}

}

&--small{

svg{

width: 16px;

height: 16px;

}

}

&--gray{

.starColor{

fill: $gray-800;

}

}

&--blue{

.starColor{

fill: $blue-400;

}

}

}