verify-design-system-icons

name	verify-design-system-icons
description	packages/design-system 아이콘 소스, 생성 산출물, public export, SVG 입력 정책을 검증할 때 사용합니다.

디자인시스템 아이콘 검증

목적

디자인시스템 아이콘 작업에서 반복된 누락을 막습니다.

• 원본 SVG naming rule이 ic-name.svg인지 확인합니다.
• 생성된 React component와 public export가 원본과 맞는지 확인합니다.
• SVG 입력 검증 정책이 유지되는지 확인합니다.
• generated icon color contract가 유지되는지 확인합니다.
• 로컬 build/typecheck가 실제로 통과했는지 확인합니다.

입력 점검

먼저 변경 파일을 확인합니다.

git diff --name-only HEAD -- packages/design-system/src/icons packages/design-system/scripts packages/design-system/package.json package.json .github/workflows/ci.yml docs/architecture/design-system-icons.md docs/workflows/ci.md docs/workflows/local-development.md recipes/add-icon.md
git status --short -- packages/design-system/src/icons packages/design-system/scripts

아이콘 관련 파일이 없고 icon pipeline도 아직 없으면 SKIP으로 보고합니다.

읽기 전략

1. docs/architecture/design-system-icons.md를 먼저 읽습니다.
2. recipes/add-icon.md가 있으면 아이콘 추가 절차를 확인합니다.
3. packages/design-system/package.json에서 icon 관련 script와 ./icons export를 확인합니다.
4. packages/design-system/src/icons/index.ts와 생성 파일을 비교합니다.
5. packages/design-system/scripts/*icon*.mjs가 있으면 naming, validation, generation 책임을 확인합니다.
6. root package.json과 .github/workflows/ci.yml에서 check:icons 연결을 확인합니다.

Workflow

Step 1: 적용 대상 확인

test -d packages/design-system/src/icons || echo "SKIP: icons directory does not exist"
test -d packages/design-system/src/icons/svg || echo "SKIP: SVG source directory does not exist"

Step 2: SVG source naming 확인

packages/design-system/src/icons/svg가 있으면 실행합니다.

find packages/design-system/src/icons/svg -name '*.svg' -print | awk '
  /\/ic-[a-z0-9]+(-[a-z0-9]+)*\.svg$/ { next }
  { print "invalid icon filename: " $0; bad=1 }
  END { exit bad }
'

PASS: 모든 SVG가 ic-name.svg 형식입니다.

Step 3: 위험 SVG 입력 검사

rg -n "<script|<foreignObject|<iframe|<object|<embed|\\son[a-zA-Z]+\\s*=|javascript:|href=\"https?://|xlink:href=\"https?://" packages/design-system/src/icons/svg

PASS: 출력이 없습니다.

Step 4: source/generated sync 검사

아이콘 검증 script가 있으면 먼저 비파괴 검사를 실행합니다.

pnpm check:icons

PASS: source SVG, generated/, index.ts, generated/icons.manifest.json이 동기화되어 있습니다.

신규 icon source를 의도적으로 추가했거나 drift를 수정하는 중이라면 generator를 실행한 뒤 다시 검사합니다.

pnpm --filter @dongchimi/design-system icons:generate
pnpm check:icons

icons:generate는 파일을 수정할 수 있으므로 첫 번째 drift 탐지 명령으로 사용하지 않습니다.

Step 5: script/unit/build 검증

icon script 또는 sync 로직을 바꿨다면 실행합니다.

pnpm --filter @dongchimi/design-system test:unit

아이콘 pipeline이 있으면 design-system build도 실행합니다.

pnpm --filter @dongchimi/design-system build

Step 6: export 확인

• packages/design-system/package.json에 ./icons export가 있는지 확인합니다.
• 새 generated component가 packages/design-system/src/icons/index.ts에서 export되는지 확인합니다.
• 원본 SVG 삭제/이름 변경이 generated output과 index export에 반영됐는지 확인합니다.
• generated TSX의 neutral fill/stroke가 currentColor로 생성되는지 확인합니다.

Related Files

File or Pattern	Purpose
packages/design-system/src/icons/svg/**	source SVG 입력
packages/design-system/src/icons/generated/**	generated React icon component
packages/design-system/src/icons/index.ts	public icon export
packages/design-system/scripts/*icon*.mjs	import/generate/check utility
packages/design-system/package.json	workspace icon scripts and subpath export
package.json	root check:icons script
.github/workflows/ci.yml	CI icon sync enforcement
docs/architecture/design-system-icons.md	icon architecture policy
docs/workflows/ci.md	CI command policy
docs/workflows/local-development.md	local verification command policy
recipes/add-icon.md	icon addition procedure

완료 기준

• 아이콘 pipeline이 없는 baseline에서는 이유와 함께 SKIP입니다.
• 아이콘 pipeline이 있으면 naming, SVG safety, check:icons, 필요한 generation, unit/build, export 확인이 완료됩니다.
• Figma 기반 아이콘이면 원본 asset 이름/크기/의미를 최종 보고에 남깁니다.

예외

• 아직 src/icons/svg와 generation script가 없는 develop baseline은 실패가 아니라 SKIP입니다.
• generated 파일은 generator가 관리하면 수동 편집 대상으로 보지 않습니다.
• 앱 전용 아이콘은 packages/design-system 검증 대상이 아닙니다.