Converts SVG icons to OTF font and generates Flutter-compatible class. Provides an API and a CLI tool.

Overview

Fontify

pub package

The Fontify package provides an easy way to convert SVG icons to OpenType font and generate Flutter-compatible class that contains identifiers for the icons (just like CupertinoIcons or Icons classes).

The package is written fully in Dart and doesn't require any external dependency. Compatible with dart2js and dart2native.

Using CLI tool

Globally activate the package:

$ pub global activate fontify

And it's ready to go:

$ fontify <input-svg-dir> <output-font-file> [options]

Required positional arguments:

  • <input-svg-dir> Path to the input directory that contains .svg files.
  • <output-font-file> Path to the output font file. Should have .otf extension.

Flutter class options:

  • -o or --output-class-file=<path> Output path for Flutter-compatible class that contains identifiers for the icons.
  • -i or --indent=<indent> Number of spaces in leading indentation for Flutter class file. (defaults to "2")
  • -c or --class-name=<name> Name for a generated class.
  • -p or --package=<name> Name of a package that provides a font. Used to provide a font through package dependency.

Font options:

  • -f or --font-name=<name> Name for a generated font.
  • --[no-]normalize Enables glyph normalization for the font. Disable this if every icon has the same size and positioning. (defaults to on)
  • --[no-]ignore-shapes Disables SVG shape-to-path conversion (circle, rect, etc.). (defaults to on)

Other options:

  • -z or --config-file=<path> Path to Fontify yaml configuration file. pubspec.yaml and fontify.yaml files are used by default.
  • -r or --recursive Recursively look for .svg files.
  • -v or --verbose Display every logging message.
  • -h or --help Shows usage information.

Usage example:

$ fontify assets/svg/ fonts/my_icons_font.otf --output-class-file=lib/my_icons.dart --indent=4 -r

Updated Flutter project's pubspec.yaml:

...

flutter:
  fonts:
    - family: Fontify Icons
      fonts:
        - asset: fonts/my_icons_font.otf

CLI tool config file

Fontify's configuration can also be placed in yaml file. Add fontify section to either pubspec.yaml or fontify.yaml file:

fontify:
  input_svg_dir: "assets/svg/"
  output_font_file: "fonts/my_icons_font.otf"
  
  output_class_file: "lib/my_icons.dart"
  class_name: "MyIcons"
  indent: 4
  package: my_font_package

  font_name: "My Icons"
  normalize: true
  ignore_shapes: true

  recursive: true
  verbose: false

input_svg_dir and output_font_file keys are required. It's possible to specify any other config file by using --config-file option.

Using API

svgToOtf and generateFlutterClass functions can be used for generating font and Flutter class.

The example of API usage is located in example folder.

Notes

  • Generated OpenType font is using CFF table.
  • Generated font is using PostScript Table (post) of version 3.0, i.e., it doesn't contain glyph names.
  • Supported SVG elements: path, g, circle, rect, polyline, polygon, line.
  • SVG transforms are applied to paths according to specs.
  • SVG <g> element's children are expanded to the root with transformations applied. Anything else related to the group is ignored and group referencing is not supported.
  • Consider using Non-zero fill rule.
  • When ignoreShapes is set to false, every SVG shape's (circle, rect, etc.) outline is converted to path. Note that any attributes like "fill" or "stroke" are ignored and only the outline is used, so the resulting glyph may look different from SVG icon. It's recommended to convert every element in SVG to path.
  • When normalize is set to false, it's recommended that SVG icons have the same height. Otherwise, final result might not look as expected.
  • When Flutter class is generated, static variables names derive from SVG file name converted to pascal case with non-allowed characters removed. Name is set to 'unnamed', if it's empty. Suffix '_{i+1}' is added, if name already exists.

Planned

  • Support svg-to-ttf conversion (cubic-to-quad curves approximation needs to be done).
  • Support ligatures.
  • Support font variations.

Contributing

Any suggestions, issues, pull requests are welcomed.

License

MIT

Comments
  • FontFamily.cpp(184)] Could not get cmap table size!

    FontFamily.cpp(184)] Could not get cmap table size!

    I've had other team members reporting weird Flutter crashes on iOS simulator that I've been unable to reproduce, until now.

    It looks like the culprit is the *.otf file I'm generating with Fontify, the exact page the app is crashing on consistently is using icons from the generated font file, and when commenting the IconData out and replacing with default Flutter icons, no more crashing.

    [VERBOSE-2:FontFamily.cpp(184)] Could not get cmap table size!
    [VERBOSE-3:FontCollection.cpp(95)] nTypefaces == 0
    

    It can be reproduced reliably when running the app on iOS 11.4 simulator.

    Related Flutter issues that have the same error have suggested spacing within the font family name and/or filename as the culprit, but I don't have either present in my font file or pubspec.yaml.

    My fontify.yaml (if it helps)

    fontify:
      input_svg_dir: "assets/svg/"
      output_font_file: "assets/fonts/my_icons.otf"
    
      output_class_file: "lib/src/my_icons.dart"
      class_name: "MyIcons"
      indent: 4
      package: "my_icons"
    
      font_name: "MyIcons"
      normalize: true
      ignore_shapes: false
    
      recursive: true
      verbose: false
    
    

    Any ideas?

    bug 
    opened by jamieastley 9
  • Icon positioning

    Icon positioning

    Hello,

    I have an issue/feature request about icon positioning. I will try to describe the situation with some pictures.

    I have 3 SVG files, each one represents a bar in a progress/signal display like icon: image They are separate because the colors need to be different depending on some circumstances, so I plan to display each in a Stack so I can color them separately. Every SVG has 128x128 width + height and view box.

    Instead of building/launching the app I use this website to inspect the glyphs inside the font: Torinak. When I build the font with fontify it will resize and center every path: image This is because of the normalize option I think, so when I try it with normalize: false this is the result: image As you can see in this case the icons are not in the correct position.

    When I try to import the same files in FlutterIcon the result is what I am aiming for: image

    Would it be possible to have the same output as with FlutterIcon? Do you think this could be a bug or can this feature be implemented? I would prefer using Fontify if this can be accomplished as the project would not need an external website to convert the icons.

    Thank you!

    bug 
    opened by dricholm 7
  • Support for chromatic fonts

    Support for chromatic fonts

    Flutter supports rendering chromatic icons.

    However, when I use fontify on a set of .svg files in which some of them have colors, the resulting .otf has a single and monochromatic shape.

    For example, for this SVG:

    Screen Shot 2021-05-06 at 15 58 12

    The result glyph is: Screen Shot 2021-05-06 at 15 58 43

    Is there a way to preserve SVG colors when generating an .otf with fontify?

    opened by mateusfccp 4
  • null-safety support

    null-safety support

    Hi,

    Nice utility. Makes things easier.

    I wonder when you plan to update to null-safety? Currently I see it is cross-labelled as not supporting null safety:

    fontify              ✗0.2.0   ✗0.2.0      -           ✗0.2.0
    
    opened by avkonst 3
  • [Request] Support IconData.fontPackage optional parameter via CLI and fontify.yaml

    [Request] Support IconData.fontPackage optional parameter via CLI and fontify.yaml

    Context: I currently have a generic Icon font package (lets call it 'MyCustomFonts') that I intend add as a dependency and import across multiple projects for work.

    Currently if I were to use fontify to generate the Icon class, I would have to include the generated *.otf file in the apps' pubspec.yaml for the icons to correctly render, but this isn't ideal when I just want to be able to import my custom font package like any other dependency.

    Alternatively, if the pubspec.yaml of MyCustomFonts includes the font file asset, and then in the generated Icon class we set the fontPackage parameter for each IconData to point to it's own package, eg:

    static const _kFontFamily = 'MyFontFamily';
    
    static const _kFontPackage = 'MyCustomFonts';
    
    static const IconData some_icon =
          IconData(0xe000, fontFamily: _kFontFamily, fontPackage: _kFontPackage);
    

    it means not having to manually include the *.otf in the new apps we want to use the font package with, and the only thing to do is just add the MyCustomFonts package to the new apps pubspec.yaml and the icons are good to go.

    I've currently forked fontify to hardcode the value I want for this variable in flutter_class_gen.dart and considered making a PR, but I don't quite understand the rest of the package to fully implement setting this via a CLI argument and fontify.yaml configuration.

    enhancement 
    opened by jamieastley 3
  • Config file

    Config file

    Hello @westracer,

    Thanks for this package! So far it works great for me.

    Currently I am using it as a dev dependency in a project, where I have the svg files in the assets folder and added the generated font and dart class to .gitignore. So it works in a similar way as build_runner generated files. But to generate the desired output I always have to specify all the arguments and options in the command, e.g. flutter pub run fontify assets/svg/ fonts/app_icons.otf --output-class-file=lib/presentation/utils/app_icons.dart -r -c AppIcons. Right now I have the command added to README.md, but it would be a lot easier if a config file could be read for this. Something like in flutter_launcher_icons. I would prefer a separate config file, but maybe it could also be placed inside pubspec.yaml or handling both options would be even better.

    What do you think of this?

    enhancement 
    opened by dricholm 3
  • fontify with no options stopped working

    fontify with no options stopped working

    Hi, thanks for the upgrade to null safety. I previously used fontify as the following:

    >  flutter pub run fontify
    

    and it read all settings from fontify section in my pubspec.yaml file:

    fontify:
      input_svg_dir: "assets/svgs/"
      output_font_file: "assets/fonts/AssetIcons.otf"
    
      output_class_file: "lib/icons.dart"
      class_name: "AssetIcons"
      indent: 4
      font_name: "AssetIcons"
      normalize: true
      ignore_shapes: true
    
      recursive: true
      verbose: false
    

    And it worked.

    Now I need to run it as the following in order to get the same result:

    flutter pub run fontify assets/svgs/ assets/fonts/AssetIcons.otf
    

    Basically, it has got now 2 mandatory arguments which are also in the config file.

    Is it possible to put the previous behaviour back?

    opened by avkonst 2
  • Call from an application

    Call from an application

    Hi,

    It's possible to convert using CLI. I just need to know if I could use this package to convert to font using an application, i.e., call this package from inside my function. If possible, could you explain me how? Thanks

    opened by mapkbalaji 1
  • Exclude generated icon file from coverage

    Exclude generated icon file from coverage

    This generated file is part of a (Flutter) project. However, the private constructor can't be tested. So projects using this can't aim for 100% coverage. With this line you can ignore this complete file from the test coverage. We could also use

    // coverage:ignore-line to ignore one line.
    // coverage:ignore-start and // coverage:ignore-end to ignore range of lines inclusive.
    
    opened by renefloor 2
  • [E]  NoSuchMethodError: The method 'split' was called on null

    [E] NoSuchMethodError: The method 'split' was called on null

    I get the following error when i run fontify

    [I]  Using config fontify.yaml
    [E]  NoSuchMethodError: The method 'split' was called on null.
    Receiver: null
    Tried calling: split(RegExp: pattern=[\s|,] flags=)
    

    This is my config file

    fontify:
      input_svg_dir: "cityapp/"
      output_font_file: "cityapp/fonts/my_icons_font.otf"
      
      output_class_file: "cityapp/my_icons.dart"
      class_name: "MyIcons"
      indent: 4
      package: my_font_package
    
      font_name: "My Icons"
      normalize: true
      ignore_shapes: true
    
      recursive: true
      verbose: false
    
    opened by easazade 1
Owner
Igor Kharakhordin
Igor Kharakhordin
A builder that generates an ArgsParser from a class

Parse command line arguments directly into an annotation class using the Dart Build System. Example Annotate a class with @CliOptions() from package:b

Kevin Moore 43 Oct 30, 2022
A CLI tool to help generate dart classes from json returned from API

Json 2 Dart Command line utility Important note There is already a package called json2dart so this package will be called json2dartc ! This project w

Adib Mohsin 38 Oct 5, 2022
A cli tool to run Flutter applications and auto hot reload it when files are changed

Dashmon A minimalistic CLI tool to run Flutter applications and auto hot reload it when files are changed. It will watch changes your application code

Erick 31 Oct 6, 2022
A CLI tool to help batch renaming files.

batch_rename A CLI tool to enable batch renaming of files. Installation Clone the repo and add bin/batch_rename.exe to PATH: gh repo clone POWRFULCOW8

Diego Domínguez Melo 0 Nov 3, 2021
AsyncCallQueue is a Dart class which provides a queuing mechanism to prevent concurrent access to asynchronous code.

async_call_queue AsyncCallQueue is a Dart class which provides a queuing mechanism to prevent concurrent access to asynchronous code. Getting Started

Ron Booth 2 Jan 18, 2022
Generates utilities to aid in serializing to/from JSON.

Provides Dart Build System builders for handling JSON. json_serializable Package: https://pub.dev/packages/json_serializable Source code The core pack

Google 1.4k Jan 8, 2023
A library for Dart that generates fake data

faker A library for Dart that generates fake data. faker is heavily inspired by the Python package faker, and the Ruby package ffaker. Usage A simple

Jesper Håkansson 193 Dec 18, 2022
🔍 👀 CLI utility to check last-visit of your CodeForces friends & much more, 🚀 powered by CodeForces API

JoJo ?? ?? CLI utility to check last-visit of your CodeForces friends & much more, ?? powered by CodeForces API Features Online Friends All Friends Pr

Tirth 5 Jul 20, 2020
Reference implementation for the Zenon SDK for Dart and Flutter apps compatible

Zenon Dart SDK Reference implementation for the Zenon SDK for Dart and Flutter apps compatible with the Zenon Alphanet - Network of Momentum Phase 0.

null 8 Nov 23, 2022
A simple Flutter / Dart Utility class for converting complex objects to uri and query string

A simple Flutter / Dart Utility class for converting complex or nested objects to uri and query strings you can follow the the article on how this cla

Opata Joshua 5 Sep 7, 2022
Automatically generate usecase classes from your repository class definition in Dart and Flutter

Repo Case Automatically generate usecase classes from your repository class definition in Dart and Flutter. Check out the official guide on repo_case

Sandro Maglione 5 Jul 30, 2022
This is a simple class to package up and send requests to the Kroki.io web service.

Kroki.dart This is a simple class to package up and send requests to the Kroki.io web service. A live editor to editing diagrams that Kroki supports c

Tim Maffett 1 Jun 8, 2022
A generator to create config class from json files that support many environments

A generator to create config class from json files that support many environments. Motivation If you use a json file to config your applications, perp

Diego Cardenas 0 Oct 9, 2021
A simple shortcut, command line interface (CLI) for a lazy (a.k.a effective) Flutter developer in order to increase productivity and happiness.

f A simple shortcut, command line interface (CLI) for a lazy (a.k.a effective) Flutter developer in order to increase productivity and happiness. Inst

Salman S 27 Nov 22, 2022
A CLI for syncing Dart dependency versions between pubspec.yaml and pubspec.lock files.

lockpick A CLI for syncing Dart dependency versions between pubspec.yaml and pubspec.lock files. ?? Usage # Activate lockpick pub global activate lock

Jeroen Meijer (Jay) 34 Oct 17, 2022
Flutter Version Management: A simple CLI to manage Flutter SDK versions.

fvm Flutter Version Management: A simple cli to manage Flutter SDK versions. FVM helps with the need for a consistent app builds by allowing to refere

Leo Farias 3.2k Jan 8, 2023
CLI utility to manage MC Server installations

CLI utility to manage MC server installations. Features Install required JDKs Download server files Generate start scripts (with optimized JVM flags)

Michael Rittmeister 14 Nov 18, 2022
Command-line Interface (CLI) for any_icon_maker.

makeanyicon Command-line Interface (CLI) for any_icon_maker. makeanyicon Quick Start Installation Usage License Quick Start Installation dart pub glob

MakeAnyIcon 6 Nov 4, 2022
Official CLI for the GetX framework

Official CLI for the GetX framework

Shahanul Haque Shawon 0 Nov 23, 2021