📖
SVG 아이콘 시스템 감사 & 일괄 규격화 도구 실무 가이드
여러 개의 SVG 아이콘 파일을 한 번에 업로드하여 디자인 시스템 규격 일치 여부를 정밀 검사합니다. 서로 다른 viewBox 크기, 하드코딩된 fill/stroke 색상, 피그마(Figma) 및 일러스트레이터 불필요 태그를 자동 감지하고, currentColor 기반 일괄 정제, SVG 스프라이트, React(TSX) 컴포넌트 번들로 즉시 내보냅니다.
🔒실무 기술 스펙 & 100% 클라이언트 로컬 연산 아키텍처
브라우저 내장 DOMParser와 XMLSerializer를 활용하여 각 SVG의 DOM 트리를 생성한 뒤, 정규식과 DOM 트래버설을 통해 불필요한 노드와 색상 속성을 로컬 메모리에서 즉시 재작성합니다. ZIP 압축 또한 JSZip을 통해 순수 클라이언트 단에서 실행되며 외부 통신이 전혀 발생하지 않습니다.
✨ 주요 기술 스펙 & 특장점
- •다중 SVG 일괄 업로드: 수십 개의 아이콘 파일을 드래그 앤 드롭하여 한 번에 병렬 검사.
- •viewBox 통일성 감사: 프로젝트 표준 규격(24x24 등)과 다른 비표준 아이콘을 즉시 감지.
- •고정 색상 감지 및 currentColor 변환: CSS 텍스트 색상 및 다크모드에 자동 반응하도록 색상 일괄 치환.
- •피그마 찌꺼기 코드 제거: 불필요한 clipPath, 빈 defs, 에디터 주석, 고정 width/height 일괄 삭제.
- •다양한 실무 포맷 내보내기: 정제된 SVG ZIP 일괄 다운로드, SVG 스프라이트 코드, React TSX 컴포넌트 묶음 1클릭 복사.
- •100% 브라우저 메모리 연산: 기업 고유의 브랜드 및 UI 디자인 에셋이 외부 서버로 유출되지 않습니다.
🚀 단계별 실무 가이드
- 1검사할 .svg 파일들을 드래그 앤 드롭 영역에 한꺼번에 끌어다 놓습니다.
- 2상단 지표 카드와 좌측 아이콘 목록에서 규격 불일치 및 이슈 항목을 확인합니다.
- 3우측 상단에서 표준화 규칙(currentColor 통일, 피그마 아티팩트 제거, 기준 viewBox 설정)을 조정한 뒤 "전체 아이콘 일괄 보정 적용"을 누릅니다.
- 4필요에 따라 정제된 ZIP 파일을 다운로드하거나, React 컴포넌트/SVG 스프라이트 코드를 복사합니다.