도움말/기준
아이콘 표준
모든 아이콘은 Tabler Icons(MIT) 정품 path를 인라인으로만 씁니다.
자산에 들어가는 아이콘은 외부 스크립트나 아이콘 폰트를 쓰지 않고, SVG path를 HTML에 직접 박아 넣습니다. 받는 사람이 추가 설치 없이 파일 하나로 끝낼 수 있어야 하기 때문입니다.
규격
<svg class="w-[18px] h-[18px] shrink-0" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.8"
stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="..." />
</svg>- 출처는 Tabler Icons(MIT) — 눈대중으로 그린 path를 쓰지 않습니다
viewBox="0 0 24 24"·stroke="currentColor"· round cap/join 통일- 크기를 지정한
<svg>에는 `shrink-0` — flex 안에서 찌그러지는 것을 막습니다 - 장식용은
aria-hidden="true", 아이콘만 있는 버튼에는aria-label
Tailwind에 없는 크기 클래스를 쓰지 않습니다
w-4.5, h-5.5, w-6.5 같은 값은 Tailwind 기본 스케일에 없습니다. 써 두면 CSS 규칙이 아예 만들어지지 않아 SVG가 크기를 못 받고 세로로 늘어납니다. 소수점 중 실제로 존재하는 것은 0.5 1.5 2.5 3.5뿐이고, 그 외 크기가 필요하면 w-[18px]처럼 임의값을 씁니다.
이 규칙은 사람이 지키는 게 아니라 검사 스크립트가 배치마다 자동으로 걸러냅니다.