[flutter] Iconly 라이브러리를 사용하여 앱의 아이콘을 웹 사이트에 적용하기

14 Dec 2023

flutter

이번 글에서는 Flutter 앱에서 사용한 아이콘을 웹 사이트에 쉽게 적용하기 위해 Iconly 라이브러리를 사용하는 방법을 알아보겠습니다.

1. Iconly 라이브러리란?

Iconly는 간단하고 현대적인 디자인을 가진 2,000개가 넘는 아이콘으로 구성된 오픈 소스 아이콘 라이브러리입니다. 이 라이브러리는 Flutter용으로 최적화되어 있으며, 디자이너와 개발자가 사용하기 쉽도록 만들어졌습니다.

2. Flutter 앱에서 Iconly 라이브러리 사용하기

먼저, Flutter 프로젝트에 Iconly 라이브러리를 추가해야 합니다. 이를 위해 pubspec.yaml 파일에 아래와 같이 의존성을 추가합니다.

dependencies:
  iconly: ^1.0.0

그리고 아래의 명령어를 사용하여 패키지를 업데이트합니다.

flutter pub get

이제 Iconly 라이브러리를 사용하여 원하는 아이콘을 Flutter 앱에 추가할 수 있습니다.

import 'package:iconly/iconly.dart';

IconlyIcon(
  IconlyBold.Home,
  color: Colors.blue,
  size: 24,
)

3. Web 사이트에 Iconly 아이콘 적용하기

웹 사이트에서도 Iconly 라이브러리로 사용한 아이콘을 쉽게 적용할 수 있습니다. 먼저, Flutter Web 프로젝트를 빌드합니다.

flutter build web

빌드가 완료되면 build/web 디렉토리에 생성된 파일들을 웹 사이트의 해당 위치에 배포합니다.

그리고 웹 페이지의 HTML 파일에 Iconly 아이콘을 적용하는 방법은 아래와 같습니다.

<!DOCTYPE html>
<html>
<head>
  <link
    rel="stylesheet"
    type="text/css"
    href="path/to/iconly.css"
  />
  <style>
    .iconly {
      font-family: 'Iconly';
      font-size: 24px;
      color: #ff6347;
    }
  </style>
</head>
<body>
  <div>
    <i class="iconly iconly--bold-home"></i>
  </div>
</body>
</html>

위 예시에서 path/to/iconly.css는 Iconly에서 제공하는 스타일시트 파일을 의미합니다.

Iconly 라이브러리로 디자인된 아이콘을 웹 페이지에 적용하여, Flutter 앱과 웹 사이트 간의 일관성 있는 사용자 경험을 제공할 수 있습니다.

참고 자료: