Sides of the icons get cut in custom font

[pjamrozowicz]

I have a problem using Weather Font from here: https://erikflowers.github.io/weather-icons/ as a custom font. Right side (and sometimes left too) of the icons gets cut.

(json & ttf files) font.zip

Do you have any idea why it's happening?

My code (simplified): WeatherIcon.js

import { createIconSet } from 'react-native-vector-icons';
import glyphMap from '@assets/fonts-config/WeatherIconsGlyphMap.json';

const iconSet = createIconSet(glyphMap, 'weather-font', 'weather-font.ttf');
export default iconSet;

Temperature.js

export default class Temperature extends Component {
  render() {
      return (
        <View style={styles.temperatureContainer}>
          <WeatherIcon name="wi-thermometer" size={30} color="#0B7DCC"/>
        </View>
      )
    }
}

--------------

temperatureContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    flex: 1,
  },

[kidequinox]

Same issue, for now solving issue using space after it <Text>WELCOME TO MYAPP{' '}</Text>

Tested with ttf font on android.

[mtt87]

I have a similar issue with custom icons with a circle for example it's cut at the bottom

It's more obvious when the size is small

[mayconmesquita]

i have the same problem here