westracer / fontify Goto Github PK
View Code? Open in Web Editor NEWConverts SVG icons to OTF font and generates Flutter-compatible class. Provides an API and a CLI tool.
License: Other
Converts SVG icons to OTF font and generates Flutter-compatible class. Provides an API and a CLI tool.
License: Other
Hello, upon building font from svgs, i have warnings in my project.
Danger Circle.svg -> danger_circle
DangerCircle.svg -> danger_circle
Could we have bool or something to format it to dangerCircle ?
Thanks!
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:
Is there a way to preserve SVG colors when generating an .otf
with fontify
?
% fontify Outline Outline.otf --output-class-file=outline.dart --indent=4 -r --class-name=Outline --font-name="Outline"
Building package executable...
Failed to build fontify:fontify:
Error: Cannot run with sound null safety, because the following dependencies
don't support null safety:
- package:args
- package:fontify
- package:yaml
- package:logger
- package:recase
- package:xml
- package:path_parsing
- package:petitparser
For solutions, see https://dart.dev/go/unsound-null-safety
../../../../.pub-cache/hosted/pub.dev/fontify-0.2.0/bin/fontify.dart:115:26: Error: The parameter 'error' can't have a value of 'null' because of its type 'String', but the implicit default value is 'null'.
Try adding either an explicit non-'null' default value or the 'required' modifier.
void _printUsage([String error]) {
^^^^^
../../../../.pub-cache/hosted/pub.dev/fontify-0.2.0/bin/fontify.dart:31:10: Error: Non-nullable variable 'parsedArgs' must be assigned before it can be used.
_run(parsedArgs);
^^^^^^^^^^
../../../../.pub-cache/hosted/pub.dev/fontify-0.2.0/bin/fontify.dart:116:19: Warning: Operand of null-aware operation '??' has type 'String' which excludes null.
final message = error ?? _kAbout;
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.7.4, on macOS 13.2.1 22D68 darwin-arm64, locale en-CZ)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc4)
[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] VS Code (version 1.75.1)
[✓] Connected device (2 available)
[✓] HTTP Host Availability
• No issues found!
Is there any tool that can undo this? Netflix app uses this and I am trying to open the svg icons.
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.
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
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?
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
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?
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?
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
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:
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:
This is because of the normalize option I think, so when I try it with normalize: false this is the result:
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:
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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.