React Icon관리 Figma Plugin 제작을 통해 손쉽게 업로드와 Icon Component 제작기

2023/12/03

8 min read

DEVELOPMENT

Jcon

Jcon plugin 보러가기

단순하게 플러그인 이름을 Jcon이라고 짓게되었습니다. Icon의 내용을 JSON으로 변환을 하는 과정이었기에 JSON + Icon을 하여서 Jcon이 되었습니다

React에서 Icon을 사용하는 방법

Icon을 다들 어떻게 사용하고 계신가요??
매번 svg를 import하여 사용하거나 컴포넌트를 사용하고 계시진 않으신가요?
저는 매번 디자이너 분이 아이콘을 만들어주시고 페이지를 제작할 때 필요한 아이콘이 있다면 피그마를 참고하여 해당 아이콘 컴포넌트를 제작하여 사용하였습니다.

개선할 수 있는 방법이 있을까...?
매번 추가 될 때마다 컴포넌트를 만들기엔 너무 손도 많이가고 무수히 많아진다면 힘들어질텐데...

방법을 찾기 위해서 인터넷을 돌아다녔습니다. 이미 해당 상황을 마주한 사람들은 많을 테고 해결책을 있을테니까요 Socar에서 Icon components 개발기와, 당근에서 만든 플러그인 Icona를 알게 되었습니다. 제가 필요했던 기능들을 다 제공하고 있지만 제가 필요한 부분의 값을 얻지 못해서 직접 만들어 보기로 하였습니다.

당근마켓을 다니는 정현수님 블로그 많은 도움이 되었습니다 이 글을 빌어 감사인사드립니다!! :)

필요한 기능

저에게 필요한 기능은 다음과 같았습니다.

figma에서 업로드를 히여 github으로 적용할 수 있어야할 것
크기를 조절 할 수 있어야한다
하나의 컴포넌트에서 모든 아이콘을 관리할 수 있어야한다

개발 진행

먼저 Icon 컴포넌트의 경우 svg태그의 기능을 넣어 두었고 아이콘을 그리기 위해 svg값들이 필요했습니다.
그리고 아이콘의 크기 조절도 할 수 있도록 width,height값을 변경 가능하도록 하고 color 값을 통해 path값들의 색상을 변경할 수 있도록 하였습니다.

svg 값 통일화

svg값에는 많은 값들이 있었습니다 rect,circle등 각 값들마다 필요한 값이 있어 통합을 했어야 했습니다. 쏘카에서는 해당 작업을 path값으로 변환해주는 기능을 도입하여 해결을 하였습니다. 하지만 저는 디자이너분 께서 Icon을 제작할 때 path값으로만 작업할 수 있다는 배경을 두고 작업을 진행하였습니다. 변환하는 로직을 추가해도 좋지만 추가작업이 생기고 저는 빠르게 제작하여 사용을 해야했기에 넘기었습니다.

figma에서 플러그인을 통해서 바로 Icon들의 이름과 path d 값을 구하여 JSON파일을 만들고 이를 해당 깃허브에 PR을 올리는 형식으로 개발을 하였습니다.

배포할 아이콘 정하기

figma에서 Jcon이라는 프레임안에 아이콘이 존재해야만 가능하도록 하였습니다. 아직 개발중인 아이콘이 있을 수도 있고 배포를 원하는 아이콘을 특정하기 위해서 프레임안에 있도록 정하였습니다.

적용 후 달라진 점

기존에는 다음과 같이 아이콘 하나 당 컴포넌트를 제작하였습니다

1
const LeftCheron = () => {
2
  return (
3
    <svg>
4
      <path d='****'></path>
5
    </svg>
6
  );
7
};
8

9
//적용 컴포넌트
10
<LeftCheron />;

변경 후에는 아이콘마다 컴포넌트를 생성하지 않고, Icon이라는 하나의 컴포넌트에서 관리를 가능하게 되었습니다.

1
const Icon = ({ icon, width, height, color }) => {
2
  return (
3
    <svg width={width} height={height} stroke={color}>
4
      <path d={icons[icon].svg}></path>
5
    </svg>
6
  );
7
};
8

9
//적용 컴포넌트
10

11
<Icon icon='leftCheron' width='24px' height='24px' color='black' />;

PR 요청 진행하기

figma에서 바로 Github으로 PR을 날리기 위해 다음 정보를 받아야 했습니다,

Repository link
Api사용을 위한 Token값
PR을 받을 branch명

아이콘을 Jcon 프레임에 정의해두고 Deploy를 하게 되면 브랜치를 생성하고 커밋후에 PR요청이 가도록 하였습니다.
기존에 Merge를 하지않고 다시 진행을 했을 때는 기존의 Branch를 삭제 후 다시 만들어 PR을 요청하니 이전 내용을 알아야한다면 조심해야합니다!