reactjsreact-nativesvgreact-native-svg

React Native SVG - Setting SVG width and height cause the icon to be cut off

I have an SVG component, and I am trying to pass in width and height props in order to scale all my icons to the same size depending on the display.

import React from "react";
import Svg, { G, Path } from "react-native-svg";

const GearIcon = props => {

  const {color = '#2672C9', height = 46, width = 46} = props;

  return (
    <Svg width={height} height={width}>
      <G fill="none" fillRule="evenodd">
        <Path
          d="M24.97 0h-4.84a3.423 3.423 0 0 0-3.419 3.419V5.36a17.93 17.93 0 0 0-2.39 1.013l-2.14-2.14a3.396 3.396 0 0 0-2.418-1.001c-.913 0-1.772.355-2.417 1L3.923 7.657a3.4 3.4 0 0 0-1.001 2.418 3.4 3.4 0 0 0 1 2.417l2.246 2.246c-.37.779-.684 1.585-.94 2.415h-1.81A3.422 3.422 0 0 0 0 20.569v4.841a3.422 3.422 0 0 0 3.418 3.418h2.11c.282.767.617 1.514 1.002 2.236L5.114 32.48a3.422 3.422 0 0 0 0 4.834l3.422 3.423a3.396 3.396 0 0 0 2.417 1c.914 0 1.771-.355 2.418-1l1.672-1.674c.686.312 1.39.58 2.108.803v2.254a3.423 3.423 0 0 0 3.419 3.419h4.84a3.422 3.422 0 0 0 3.418-3.419v-2.54a17.64 17.64 0 0 0 1.95-.857l1.702 1.703a3.397 3.397 0 0 0 2.418 1c.913 0 1.772-.355 2.417-1l3.423-3.423a3.4 3.4 0 0 0 1.001-2.417 3.4 3.4 0 0 0-1-2.417l-1.804-1.804c.305-.64.573-1.301.8-1.978h2.387a3.422 3.422 0 0 0 3.418-3.417V20.13a3.422 3.422 0 0 0-3.418-3.418h-2.388a17.944 17.944 0 0 0-.862-2.099l1.554-1.554a3.422 3.422 0 0 0 0-4.834l-3.422-3.423a3.398 3.398 0 0 0-2.417-1c-.914 0-1.772.355-2.418 1l-1.506 1.506a17.68 17.68 0 0 0-2.274-.949v-1.94A3.423 3.423 0 0 0 24.97 0m0 2.76c.365 0 .659.294.659.659v3.96c0 .03-.014.056-.017.085a15.314 15.314 0 0 1 5.56 2.334.654.654 0 0 1 .148-.244l2.802-2.8a.66.66 0 0 1 .93 0l3.423 3.423a.66.66 0 0 1 0 .931l-2.8 2.8a.647.647 0 0 1-.288.159 15.275 15.275 0 0 1 2.282 5.637.649.649 0 0 1 .492-.232h3.96c.364 0 .659.294.659.658v4.84a.658.658 0 0 1-.658.658h-3.96a.647.647 0 0 1-.493-.232 15.31 15.31 0 0 1-2.366 5.775.674.674 0 0 1 .224-.04c.166 0 .331.063.458.19l2.8 2.8a.659.659 0 0 1 0 .932l-3.421 3.421a.656.656 0 0 1-.932 0l-2.8-2.8a.642.642 0 0 1-.168-.59 15.287 15.287 0 0 1-5.72 2.522.648.648 0 0 1 .324.555v3.96a.658.658 0 0 1-.658.659h-4.84a.658.658 0 0 1-.659-.659v-3.96a.65.65 0 0 1 .172-.435A15.261 15.261 0 0 1 14.4 35.59a.643.643 0 0 1-.18.396l-2.8 2.8a.66.66 0 0 1-.931 0l-3.423-3.423a.66.66 0 0 1 0-.931l2.8-2.8a.653.653 0 0 1 .186-.123 15.307 15.307 0 0 1-2.483-5.479c-.061.019-.122.038-.189.038h-3.96a.658.658 0 0 1-.66-.658v-4.84c0-.364.296-.658.66-.658h3.96c.007 0 .014.003.02.003a15.28 15.28 0 0 1 2.328-5.872.639.639 0 0 1-.53-.181L5.875 10.54a.659.659 0 0 1 0-.932l3.422-3.422a.652.652 0 0 1 .466-.193c.168 0 .336.063.465.193l3.323 3.322c.12.12.179.276.186.434a15.31 15.31 0 0 1 5.752-2.478c-.004-.029-.018-.054-.018-.085V3.42c0-.365.296-.659.66-.659h4.84"
          fill={color}
        />
        <Path
          d="M28.52 22.54a5.98 5.98 0 1 1-11.96 0 5.98 5.98 0 0 1 11.96 0z"
          stroke={color}
          strokeWidth={3}
        />
      </G>
    </Svg>
  );

};

export default GearIcon;

This when I pass in 41 and 41 as props results in the drawing itself being cut off.

enter image description here

I don't know much about how SVGs work, how do I fix this?

Solution

  • You need to define the viewBox attribute.

    This will define the "frame" for your shape within the svg, relative to your coordinates and will then scale correctly.

    In your case, as the correct sizing for the image is 46 x 46, you can define this in the viewBox - viewBox="0 0 46 46".

    As you currently have no viewBox defined, it will take 100% of the SVG (equivalent to viewBox="0 0 41 41") which is why you see the image is cut off.

     return (
    <Svg width={height} height={width} viewbox="0 0 46 46">
      <G fill="none" fillRule="evenodd">
        <Path
          d="M24.97 0h-4.84a3.423 3.423 0 0 0-3.419 3.419V5.36a17.93 17.93 0 0 0-2.39 1.013l-2.14-2.14a3.396 3.396 0 0 0-2.418-1.001c-.913 0-1.772.355-2.417 1L3.923 7.657a3.4 3.4 0 0 0-1.001 2.418 3.4 3.4 0 0 0 1 2.417l2.246 2.246c-.37.779-.684 1.585-.94 2.415h-1.81A3.422 3.422 0 0 0 0 20.569v4.841a3.422 3.422 0 0 0 3.418 3.418h2.11c.282.767.617 1.514 1.002 2.236L5.114 32.48a3.422 3.422 0 0 0 0 4.834l3.422 3.423a3.396 3.396 0 0 0 2.417 1c.914 0 1.771-.355 2.418-1l1.672-1.674c.686.312 1.39.58 2.108.803v2.254a3.423 3.423 0 0 0 3.419 3.419h4.84a3.422 3.422 0 0 0 3.418-3.419v-2.54a17.64 17.64 0 0 0 1.95-.857l1.702 1.703a3.397 3.397 0 0 0 2.418 1c.913 0 1.772-.355 2.417-1l3.423-3.423a3.4 3.4 0 0 0 1.001-2.417 3.4 3.4 0 0 0-1-2.417l-1.804-1.804c.305-.64.573-1.301.8-1.978h2.387a3.422 3.422 0 0 0 3.418-3.417V20.13a3.422 3.422 0 0 0-3.418-3.418h-2.388a17.944 17.944 0 0 0-.862-2.099l1.554-1.554a3.422 3.422 0 0 0 0-4.834l-3.422-3.423a3.398 3.398 0 0 0-2.417-1c-.914 0-1.772.355-2.418 1l-1.506 1.506a17.68 17.68 0 0 0-2.274-.949v-1.94A3.423 3.423 0 0 0 24.97 0m0 2.76c.365 0 .659.294.659.659v3.96c0 .03-.014.056-.017.085a15.314 15.314 0 0 1 5.56 2.334.654.654 0 0 1 .148-.244l2.802-2.8a.66.66 0 0 1 .93 0l3.423 3.423a.66.66 0 0 1 0 .931l-2.8 2.8a.647.647 0 0 1-.288.159 15.275 15.275 0 0 1 2.282 5.637.649.649 0 0 1 .492-.232h3.96c.364 0 .659.294.659.658v4.84a.658.658 0 0 1-.658.658h-3.96a.647.647 0 0 1-.493-.232 15.31 15.31 0 0 1-2.366 5.775.674.674 0 0 1 .224-.04c.166 0 .331.063.458.19l2.8 2.8a.659.659 0 0 1 0 .932l-3.421 3.421a.656.656 0 0 1-.932 0l-2.8-2.8a.642.642 0 0 1-.168-.59 15.287 15.287 0 0 1-5.72 2.522.648.648 0 0 1 .324.555v3.96a.658.658 0 0 1-.658.659h-4.84a.658.658 0 0 1-.659-.659v-3.96a.65.65 0 0 1 .172-.435A15.261 15.261 0 0 1 14.4 35.59a.643.643 0 0 1-.18.396l-2.8 2.8a.66.66 0 0 1-.931 0l-3.423-3.423a.66.66 0 0 1 0-.931l2.8-2.8a.653.653 0 0 1 .186-.123 15.307 15.307 0 0 1-2.483-5.479c-.061.019-.122.038-.189.038h-3.96a.658.658 0 0 1-.66-.658v-4.84c0-.364.296-.658.66-.658h3.96c.007 0 .014.003.02.003a15.28 15.28 0 0 1 2.328-5.872.639.639 0 0 1-.53-.181L5.875 10.54a.659.659 0 0 1 0-.932l3.422-3.422a.652.652 0 0 1 .466-.193c.168 0 .336.063.465.193l3.323 3.322c.12.12.179.276.186.434a15.31 15.31 0 0 1 5.752-2.478c-.004-.029-.018-.054-.018-.085V3.42c0-.365.296-.659.66-.659h4.84"
          fill={color}
        />
        <Path
          d="M28.52 22.54a5.98 5.98 0 1 1-11.96 0 5.98 5.98 0 0 1 11.96 0z"
          stroke={color}
          strokeWidth={3}
        />
      </G>
    </Svg>
  );

    Depending on which version of react-native-svg you are using, you may need to use viewbox instead of viewBox.

    You can test by running snippet below (using a standard SVG file)

    <svg width="41" height="41" version="1.1" viewBox="0 0 46 46" xmlns="http://www.w3.org/2000/svg">
  <g fill="none" fillRule="evenodd">
    <path
      d="M24.97 0h-4.84a3.423 3.423 0 0 0-3.419 3.419V5.36a17.93 17.93 0 0 0-2.39 1.013l-2.14-2.14a3.396 3.396 0 0 0-2.418-1.001c-.913 0-1.772.355-2.417 1L3.923 7.657a3.4 3.4 0 0 0-1.001 2.418 3.4 3.4 0 0 0 1 2.417l2.246 2.246c-.37.779-.684 1.585-.94 2.415h-1.81A3.422 3.422 0 0 0 0 20.569v4.841a3.422 3.422 0 0 0 3.418 3.418h2.11c.282.767.617 1.514 1.002 2.236L5.114 32.48a3.422 3.422 0 0 0 0 4.834l3.422 3.423a3.396 3.396 0 0 0 2.417 1c.914 0 1.771-.355 2.418-1l1.672-1.674c.686.312 1.39.58 2.108.803v2.254a3.423 3.423 0 0 0 3.419 3.419h4.84a3.422 3.422 0 0 0 3.418-3.419v-2.54a17.64 17.64 0 0 0 1.95-.857l1.702 1.703a3.397 3.397 0 0 0 2.418 1c.913 0 1.772-.355 2.417-1l3.423-3.423a3.4 3.4 0 0 0 1.001-2.417 3.4 3.4 0 0 0-1-2.417l-1.804-1.804c.305-.64.573-1.301.8-1.978h2.387a3.422 3.422 0 0 0 3.418-3.417V20.13a3.422 3.422 0 0 0-3.418-3.418h-2.388a17.944 17.944 0 0 0-.862-2.099l1.554-1.554a3.422 3.422 0 0 0 0-4.834l-3.422-3.423a3.398 3.398 0 0 0-2.417-1c-.914 0-1.772.355-2.418 1l-1.506 1.506a17.68 17.68 0 0 0-2.274-.949v-1.94A3.423 3.423 0 0 0 24.97 0m0 2.76c.365 0 .659.294.659.659v3.96c0 .03-.014.056-.017.085a15.314 15.314 0 0 1 5.56 2.334.654.654 0 0 1 .148-.244l2.802-2.8a.66.66 0 0 1 .93 0l3.423 3.423a.66.66 0 0 1 0 .931l-2.8 2.8a.647.647 0 0 1-.288.159 15.275 15.275 0 0 1 2.282 5.637.649.649 0 0 1 .492-.232h3.96c.364 0 .659.294.659.658v4.84a.658.658 0 0 1-.658.658h-3.96a.647.647 0 0 1-.493-.232 15.31 15.31 0 0 1-2.366 5.775.674.674 0 0 1 .224-.04c.166 0 .331.063.458.19l2.8 2.8a.659.659 0 0 1 0 .932l-3.421 3.421a.656.656 0 0 1-.932 0l-2.8-2.8a.642.642 0 0 1-.168-.59 15.287 15.287 0 0 1-5.72 2.522.648.648 0 0 1 .324.555v3.96a.658.658 0 0 1-.658.659h-4.84a.658.658 0 0 1-.659-.659v-3.96a.65.65 0 0 1 .172-.435A15.261 15.261 0 0 1 14.4 35.59a.643.643 0 0 1-.18.396l-2.8 2.8a.66.66 0 0 1-.931 0l-3.423-3.423a.66.66 0 0 1 0-.931l2.8-2.8a.653.653 0 0 1 .186-.123 15.307 15.307 0 0 1-2.483-5.479c-.061.019-.122.038-.189.038h-3.96a.658.658 0 0 1-.66-.658v-4.84c0-.364.296-.658.66-.658h3.96c.007 0 .014.003.02.003a15.28 15.28 0 0 1 2.328-5.872.639.639 0 0 1-.53-.181L5.875 10.54a.659.659 0 0 1 0-.932l3.422-3.422a.652.652 0 0 1 .466-.193c.168 0 .336.063.465.193l3.323 3.322c.12.12.179.276.186.434a15.31 15.31 0 0 1 5.752-2.478c-.004-.029-.018-.054-.018-.085V3.42c0-.365.296-.659.66-.659h4.84"
      fill="black"
    />
    <path
      d="M28.52 22.54a5.98 5.98 0 1 1-11.96 0 5.98 5.98 0 0 1 11.96 0z"
      stroke="black"
      strokeWidth="3"
    />
  </g>
</svg>

    Here is a useful graphical representation of how viewBox works

    How viewbox works