search

corymsmith / react-native-icons

Quick and easy icons in React Native
MIT License
1.14k stars 141 forks source link

Icons being clipped #55

Closed marcshilling closed 8 years ago

marcshilling commented 9 years ago

The zocial Twitter icon (and many of their other ones) is being clipped.

<FAKIconImage name={'zocial|twitter'} size={50} style={{width:50, height: 50}} color='white' />

Image of clipping

I've tried messing with the both the size prop, and what I pass to width and height, but it keeps clipping.

corymsmith commented 9 years ago

What is that view wrapped in? The view itself doesn't look square, just curious if thats the issue

Thanks,

Cory Smith http://ca.linkedin.com/in/corysmith/ http:/twitter.com/smixx http://twitter.com/smixx

On Fri, Jun 26, 2015 at 10:29 AM, Marc Shilling notifications@github.com wrote:

The zocial Twitter icon (and many of their other ones) is being clipped.

<FAKIconImage name={'zocial|twitter'} size={50} style={{width:50, height: 50}} color='white' />

[image: Image of clipping] https://camo.githubusercontent.com/51f5e8c42f0a120e2264046a1788613c9f198546/687474703a2f2f692e696d6775722e636f6d2f737558564a36422e706e67

I've tried messing with the both the size prop, and what I pass to width and height, but it keeps clipping.

— Reply to this email directly or view it on GitHub https://github.com/corymsmith/react-native-icons/issues/55.

marcshilling commented 9 years ago

Nope, even if I make the icon my very top level view it is still clipped:

<View style={{flex: 1, backgroundColor: 'black', paddingTop: 20}}>
   <FAKIconImage name={'zocial|twitter'} size={50} style={{width:50, height: 50}} color='white' />
</View>

clipped

marcshilling commented 9 years ago

This is just an issue with zocial, btw. If I use fontawesome|twitter, it works great.

irfaan commented 9 years ago

I am experiencing clipping with fontawesome|keyboard-o

irfaan commented 9 years ago

@corymsmith Did you have any thoughts as to the source of this issue?

corymsmith commented 9 years ago

It has to do with the image scaling mode and the fact that those icons aren't equal width & height. I haven't had time to look into it though

On Fri, Aug 21, 2015 at 8:43 AM, irfaan notifications@github.com wrote:

@corymsmith Did you have any thoughts as to the source of this issue?

Reply to this email directly or view it on GitHub: https://github.com/corymsmith/react-native-icons/issues/55#issuecomment-133204370

ffxsam commented 8 years ago

I'm experiencing this in FontAwesome too. For example, check out fontawesome|bicycle and fontawesome|diamond.

ffxsam commented 8 years ago

The problem might lie in this section of code: https://github.com/corymsmith/react-native-icons/blob/6a2e9c532d8dde7d90a6ce7593971dfd2f1a039e/iOS/ReactNativeIcons/Libraries/FontAwesomeKit/FAKIcon.m#L118-L134

I'm not totally sure, as I don't know much about Objective-C. But basically I think the solution would be to find the actual aspect ratio of the font icon, and then if one of its dimensions exceeds the size parameter passed to the React component, shrink that value to equal size while also reducing the other dimension by the same ratio.

corymsmith commented 8 years ago

@ffxsam You should check out https://github.com/oblador/react-native-vector-icons

He's fixed all these issues in his lib, I'm most likely discontinuing support on this lib to focus on pushing forward other open source projects. There's no need for competing icon libs that do the same thing :)

ffxsam commented 8 years ago

Oh man, thanks for the link! You saved me from spending hours later on trying to fix this. ;) Maybe you could include a note to this effect on the npmjs page, so people don't stumble down the same path I did.

corymsmith commented 8 years ago

@ffxsam Just added a warning now