Moait
홈인기 피드모든 블로그모든 태그
홈인기 피드모든 블로그모든 태그
[디자인 시스템 어떻게 만들었어요?(1)] 아이콘 라이브러리 만들기 섬네일

[디자인 시스템 어떻게 만들었어요?(1)] 아이콘 라이브러리 만들기

요기요 favicon요기요·Frontend·
TypeScriptReactSVGRSVGOStyled Components
2025년 10월 10일4

AI 요약

이 글은 AI가 요약했어요. 정확한 내용은 꼭 원문을 확인해 주세요!

핵심 요약

요기요의 YDS 아이콘 라이브러리는 이름 기반 매핑을 벗어나 SVG를 개별 컴포넌트로 관리하고, SVG를 React 컴포넌트로 자동 생성하는 워크플로를 도입했습니다.

주요 특징

  • SVG를 자동 변환해 React 컴포넌트와 인덱스 파일을 생성하는 스크립트
  • Monochrome는 currentColor로 색상 재정의, Multicolor는 원본 색상 유지
  • svgo 구성과 SVGR 템플릿으로 최적화 및 Wrapper로 토큰 적용
  • AccessibleIcon 래퍼와 라벨 정책으로 접근성 보장

적용 고려사항

  • TypeScript/React 기반의 내부 라이브러리 구성 및 버전 관리
  • 라이브러리 분리 운영으로 독립적 배포 및 유지 용이성 확보

연관 피드

%가 높을수록 이 글과 비슷할 가능성이 높아요!
No Image
72%

[디자인 시스템 어떻게 만들었어요?(2)] Radix Primitives와 Panda CSS로 유연하고 단단한 컴포넌트 만들기

요기요 favicon요기요·2025년 12월 11일
디자인 시스템 중 디자인 토큰을 여러 도구를 이용하여 자동화 하는 방법 섬네일
69%

디자인 시스템 중 디자인 토큰을 여러 도구를 이용하여 자동화 하는 방법

올리브영 favicon올리브영·2024년 12월 16일
올리브영 서비스에 사용되는 컴포넌트를 모아놓은 그곳! 섬네일
69%

올리브영 서비스에 사용되는 컴포넌트를 모아놓은 그곳!

올리브영 favicon올리브영·2024년 11월 29일