React-native-vector-icons: [4.4.0] Unwanted ~40px marginTop with Feather icons

[fungilation]

Before with FontAwesome (middle icon):

<Icon name="arrows-alt" size={17} color={iconColor} /> Browser

After with Feather (middle icon):

<FeatherIcon name="globe" size={17} color={iconColor} /> Browser

I tried adding style={{padding: 0, margin: 0}} prop to <FeatherIcon>, no difference.

It seems all Feather icons add this 40px or so additional margin on top of the icons. (I tried 2 icons besides "globe")

I upgraded RN-vector-icons from 4.3.0 to 4.4.0.

[oblador]

Think this might be due to the fontcustom transformation. Since you added this icon set, does it work for you @kleiram?

[oblador]

Looking at the outputted icons they also seem to suffer the stroke vs fill issue. Did you look at the link I sent you @kleiram in the PR? This was prematurely merged :-/

[violetbobo]

yes, I meet it yet! the last one is feather icon

[violetbobo]

@oblador

[kleiram]

@oblador I'm going to check, it used to work for me, since I ran the package from my own repository for a while. Let me get back to you!

[tpedersen123]

Any news on this @kleiram ? I'm having trouble with it too :-(

[faahmad]

+1

[kleiram]

@tpedersen123 Not yet unfortunately! I really don't understand what's happening to be honest. Perhaps the font is messed up.

[kleiram]

Alright, so, I've been investigating further, and it seems the fontcustom command adds an extra margin to the top of the generated font.

@oblador Do you have any experience with this? It looks to be related to fontcustom/fontcustom#134

[kleiram]

@oblador I think it might be best to revert the merge, release a version 4.4.1 and return to work for now.

[oblador]

I went with generating them by hand via icomoon instead. Not what I wanted, but maybe you can maintain them @kleiram? I've documented steps needed in the repo.

Fix released in 4.4.1.

[fungilation]

Works for me!