SVG기반의 WEB/APP 아이콘

WEB&APP

SVG기반의 WEB/APP 아이콘

adnin 2023. 6. 4. 22:34

사람들이 많이 쓰는 웹 아이콘 하나인 Font Awesome이 있는데

최근 발견한 괜찮은 아이콘 팩이 있다.

이 아이콘 팩은 JavaScript는 물론 React, React Native, Vue, Flutter 등 다양한 웹과 앱 Framework에서 사용할 수 있다.

아래는 lucide의 공식 홈페이지다.

자세한 사용법은 홈페이지에 들어가서 살펴보자

https://lucide.dev/

Lucide

lucide.dev

아무튼 fontawesome은 폰트 기반이지만

lucide는 SVG로 출력되어서 조금 더 유연성이 있다.

순수 javascript 사용시에는 아래와 같이 쓸 수 있다.

<!DOCTYPE html>
<body>
  <i icon-name="volume-2" class="my-class"></i>
  <i icon-name="x"></i>
  <i icon-name="menu"></i>

  <script src="https://unpkg.com/lucide@latest"></script>
  <script>
    lucide.createIcons();
  </script>
</body>

마지막에

lucide.createIcons(); 를 쓰면 svg형식으로 바꿔주는것으로 보인다.

물론 루시드 아이콘 팩이 Font Awesome의 다양한 아이콘 수보다는 적지만

웹과 Flutter, React Native에서도 사용할 수 있는 큰 장점이 있으며,

매력적인 디자인의 아이콘 덕분에 앞으로 좀 더 자주 사용하 될 것 같다.

'WEB&APP' 카테고리의 다른 글

프로그레시브 웹 앱 (PWA, Progressive Web Apps) 핵심 요약 (0)	2023.06.03
애플 앱스토어 심사 거부 사례 및 대응 정리 (0)	2023.05.31
iOS,아이폰 CSS 마크업시 고려해야할 사항 (0)	2023.05.31

현재글SVG기반의 WEB/APP 아이콘

0-0Blog