성능

이 페이지에서는 패키지가 번들 크기와 런타임 비용에 미치는 영향과 많은 아이콘을 렌더링하는 방법을 설명합니다.

아이콘을 불러오고 실행하는 방식

아이콘당 모듈 하나. 아이콘 모듈에는 부수 효과가 없으므로, 번들러가 가져오지 않은 아이콘을 제거합니다. 압축하고 gzip을 적용하면 첫 React 또는 Vue 아이콘은 공유 런타임을 포함해 약 4KB, 이후 아이콘은 하나당 약 0.6KB가 늘어납니다.
미리 렌더링된 마크업. 정지 상태는 문자열로 제공되므로, 서버와 브라우저 모두 첫 페인트 전에 별도 계산이 필요하지 않습니다.
필요할 때만 실행되는 모션. 모션 코드는 아이콘이 움직이는 동안에만 실행되고, 모션이 끝나면 멈춥니다.
공유 코드. 모든 아이콘이 하나의 지오메트리 모듈을 공유하고, 모든 애니메이션 아이콘이 하나의 런타임을 공유하므로 브라우저와 CDN은 이 코드를 한 번만 캐시합니다.
CSS 색상. 여러 아이콘의 색상은 CSS 한 곳만 바꾸면 되며, 아이콘을 다시 렌더링하지 않습니다.

각 아이콘은 그림자와 하이라이트에 SVG 필터를 사용합니다. 아이콘을 수백 개 표시한다면 보이는 행만 렌더링하거나, 브라우저가 한 번만 래스터화하는 <img> 태그에 정적 SVG 파일을 사용하세요.

개발 서버는 모든 아이콘을 참조하는 패키지 인덱스 전체를 불러오는 경우가 많습니다. 이를 피하려면 각 아이콘을 해당 파일에서 직접 가져오세요.

import Folder from "kubai-icons-react/icons/folder";