Git Product home page Git Product logo

icon_font_generator's Introduction

Flutter Icon Font Generator

Pub

Convert all *.svg icons from dir to icon-font (.ttf) and generates flutter compatible dart class.

Abstraction layer for NodeJs package fantasticon.

Requirements

Node.JS v11+

Install:

$ pub global activate icon_font_generator

Params:

* - required

  • --from * - Input dir with svg's
  • --out-font * - Output icon font path (to file, for example: lib/font.ttf)
  • --out-flutter * - Output flutter icon class (to file, for example: lib/icons.dart)
  • --class-name * - The class name is also the font name used in pubspec.yaml (as font name)
  • --height - Fixed font height value, defaults: 512
  • --descent - Offset applied to the baseline, defaults: 240
  • --package - Name of package for generated icon data (See more)
  • --indent - Indent for generating dart file, for example: ' ', default: ' '
  • --normalize - Normalize icons sizes, default: false
  • --yarn - Usage yarn instead npm, default: false
  • --naming-strategy - Icons name strategy: snake (yaru_icon) or camel (yaruIcon), default: snake

Example

File structure:

project
└───icons
│   │   account.svg
│   │   arrow_left.svg
│   │   arrow_right.svg
│   │   collection.svg
│   
└───lib
│   │   icon_font
│   │   widgets

Run command:

$ icon_font_generator --from=icons --class-name=UiIcons --out-font=lib/icon_font/ui_icons.ttf --out-flutter=lib/widgets/icons.dart

Generates:

project
└───icons
│   │   account.svg
│   │   arrow_left.svg
│   │   arrow_right.svg
│   │   collection.svg
│   
└───lib
│   └───widgets
│   |   │   icons.dart
│   │
│   └───icon_font
│       │   ui_icons.ttf

Generated icons.dart:

// GENERATED CODE - DO NOT MODIFY BY HAND

import 'package:flutter/widgets.dart';

@immutable
class _UiIconsData extends IconData {
  const UiIconsData(int codePoint)
      : super(
          codePoint,
          fontFamily: 'UiIcons',
        );
}

@immutable
class UiIcons {
  const UiIcons._();

  static const IconData account = _UiIconsData(0xe000);
  static const IconData arrowLeft = _UiIconsData(0xe001);
  static const IconData arrowRight = _UiIconsData(0xe002);
  static const IconData collection = _UiIconsData(0xe003);
}

And also need add font to pubspec.yaml:

...

flutter:
  fonts:
    - family: UiIcons
      fonts:
        - asset: lib/src/icon_font/ui_icons.ttf

icon_font_generator's People

Contributors

hanneskuettner avatar jupi007 avatar prateekmedia avatar sergeshkurko avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.