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

Issue

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;
}

Solution

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} />;

Answered By - Handi
Answer Checked By - - Cary Denson (ReactFix Admin)