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

바로 차려먹기Node.js (yarn)

깃밥이 레포 구조를 확인하고 만든 실행 명령이에요. 터미널에 붙여넣으면 받기부터 실행까지 한 번에 진행돼요.

git clone --depth 1 https://github.com/daangn/icona.git &&
cd icona &&
yarn

실행 명령은 README를 확인하세요.

코드는 내 컴퓨터에서 실행돼요 — 처음 보는 레포라면 내용을 한번 훑어보고 실행하는 습관을 추천해요.

README가 안내하는 자세한 단계 보기

Figma에 Icona 플러그인 설치 Figma Community에서 icona 플러그인을 설치합니다.
GitHub API 토큰 발급 GitHub 설정에서 Personal Access Token을 생성하고 repo, workflow 스코프(또는 Fine-grained token의 경우 contents, pull requests, metadata)를 부여합니다.
플러그인 설정 Figma 플러그인에서 Repository URL과 GitHub API Key를 입력합니다.
Figma에서 아이콘 생성 새 파일을 만들고 icona-frame이라는 이름의 프레임을 생성한 후 아이콘들을 그린 뒤 Deploy 버튼을 클릭합니다.
개발자: @icona/generator 설치
```
yarn add -D @icona/generator
```
빌드 스크립트 작성 및 실행 프로젝트 루트에 icona.js 파일을 만들어 @icona/generator API를 사용해 원하는 포맷(React 컴포넌트, SVG 등)으로 애셋을 생성하고 실행합니다.
```
node icona.js
```

깃밥트라이로 맛보기

받아보기 귀찮고 살짝 불안했다면 — 안전 스캔부터 설치까지 터미널 한 줄로 끝나요.

터미널에 붙여넣으면 깃밥 안전 스캔 → 격리 폴더 clone → 설치 → 실행법 안내까지 자동이에요. 처음이어도 괜찮아요 — 이 한 줄이 전부예요.

npx gitbap-try daangn/icona

Node.js만 있으면 설치 없이 실행돼요 · 깃밥트라이가 뭐예요? →

별 추이 · 7일

88+0 / 7일

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

샘플 점수 20/100

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

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

「디자인·UI 컴포넌트」 이런 레포, 매주 받아보실래요?

매주 월요일 아침, 골라 담은 밥상만. 광고 없이 · 언제든 해지.

내 레포인가요? README에 깃밥 배지 달기

[![깃밥](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 기반으로 요약했습니다 · 원문 보기