Automation

[Prinzhorn]

There should be a single command which does:

1. Fetch the latest font from each repository (md, fa, etc.)
2. Extract the SVGs
3. Transform the SVGs (e.g. normalize the size and remove fill property from paths) and create the react components from it

Without automation everything is too fragile. For example as far as I understand you removed the fill=#444 manually? What happens with the next update? You would always need to keep this in mind if it's not automated. A new font awesome release should be pulled into react-icons with a single command (same for all other fonts).

[Prinzhorn]

Also: the icons shouldn't be squares but keep the size of the original font. Given fa-bolt as an example (http://fontawesome.io/icon/bolt/) this is how it looks like as a font

If it would be square (with space on the left/right) it would look different next to text.

I'll take a look at how we could do that (e.g. wrap the path in a <g> and apply some transformation?). This means there would be no need for something like svg-scaler because we don't touch the path.

[gorangajic]

I have scaled them because react-svg-morph so they are animated nicely, maybe we can keep the same height and ignore width ?

[gorangajic]

btw I am currently busy so can't start on this right now, if you want to work on this and have questions just ask

[Prinzhorn]

I didn't know about react-svg-morph and that's really unfortunate. Does it require the same width/height/viewBox for both svgs? If so, then that's not compatible with my plans. But in order for react-icons to be a replacement for icon fonts we need the correct sizes.

maybe we can keep the same height and ignore width ?

That could work. Looks like with icon fonts they always have the same height but different widths. Compare fa-bolt from above with fa-money, which has a larger width than height. They both render with a height of 280

btw I am currently busy so can't start on this right now, if you want to work on this and have questions just ask

I want to at least put a basic proof-of-concept PR together which we can use for discussion.

[Prinzhorn]

First of all: not touching the svg (e.g. scaling the path) works. Also in combination with only setting the height. The browser scales it just fine.

Example (fa-rotate-left) http://jsbin.com/gusowuxiye/edit?html,output

<button type="button" style="line-height:1;">
  <svg height="1em" viewBox="0 0 1536 1896.0833" style="display:inline-block;vertical-align:middle;" >
    <g><path d="M1536 896q0 156-61 298t-164 245-245 164-298 61q-172 0-327-72.5t-264-204.5q-7-10-6.5-22.5t8.5-20.5l137-138q10-9 25-9 16 2 23 12 73 95 179 147t225 52q104 0 198.5-40.5t163.5-109.5 109.5-163.5 40.5-198.5-40.5-198.5-109.5-163.5-163.5-109.5-198.5-40.5q-98 0-188 35.5t-160 101.5l137 138q31 30 14 69-17 40-59 40h-448q-26 0-45-19t-19-45v-448q0-42 40-59 39-17 69 14l130 129q107-101 244.5-156.5t284.5-55.5q156 0 298 61t245 164 164 245 61 298z"/></g>
  </svg>
  <span>Bacon</span>
</button>

This means we basically just need to drop width from react-icon-base.

I created a pull-icons script which I ran before create.js. It's currently fa only, but it makes it fully automated.

#!/bin/bash
set -e

TMP_FOLDER=/tmp/react-icons
mkdir -p $TMP_FOLDER

#Font-Awesome:

echo "Downloading Font-Awesome font and css"
curl -o $TMP_FOLDER/fontawesome-webfont.svg https://raw.githubusercontent.com/FortAwesome/Font-Awesome/master/fonts/fontawesome-webfont.svg
curl -o $TMP_FOLDER/font-awesome.css https://raw.githubusercontent.com/FortAwesome/Font-Awesome/master/css/font-awesome.css

echo "Cleaning up the Font-Awesome target directory"
rm -rf icons/fa
mkdir -p icons/fa

echo "Converting Font-Awesome font into separate SVGs"
svg-caster --svg-font $TMP_FOLDER/fontawesome-webfont.svg --font-css $TMP_FOLDER/font-awesome.css --font-css-prefix "fa-" --out-svg icons/fa

#Cleanup
rm -rf $TMP_FOLDER

Now the only question is: will this work with react-svg-morph if the viewBox is different?

[kamijin-fanta]

fix in version 3.
thx.