Custom Icon

기본 icon 외에 custom으로 사용 가능한 icon

해당 웹 페이지에서 icon 선택 후 다운로드 하면 된다
svg 파일 업로드하여 icon 새로 만드는 것도 가능하다

Flutter Custom Icon

파일을 다운로드 하면 .dart, config.json, fonts 폴더에 .ttf가 생성 되어있다
.dart - project 안에 원하는 곳에 넣으면 됨
.ttf - assets/fonts/.ttf 이렇게 폰트 폴더를 생성해서 넣어줌
config.json - 차후 icon을 추가하고 싶을때 웹 페이지에서 import 해서 icon을 불러와서 추가하고 다시 저장해서 사용 가능함

pubspec.yaml

    - family: CustomIcon
      fonts:
        - asset: assets/fonts/CustomIcon.ttf

custom_icon.dart

import 'package:flutter/widgets.dart';

class CustomIcon {
  CustomIcon._();

  static const _kFontFam = 'CustomIcon';

  static const IconData looks = IconData(0xe800, fontFamily: _kFontFam);
  static const IconData cake = IconData(0xe801, fontFamily: _kFontFam);
  static const IconData fingerprint = IconData(0xe802, fontFamily: _kFontFam);
  static const IconData flightLand = IconData(0xe803, fontFamily: _kFontFam);
  static const IconData flashAuto = IconData(0xe804, fontFamily: _kFontFam);
  static const IconData freeBreakfast = IconData(0xe805, fontFamily: _kFontFam);
  static const IconData gavel = IconData(0xe806, fontFamily: _kFontFam);
  static const IconData goat = IconData(0xe807, fontFamily: _kFontFam);
  static const IconData http = IconData(0xe808, fontFamily: _kFontFam);

project에 추가한 .dart 파일의 class명과 icon parameter 수정 후 사용 가능

기존 icon widget 사용 방식과 똑같이 사용하면 된다(color, size 수정가능)

생각보다 다양한 종류의 icon들이 많이 있다

body: Padding(
        padding: const EdgeInsets.only(left: 12, right: 12, top: 20),
        child: GridView(
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 7,
            mainAxisSpacing: 10.0,
            crossAxisSpacing: 10.0,
            childAspectRatio: 1.1,
          ),
          children: const [
            Icon(CustomIcon.looks),
            Icon(CustomIcon.cake),
            Icon(CustomIcon.fingerprint),
            Icon(CustomIcon.flightLand),
            ...
          ),)],

Example