프론트엔드 아이콘 로딩 font vs svg

Jmnote (토론 | 기여)님의 2023년 3월 21일 (화) 19:17 판 (새 문서: ==개요== ;프론트엔드 아이콘 로딩 방식 font vs svg {| class='wikitable' ! 폰트 !! SVG (path) |- | * 과거에 주로 사용하던 방식 * 빌드 결과물에 전체...)
(차이) ← 이전 판 | 최신판 (차이) | 다음 판 → (차이)

개요

프론트엔드 아이콘 로딩 방식 font vs svg
폰트 SVG (path)
  • 과거에 주로 사용하던 방식
  • 빌드 결과물에 전체 아이콘 폰트가 포함되므로 크기가 커진다.
→ SPA 앱의 초기 로딩이 느리다.
  • 폰트가 로딩될 때까지 깨진 글자로 보일 수 있다.
  • 텍스트이므로 텍스트 크기의 영향을 받는다
  • 텍스트와 세로 위치가 잘 맞는다. (물론 폰트가 이상한 경우도 있을 수 있다.)
  • 현재 많이 사용하는 방식
  • 빌드 결과물에 필요한 아이콘만 포함되므로 크기가 작아진다.
→ SPA 앱의 초기 로딩이 빠르다.
  • 텍스트와 세로 위치가 안맞을 수 있다. (flex를 이용하면 대부분 잘 맞는다.)
문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}