CSS to SVG Converter은(는) 무엇을 하나요?

번들된 Node CLI를 사용하여 선택한 CSS 아이콘 클래스를 SVG 후보로 변환합니다. 변환기는 CSS 선언과 의사 요소 규칙을 직접 읽으며, 스크린샷에서 기하학을 유추하지 않으며 layout2vector에 의존하지 않습니다.

워크플로우

아이콘이 포함된 CSS 파일과 정확한 .icon-name 선택자를 식별합니다. 프로젝트의 전역 리셋/기초 CSS가 루트 지오메트리를 정의하는 경우 이를 포함합니다. 단, * 규칙이 의사 요소의 box-sizing을 변경한다고 가정하지 마십시오.

먼저 하나의 아이콘에 대해 변환기를 실행합니다.

node scripts/convert-icons.mjs `
  --css "D:\Coding\VisualStandards\css\foundations.css" `
  --css "D:\Coding\VisualStandards\css\components-icon-basic.css" `
  --icon plus `
  --output "Temp\plus.svg" `
  --report "Temp\plus.report.json"

수정자 상태의 경우, 의미론적 아이콘 이름은 유지하고 상태를 별도로 전달합니다.

node scripts/convert-icons.mjs `
  --css "D:\Coding\VisualStandards\css\components-icon-page.css" `
  --icon checkbox `
  --variant checked `
  --output "Temp\checkbox-checked.svg" `
  --report "Temp\checkbox-checked.report.json"

보고서를 검사합니다. status: "manual-review" 또는 경고가 있으면 SVG를 브라우저에서 렌더링된 CSS 소스와 비교해야 하는 이유로 간주합니다.
배치 작업을 수락하기 전에 동일한 캔버스 크기로 CSS와 SVG를 렌더링합니다. 공식 자산을 자동으로 대체하지 마십시오.
시각적 비교 및 사용자 승인 후에만 SVG를 프로모션(정식 자산으로 승격)합니다.

지원되는 CSS

.icon-name, .icon-name::before, .icon-name::after 규칙
px 치수와 단순 오프셋을 가진 절대 위치 의사 요소
currentColor, 단색 배경, border, 개별 테두리
사각형 레이어로 사용되는 linear-gradient(currentColor 0 0) ... / ... no-repeat
clip-path: polygon(...)
rotate(), scaleX(), scaleY() 변환
단색 및 점선 사각형 테두리
투명 테두리 CSS 삼각형
채워진/선으로 그려진 사각형의 border-radius
SVG clipPath를 통한 클리핑된 둥근 테두리

출력은 기본적으로 16×16 viewBox, 투명 배경 및 currentColor를 사용합니다. viewBox는 아이콘의 디자인 캔버스입니다. 기본값이 아닌 .icon-name 상자는 해당 상대적 top/left 오프셋이 적용되기 전에 먼저 캔버스 중앙에 배치됩니다. 지오메트리 오류를 숨기기 위해 전역 오버플로우 재정의를 추가하지 마십시오. 이 도구는 VS border-box 루트 모델을 적용하고, 명시적으로 재정의되지 않는 한 의사 요소를 CSS 기본 content-box 모델로 유지하며, 절대 위치 자식을 루트 패딩 상자에 대해 해석하고, 단순 변환을 평탄화하며, 2px/2px 점선 테두리 리듬을 사용합니다. 지원되지 않는 선언은 숨기지 않고 보고합니다.

안전장치

생성된 출력물은 검토 전까지 공식 아이콘 디렉토리와 분리하여 보관합니다.
--force 없이 기존 출력을 덮어쓰지 마십시오.
배치 변환 시 보고서를 SVG와 함께 보관합니다.
보고서에 manual-review가 있다면 변환 성공으로 설명하지 마십시오.
CSS 시각적 동등성이 수용 기준으로 남습니다. 변환기는 의도적으로 보수적으로 작동합니다.

CLI 참조

--css <file>       반복 가능한 CSS 입력 파일.
  --icon <name>      `icon-` 접두사가 없는 아이콘 클래스 접미사.
  --variant <name>   선택적 수정자 상태(예: `checked`).
--output <file>    SVG 출력 경로.
--report <file>    선택적 JSON 보고서 경로.
--size <number>    정사각형 캔버스 크기; 기본값 16.
--force            기존 출력 덮어쓰기 허용.

구현 세부 사항 및 인식된 패턴은 references/css-patterns.md를 읽으십시오.

CSS to SVG Converter