[React][React Native][UI][Web] 1000개가 넘는 통일된 스타일의 깔끔한 아이콘

# lucide-react, lucide-react-native를 활용해서 아이콘 한 번에 해결하기

 UI를 개발하는 과정에서 아이콘의 사용은 필수적입니다. 특히 UI가 복잡하거나 기능이 많을 경우, 좋은 UX를 제공하기 위해서는 아이콘은 반드시 필요합니다. 하지만 개발팀에 디자이너가 없거나 있더라도 아이콘까지 직접 디자인을 하는 것은 시간을 많이 빼앗기는 일입니다. 그러다보니, 필연적으로 여러 아이콘 라이브러리들을 활용하게 됩니다. 그런데 항상 모든 라이브러리들이 충분한 수의 아이콘을 제공하는 것은 아니므로, 여러 라이브러리에서 필요한 아이콘들을 찾아서 사용하다보면, 전체적인 통일감이 떨어져서 아쉬움이 드는 경우가 많습니다. 오늘 포스팅에서는 이러한 경우에 활용 가능한 심플하면서도 많은 아이콘을 제공하는 아이콘 툴킷을 소개하려고 합니다.

# 공식 사이트

https://lucide.dev/

Lucide

 

# 깃헙 사이트

https://github.com/lucide-icons/lucide

GitHub - lucide-icons/lucide: Beautiful & consistent icon toolkit made by the community. Open-source project and a fork of Feath

 

# 사용방법

- 본 포스팅에서는 React, React Native를 타겟으로 글을 작성하였지만, 기본적으로 JS, Vue, Svelte, Flutter 등 대부분의 프레임워크에서 사용할 수 있는 방법을 제공하고 있으므로, 필요한 상황에 맞게 사용하시면 될 것 같습니다.

- 라이브러리를 설치합니다

yarn add lucide-react-native # react native
yarn add lucide-react # react

 

- React에서의 사용법

import { Camera } from 'lucide-react';

const App = () => {
  return <Camera color="red" size={48} />;
};

export default App;

 

- React Native에서의 사용법

import { Camera } from 'lucide-react-native';

const App = () => {
  return <Camera color="red" size={48} />;
};

export default App;

 

- 원하는 아이콘을 찾는 방법은 공식 사이트에서 메뉴를 통해 찾거나 검색을 하시면 쉽게 찾으실 수 있습니다. 제공하는 아이콘 중에서 일반적인 다른 라이브러리에서는 제공하지 않지만, 실제 개발 시에는 유용하게 사용될 수 있는 몇 가지 아이콘 카테고리를 추천드리자면, 브랜드 아이콘, 이모지, 건물, 날씨 등이 있습니다

# 주의 사항

- 아이콘 등의 리소스를 사용할 때 항상 라이센스 관련해서 주의를 해야 합니다. 이 라이브러리는 https://lucide.dev/license라는 라이센스를 가지고 있습니다. 전체적인 내용을 요약하자면, 상업적 용도를 포함하여 자유롭게 활용이 가능하나, 이 라이센스를 명시해야 한다는 조건이 있으니 주의 하시기 바랍니다.

License - Lucide

---