Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"Weight" parameter is not supported #6

Open
n-bernat opened this issue Feb 21, 2024 · 2 comments
Open

"Weight" parameter is not supported #6

n-bernat opened this issue Feb 21, 2024 · 2 comments

Comments

@n-bernat
Copy link

Icon widgets allows developers to customize a bunch of properties. One of them is weight which currently has no effect. According to the documentation:

Requires the underlying icon font to support the wght [FontVariation] axis, otherwise has no effect.

I will investigate how fonts are generated and see whether I can make it work.

@n-bernat
Copy link
Author

It looks like svgtofont lacks support for generating fonts with a custom font axis (wght in this case). It would probably require some custom implementation and more research into the TTF specs if there are no tools for that.

@n-bernat
Copy link
Author

n-bernat commented Feb 29, 2024

After digging a little bit it looks like fontmake from Google supports generating variable font icons, which would allow to control both weight and optical size.

fontmake supports .glyphs, .ufo and .designspace formats.

UFO sounds like the most reasonable candidate for an intermediate format, because it was the easiest to find information about it and it also looks like the most "open" file format. I'm not a font designer though, so if anyone wants to stop me it's the best time for that.

The workflow update that I can imagine for that is:

  1. Replace downloading the compiled TrueType font with raw SVGs from lucide-icons/lucide
  2. Generate outlined SVGs for various weights and sizes
  3. Convert SVGs to *.ufo files (I found something called fonttools that does that, but I will look for something that doesn't require Python)
  4. Feed fontmake with UFOs and let it do its magic
  5. ✨ Have fun with a TrueType variable font ✨

For supported weights, I would go for values supported by Material Symbols and add one additional weight value.

Weight (wght) Source line thickness (px)
100 0.5
200 1
300 1.5
400 2
500 2.5
600 3
700 3.5
800 4 (additional)

For supported optical sizes, I would also start with Material's defaults and maybe add more in the future.

Optical Size (opsz)
20
24
40
48

One consideration is that the library will probably grow quite a bit, but as it's a Flutter-specific implementation and Flutter removes unused icons it shouldn't be much of a problem.

After doing all of that, it should be supported natively in Flutter.

Icon(
  LucideIcons.bot,
  color: Colors.black,
  size: 24,
  // Now supports customizing `weight` and `opticalSize` 🎉
  weight: 400,
  opticalSize: 24,
)

If everything goes smoothly, it may be implemented faster than for the official icon set in Flutter https://www.github.com/flutter/flutter/issues/102560

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant