daangn/icona

Figma에서 SVG 아이콘을 클릭 한 번으로 GitHub에 배포하는 플러그인

설치형 도구맘대로 써도 됨 · MIT디자인·UI 컴포넌트TypeScript난이도
88+0이번 주0 찜
9포크0이슈

중간맛 분석

스택: TypeScript 기반 Figma 플러그인 + @icona/generator 라이브러리. 난이도: 디자이너 쪽은 쉬운 편(프레임 생성 후 배포 버튼), 개발자 쪽은 중간(빌드 스크립트 설정). 바로 쓸 수 있는가: 예. Figma 플러그인 설치 후 GitHub 토큰 설정하면 즉시 사용 가능하며, seed-icon 보일러플레이트 참고 가능. 데모: seed-icon 프로젝트에서 실제 사용 사례를 확인할 수 있음.

이런 레포예요

이럴 때 쓰면 좋아요

  • 디자인팀과 개발팀이 협업할 때 아이콘 리소스 자동으로 동기화
  • Figma 아이콘 라이브러리를 GitHub PR 기반으로 관리하고 버전 추적
  • 아이콘 변경사항을 자동으로 감지해 React 컴포넌트나 기타 포맷으로 빌드

핵심 기능

Figma 플러그인으로 클릭 한 번에 아이콘 세트 배포@icona/generator를 통한 다양한 포맷 생성(React, PDF, XML 등)GitHub Action 통합으로 자동 애셋 빌드

대안 대비 차별점

Figma와 GitHub 사이의 완전 자동화 워크플로우에 특화되어 있으며, 플러그인이 단일 파일만 전송하고 개발자가 유연하게 포맷을 선택해 생성할 수 있는 구조로 설계되어 있습니다.

준비물

  • Figma 계정
  • GitHub 리포지토리
  • GitHub Personal Access Token

바로 시작하기

  1. Figma에 Icona 플러그인 설치 Figma Community에서 icona 플러그인을 설치합니다.

  2. GitHub API 토큰 발급 GitHub 설정에서 Personal Access Token을 생성하고 repo, workflow 스코프(또는 Fine-grained token의 경우 contents, pull requests, metadata)를 부여합니다.

  3. 플러그인 설정 Figma 플러그인에서 Repository URL과 GitHub API Key를 입력합니다.

  4. Figma에서 아이콘 생성 새 파일을 만들고 icona-frame이라는 이름의 프레임을 생성한 후 아이콘들을 그린 뒤 Deploy 버튼을 클릭합니다.

  5. 개발자: @icona/generator 설치

    yarn add -D @icona/generator

  6. 빌드 스크립트 작성 및 실행 프로젝트 루트에 icona.js 파일을 만들어 @icona/generator API를 사용해 원하는 포맷(React 컴포넌트, SVG 등)으로 애셋을 생성하고 실행합니다.

    node icona.js

별 추이 · 7일

88+0 / 7일

활용성 · 따라 만들기 좋은가

샘플 점수 20/100
  • 관대한 라이선스
  • 테스트 있음
  • 예제 디렉토리
  • 최근 활동
  • AGENTS.md
  • llms.txt
  • 템플릿

⚪ 최근 활동 정보 없음 · 2023년 생성

이 레포에 깃밥 배지 달기

[![깃밥](https://www.gitbap.com/badge/daangn/icona.svg)](https://www.gitbap.com/r/daangn/icona)

🔌 클로드에서 바로 써보기

깃밥을 클로드에 연결하면 이런 레포를 클로드·커서·Codex에서 바로 찾고 체험할 수 있어요.

방법 ① 커넥터 URL

클로드 설정 → 커넥터에 이 주소를 붙여넣기.

https://www.gitbap.com/api/mcp
방법 ② 플러그인 (체험까지)

플러그인을 설치하면 /gitbap-trending·/gitbap-try 슬래시 커맨드로 레포를 그 자리에서 체험. Claude Code에서 아래 두 줄을 차례로 실행하세요.

/plugin marketplace add jakeparkcolde/gitbap-cowork
/plugin install gitbap-cowork@gitbap
연결 방법 자세히 →

AI가 README 기반으로 요약했습니다 · 원문 보기