How can I change icon width-height on react native? - react-native

Question

I've created SVG component for all svg's. I just want to change width height with props but I couldn't figure out. I'm using icons like this now <SVGCustomIcon name="InboxMenu" />. how can I also add width height props?
custom SVG component
const icons: SVGCustomIconMap = {
InboxMenu: (
<Svg width={18} height={20} viewBox="0 0 18 20" fill="none">
<Path
d="M11.25 17.5c0 .629-.262 1.3-.73 1.77-.47.468-1.141.73-1.77.73a2.5 2.5 0 01-1.77-.73 2.563 2.563 0 01-.73-1.77h5z"
fill="#949494"
/>
.....
),
ProfileMenu: (
<Svg width={20} height={22} viewBox="0 0 20 22" fill="none">
......
),
};
const SVGCustomIcon = ({ name }: SVGCustomIconProps) => {
return <>{icons[name] ? icons[name] : null}</>;
};
export default SVGCustomIcon;
type.ts
export type SVGCustomIcon = React.SVGProps<SVGSVGElement>;
export interface SVGCustomIconMap {
[key: string]: SVGCustomIcon;
}
export interface SVGCustomIconProps {
name: string;
}

Answer 1

you can try this,
export interface SVGCustomIconMap {
[key: string]: any;
}
export interface SVGCustomIconProps {
name: string;
width?: number;
height?: number;
}
export type TSize = {
width?: number;
height?: number;
};
const icons: SVGCustomIconMap = {
InboxMenu: ({ width, height }: TSize) => {
return (
<>
<Svg
width={width || 18}
height={height || 20}
viewBox="0 0 18 20"
fill="none">
{/* .... your rest code .... */}
</>
);
},
ProfileMenu: ({ width, height }: TSize) => {
return (
<>
<Svg
width={width || 20}
height={height || 22}
viewBox="0 0 20 22"
fill="none">
{/* ...... your rest code ....... */}
</>
);
},
};
const SVGCustomIcon = ({ name, width, height }: SVGCustomIconProps) => {
const SvgCustom = icons?.[name] ? icons[name] : null;
if (!SvgCustom) {
return null;
}
return <SvgCustom width={width} height={height} />;
};
export default SVGCustomIcon;
//how to call
<SVGCustomIcon name="InboxMenu" width={20} height={22} />;

Answer 2

I would try adding a `preserveAspectRatio="none" to your svg component. I don't work in React Native a lot but I vaguely remember this issue.
ProfileMenu: (
<Svg width={20} height={22} viewBox="0 0 20 22" fill="none" preserveAspectRatio="none">
)

Answer 3

To change the width and height of an SVG icon in a React Native application, you can use the style prop of the Svg component.
Here is an example of how you can set the width and height of an SVG icon to 50 pixels:
Copy code
import { Svg } from 'react-native-svg';
function MyIcon() {
return (
<Svg width={50} height={50}>
{/* Icon content goes here */}
</Svg>
);
}
You can also use the style prop to set the width and height using a style object:
Copy code
import { Svg } from 'react-native-svg';
function MyIcon() {
return (
<Svg style={{ width: 50, height: 50 }}>
{/* Icon content goes here */}
</Svg>
);
}
Keep in mind that the width and height of the Svg component will determine the size of the entire icon, including any elements inside it. You may need to adjust the size of the individual elements within the icon as well to achieve the desired appearance.