fix(BottomNavigation): Fixed icon styles

Author: artalat

src/components/BottomNavigation/__stories__/BottomNavigation.stories.tsx

@@ -23,15 +23,15 @@ stories
 	<BottomNavigation value={1} onChange={(_e, i) => console.log(`Clicked tab ${i}`)} >
 		<BottomNavigationAction
 			label="Item One"
-			icon={{ type: 'image', size: 20, source: { uri: 'https://placeimg.com/100/100/any' } }}
+			icon={{ type: 'icon', name: 'star' }}
 		/>
 		<BottomNavigationAction
 			label="Item Two"
-			icon={{ type: 'image', size: 20, source: { uri: 'https://placeimg.com/100/100/any' } }}
+			icon={{ type: 'icon', name: 'favorite' }}
 		/>
 		<BottomNavigationAction
 			label="Item Three"
-			icon={{ type: 'image', size: 20, source: { uri: 'https://placeimg.com/100/100/any' } }}
+			icon={{ type: 'icon', name: 'help' }}
 		/>
 	</BottomNavigation>
 ))

src/components/BottomNavigationAction/BottomNavigationAction.tsx

@@ -4,7 +4,25 @@ import React from 'react';
 import { componentMapper } from '@bluebase/component-mapper';
 
 export const BottomNavigationAction = componentMapper<BottomNavigationActionProps>(MuiBottomNavigationAction, {
-	icon: ({ icon }) => icon ? React.createElement(DynamicIcon, icon) : undefined
+	icon: ({ icon }) => {
+
+		if (!icon) {
+			return;
+		}
+
+		const size = icon.size || 24;
+
+		const props = {
+			size,
+			style: {
+				lineHeight: size,
+				...icon.style,
+			},
+			...icon,
+		};
+
+		return React.createElement(DynamicIcon, props);
+	}
 }, {
 	rest: true
 });