Question 33569 in React native Question posted in
The official React Native documentation can be found here.

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

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

3

Answers


  1. 0

    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">
    )
    Login or Signup to reply.
  2. 0 
    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.
    Login or Signup to reply.
  3. 0

    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} />;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search