v5 - icon size

💬 Question

UI Kitten and Eva version

"@eva-design/eva": "^2.0.0-alpha.1",
"@ui-kitten/components": "^5.0.0-alpha.1",

Hi, I’m trying change the size of an icon on the Button element.

<Button style={styles.loginBtn} accessoryLeft={iconFacebook} ></Button>

const iconFacebook = (props: IconProps) => ( <Icon {...props} name="facebook"></Icon> );

How can I pass the height and width to the icon? Which type is the props parameter?

Btw, I love UI kitten, thank you for your awesome package.

[artyorsh]

@arthurliebhardt When there is a need to modify the existing props, keep in mind that you should also keep the initial stylings provided by the library.

// 1. Notice we have the props here. Provided by Eva and UI Kitten
// 2. In case of using `@ui-kitten/eva-icons` the icon you render is react-native-svg element,
//    so, to change the color you should use `fill` property
// 3. To extend or modify the initial stylings, we may use arrays.
const StarIcon = (props) => (
  <Icon {...props} style={[props.style, { width: 32, height: 32 }]} fill='red' name='star' />
);

<Button accessoryLeft={StarIcon} />

I suggest reading the official docs on styling for reference.

[arthurliebhardt]

@artyorsh ok, sorry didn’t know that. Thank you 😃 .