아이콘 패키지 추가 및 적용

[SWARVY]

Summary

175 아이콘 패키지 추가

clab 서비스에서 사용되는 svg icon들을 모아 관리하고, 해당 svg를 기반으로 한 리액트 컴포넌트를 제공하는 패키지입니다. currentColor를 모두 적용하여 폰트 색상에 맞추어 svg의 색상이 변경이 가능합니다.

Tasks

• svgo를 통한 svg 파일 최적화
• svgr을 통한 리액트 컴포넌트 생성
• 기존 서비스에 적용되어있던 svg들을 생성된 아이콘 패키지 적용하여 리팩토링 (member, time)
• react-icons 의존성 삭제
• 랜딩페이지에 잔존해있던 yarn 관련 로직 제거 및 pnpm으로 교체

ETC

• 기존 서비스에서 똑같은 형태지만 react-icons를 통해 다른 아이콘들을 불러오는 경우를 수정했습니다.
• 분산되어있던 아이콘을 집중 관리하면서 일부 아이콘이 변경되었습니다. (svgo라이브러리를 통해 svg를 최적화하는 과정에서 stroke로 관리되는 svg들을 사용하기 힘들어짐)
  • 따라서 현행 시스템에서는 stroke를 통해 관리되는 svg icon을 사용하지 못합니다. fill 기반으로 색 영역을 지정하는 svg만 사용할 수 있습니다. (해당 사항은 outline, solid의 경우에만 한정됩니다. color의 경우 상관 없습니다)
• 기존 size 속성을 통해서 크기를 조절하던 컴포넌트들을 모두 width, height를 명시하여 크기지정을 해놓았는데, 해당 부분은 추후 size 속성으로 간편하게 svg 컴포넌트의 크기를 조절할 수 있도록 수정할 예정입니다.

Command

icon 패키지 내에 여러가지 커맨드가 추가되었습니다. 커맨드가 많이 추가되었기 때문에 해당 커맨드에 대한 설명을 적어드립니다.

• generate: color/svg, outline/svg, solid/svg에 존재하는 svg 파일들을 바탕으로 리액트 컴포넌트를 생성합니다.
• update: color/svg, outline/svg, solid/svg에 존재하는 이전대비 추가된 svg 파일들을 바탕으로 리액트 컴포넌트를 생성합니다.
• svgo : 해당 svg 아이콘들을 최적화합니다 (svgo:color, svgo:outline, svgo:solid)
• svgr : svg 아이콘들을 바탕으로 리액트 컴포넌트를 생성합니다 (svgr:color, svgr:outline, svgr:solid)
• update : 이전대비 추가된 svg 파일들을 바탕으로 리액트 컴포넌트를 생성합니다 (update:color, update:outline, update:solid)

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 385bc96725feb412c305c4da866aa9013c33973a

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 49.55%. Comparing base (377e0f3) to head (385bc96). Report is 1 commits behind head on main.

@@           Coverage Diff           @@
##             main     #176   +/-   ##
=======================================
  Coverage   49.55%   49.55%           
=======================================
  Files          14       14           
  Lines         680      680           
  Branches       41       41           
=======================================
  Hits          337      337           
  Misses        336      336           
  Partials        7        7