Feather: Webfont?

[waynehoover]

Do you have any plans to produce a webfont with these icons?

Creating a webfont would reduce friction to adoption. We could use the unpkg cdn for example and provide developers with a quick one line css include to use the font. (We already can per icon today: https://unpkg.com/[email protected]/icons/arrows/arrow-down-left.svg )

Building the webfont could be a script in the build process. Take the SVGs, combine them into to a .woff and generate the css file. I would be willing to look into this if you feel its a good idea. Looks like we could use this tool to do most of the work: https://github.com/sunflowerdeath/webfonts-generator

[colebemis]

If a webfont can be generated from the icons directory, I'm open to the idea. I think there might be problems converting SVGs that use stroke instead of fill. That's definitely something to look into though.

[waynehoover]

Correct, it looks like any tool to automate converting to a font needs the SVGs to use fill. We could do this manually ( https://icomoon.io/#docs/stroke-to-fill ) but there doesn't seem to be anything automated to do this yet, but maybe in the future: https://github.com/nfroidure/svgicons2svgfont/issues/60

So for now we either manually convert to fills and then create the font or we just wait until someone makes an automated solution.

[thenewvu]

To automate converting strokes to paths, you can customize this script:

#!/bin/bash

echo $1
sed -i 's/stroke-width="2"/stroke-width="1"/g' $1
inkscape $1 \
--verb=EditSelectAll \
--verb=SelectionUnGroup \
--verb=StrokeToPath \
--verb=FileSave \
--verb=FileQuit

As you can see, you need pre-installed sed and inkscape.

Then run it:

find icons/ -type f | ./strokes-to-paths.sh {}

To burn the CPU and also speed up the progress, run it with parallel:

find icons/ -type f | parallel -j4 ./strokes-to-paths.sh {}

Though I said automate but actually when running the script, you can't do anything else because inkscapes GUI will be popped up continuously.

[thelefty]

@thenewvu would you be kind enough to send me a zip of the svg's converted with paths/fills? That would be amazing!

[roikiermedia]

I was also searching for a webfont and converted all icons with a batch action in Adobe Illustrator and made a font with icomoon.io. Way to much work for every release, but for the moment this seems to work ok.
feather-icons-font.zip

[elrumordelaluz]

In case could be useful for someone, there is svg-outline-stroke, you can play online here

[luizbills]

Also using icomoon.io I made a repo to a temporary feather webfont https://github.com/luizbills/feather-icon-font

[colebemis]

I'd like to keep this core repo as small as possible. I think an auxiliary repo (like sketch-feather orreact-feather) for a Feather webfont is the way to go. It should be possible to use the feather-icons npm package and svg-outline-stroke to automatically build a webfont.

[maximbaz]

If you manage to find an automated way to build a font out of images, I would recommend not relying on external repos, but adding fonts directly to Github releases in this repo. It is possible to configure Travis to automatically build the font and automatically attach it to the release — this is completely transparent and doesn't require project maintainers to do anything extra once the process is properly set up.

I configured this for Emojione a while ago, here's how to do it: https://github.com/emojione/emojione-assets/pull/30

What is needed is for someone to create a Docker image that can build Feather font, this image will be used by the Travis build. In the link above the Docker image is called maximbaz/emojione-fonts-build, and its code is hosted here: https://github.com/maximbaz/docker-emojione-fonts-build

I won't be doing this for Feather font, but I hope it inspires someone 😉 The two links above should be all you need, and I'm happy to answer questions. My experience with Emojione shows that anyone can prepare all of this, submit a PR and ask a member of Feather team to click a few buttons on Travis after everything is merged.

[suhailkc]

use https://github.com/AT-UI/feather-font

[rfbezerra]

I made a PR (#608) to add a script that generate TTF font. It uses Inkscape to convert stroke to fills.
Besides that, I have the latest font generated here v4.21.0-ttf

[rfbezerra]

I made a docker image to simplicate necessary steps to build a TTF font.
If u want to check, it is this project svg-to-ttf.
With that, its simple to build any ttf font from svg glyphs, e.g.:

docker run --rm -v "${PWD}":/fonts rfbezerra/svg-to-ttf -i ./icons -n Feather -u $(id -u)