Svg Size in React

SVG size in react

Hi I'm not sure how is your webpack configured to resolve modules. But here is solution for your case :

import React, { Component } from 'react';
import logo from './logo.svg'

const SvgIcon = () => (<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none">
  <g transform="translate(0,0)">
    <title>Logo</title>
    <path fill="#009FE3" d="M36.9 707.8H1747V1000H36.9" />
    <path d="M385 104.1h1.7l138.7 503.5h86.3L771.6.1h-90.5L567.7 494.2H566L429.8.1h-89.7L203.9 494.2h-1.7L88.8.1H0l158.3 607.5h86.2m889.6-119.4c-16.2 22.1-35.4 38.8-57.7 50.3-22.3 11.5-47 17.3-74.2 17.3-12 .2-26.4-2.9-43.3-9.2-16.9-6.3-31.9-16.8-45-31.5-13.1-14.7-20-34.7-20.8-59.9.3-31.5 9.5-56.9 27.6-76.1 18.1-19.2 43.6-38.7 76.4-58.3l137 167.4zm-110.9-252.1c-12.5-11.9-25.4-27.4-38.6-46.5-13.2-19.1-20.4-38.8-21.5-59.2-.3-7.2 1.2-15.9 4.5-26.1 3.3-10.2 10.1-19.3 20.3-27.3 10.2-8 25.6-12.1 46.2-12.6 13.5-.6 27.4 3.8 41.8 13.1 14.4 9.3 22.2 27.2 23.4 53.7-1.2 25.6-9.8 46.7-26 63.5-16.1 16.9-32.8 30.7-50.1 41.4zm195.5 240.3c15.5-29 27.2-56.8 35-83.4 7.8-26.6 12.5-50.4 14.1-71.4h-70.2c-3.5 21.2-6.9 38-10 50.2-3.2 12.2-8 27.1-14.5 44.5l-110.8-132c15.5-10 31.5-21.9 48.2-35.8 16.7-13.9 30.9-30.8 42.6-50.8 11.7-20 17.8-44.1 18.3-72.4.3-31.8-10.4-60.3-32.2-85.4-21.8-25.1-56.4-38.3-103.9-39.8-46.7 1.3-82.3 15-106.8 41.3-24.5 26.3-36.8 57.6-37 94-.1 25.2 5.2 47.4 15.7 66.6 10.5 19.2 26.7 41.9 48.6 67.9-54.9 30.5-91.8 60-110.7 88.3-18.9 28.3-27.6 62.6-26.3 102.9-.6 16.6 3.6 37.2 12.6 61.9 9 24.7 26.4 46.7 52.3 66.2 25.8 19.5 63.7 29.8 113.5 30.9 43.6-.5 79-8.2 106.1-23.3 27.1-15 50.7-34.6 70.6-58.8l56.7 69.3h96.4l-108.3-130.9zm70.1-403.7h205.6v534.8h82V72.7H1782V0h-493.2" />
    <path fill="#FFF" d="M343.3 821.9h-24.1L305.3 886h-.3l-13.4-64.1h-23.7L255.4 886h-.4l-13.9-64.1h-24.9l25.1 89.2h24.1l13.9-65h.4l13.9 65h24.1m192.6-89.2h-24.1L472.3 886h-.3l-13.4-64.1H435L422.4 886h-.3l-13.9-64.1h-25.1l25.2 89.2h24.2l13.9-65h.3l13.9 65h24.1m192.7-89.2h-24.1L639.4 886h-.4l-13.5-64.1h-23.6L589.3 886h-.3l-13.9-64.1h-25l25.2 89.2h24.1l13.9-65h.3l13.9 65h24.2m69.3-24.5h25.1V911H721zm109.4 24.5h23.4c3.2-15.3 5.8-27.8 7.8-37.6 2-9.7 3.7-17.7 4.9-23.9 1.3-6.2 2.3-11.8 3.2-16.6.9-4.9 1.7-10.1 2.6-15.7h.3c1 5.6 1.9 11 2.9 16.1.9 5.1 2 10.9 3.3 17.3 1.3 6.5 2.9 14.5 4.9 24.1 2 9.6 4.5 21.7 7.6 36.3h24.1l33.8-120.2h-25.5c-3.9 16.4-7 29.7-9.4 40-2.4 10.3-4.2 18.5-5.5 24.5-1.3 6-2.3 10.7-3 14.2-.7 3.5-1.3 6.5-1.7 9.2h-.3c-.6-3.7-1.3-7.4-2-11-.7-3.6-1.6-8.3-2.7-14-1.2-5.7-2.8-13.5-4.9-23.5-2.1-10-4.9-23.1-8.4-39.4h-26.6c-3.2 15.6-5.7 28.5-7.7 38.6-2 10.1-3.5 18.2-4.7 24.3-1.1 6.1-2 11.1-2.7 14.8-.7 3.8-1.2 7.2-1.7 10.2h-.3c-.5-3.3-1.1-6.7-1.7-10.3-.7-3.6-1.6-8.3-2.9-14.1-1.2-5.9-3-13.8-5.3-23.9-2.3-10.1-5.4-23.3-9.2-39.6h-26.8l34.2 120.2zm246.9-89.2h-23.4v51.4c-.3 7.8-2.3 13.2-6.2 16.1-3.8 2.9-7.8 4.3-11.9 4.2-3.8.2-7.2-.9-10.3-3.1-3.1-2.2-4.7-6.7-4.9-13.4v-55.3h-23.4v58.6c.2 11.3 3 19.6 8.6 24.9 5.5 5.3 12.8 7.9 21.7 7.9 6.2 0 11.6-1.3 16.2-3.9s8.2-6.2 10.9-11h.3v12.5h22.4v-88.9zm111.6-9.9h36.3v-21.3h-97.8V812h36.3v99.1h25.2m69.7-24.5h25.1V911h-25.1zm165.1-95.9h-23.4v42.7h-.3c-1.7-3.1-4.6-6.1-8.6-9.1s-9.7-4.6-17.2-4.8c-6.6 0-12.7 1.7-18.3 5-5.6 3.4-10.1 8.4-13.5 15.2-3.4 6.8-5.1 15.3-5.2 25.6 0 8.3 1.3 16.1 3.8 23.3 2.6 7.2 6.6 13.1 12.2 17.6 5.5 4.5 12.7 6.8 21.5 7 5 .1 9.8-.9 14.4-3s8.4-5.6 11.4-10.5h.3V911h22.9V790.7zm-62.5 76.5c-.1-7.3 1.4-13.6 4.4-18.9 3-5.3 8.2-8.1 15.6-8.4 5.3.1 9.4 1.5 12.4 4.3 2.9 2.8 5 6.3 6.1 10.6 1.1 4.3 1.7 8.9 1.7 13.8.1 6.9-1.5 12.8-4.8 17.8s-8.6 7.6-16 7.9c-5-.2-8.9-1.7-11.7-4.6-2.8-3-4.8-6.5-5.9-10.6-1.3-4.4-1.9-8.2-1.8-11.9zm172.4 17.7c-1 3.2-3 5.6-5.8 7.3-2.8 1.6-5.9 2.5-9.3 2.5-6.2-.1-10.8-1.5-13.7-4.2-2.9-2.6-4.8-5.6-5.7-9-.9-3.4-1.4-6.3-1.5-8.6h61.1v-4.2c-.2-13.4-2.5-23.7-6.9-30.8-4.4-7.1-9.8-12-16.2-14.6s-12.6-3.8-18.7-3.7c-9.7.2-17.4 2-23.1 5.5-5.8 3.5-10 7.9-12.8 13-2.8 5.1-4.7 10.1-5.5 15-.9 4.9-1.3 8.7-1.2 11.6.3 18.1 4.5 30.8 12.8 38.1 8.2 7.3 18.8 10.9 31.6 10.6 5.2.1 10.4-.8 15.6-2.6 5.2-1.8 9.9-4.8 14.1-8.9 4.2-4.2 7.4-9.8 9.5-16.9l-24.3-.1zm-35.3-27.2c.7-5.9 2.5-10.5 5.5-13.8 3-3.3 7.2-5 12.8-5 4-.1 7.8 1.2 11.4 4 3.6 2.8 5.9 7.7 6.7 14.8h-36.4z" />
  </g>
</svg>)

class Logo extends Component {
  render() {
    return (
      <div style={{height:'200px',
      width: '500px'}} className="size">
        <SvgIcon />
      </div>
    );
  }
}

export default Logo

How to change the size of svg icon in React?

I'd suggest you keep constant values for viewbox param and accept props for height and width. Add a default values for these as 30 and 30. Part of code looks like:

const { height, width } = props;
<svg
      width={width}
      height={height}
      viewBox="0 0 30 30"
...

Then you can use any values for width and height when you use the svg component.

unable to resize SVG element

I don't believe you'll be able to override any styling like you're trying. If you look at the docs it may be clear why:

babel-plugin-inline-react-svg

Transforms imports to SVG files into React Components, and optimizes
the SVGs with SVGO.

For example, the following code...

import React from 'react';
import CloseSVG from './close.svg';

const MyComponent = () => <CloseSVG />;

will be transformed into...

import React from 'react';
const CloseSVG = () => <svg>{/* ... */}</svg>;

const MyComponent = () => <CloseSVG />;

const CloseSVG = () => <svg>{/* ... */}</svg>; doesn't allow for passing additional props to the JSX

Suggestion 1

You may be able to create a wrapper the applies CSS styling to nested svg tags.

Example using styled-components:

import styled from "styled-components";

const SvgWrapper = styled.div`
  svg {
    fill: ${({ fill }) => fill};
    height: ${({ height }) => height};
    width: ${({ width }) => width};
  }
`;

<SvgWrapper height="25px" width="25px" fill="pink">
  <SvgIcon />
</SvgWrapper>

Suggestion 2

Import the SVG image as a ReactComponent and apply styling props.

Adding SVGs

import { ReactComponent as SVG } from './icon.svg';

Then to style:

1. Use the style prop

   <SVG
     style={{
       fill: hover ? color : "#fff",
       width: "25px",
       height: "25px"
     }}
   />
   

2. Using SVG props

   <SVG
     fill={hover ? color : "#fff"}
     width={25}
     height={25}
   />
   

How to resize SVG to fill its container?

This is what you needed! It will change based on the previous div style!

svg {
    width: inherit;
    height: inherit;
}

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

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>

Scaling SVG loaded from the web in React Native?

I managed to solve my issue by modifying all the svgs using the following script I cobbled together.

const fs = require("fs");
const path = require("path");

// Get list of icons from the icons directory
const icons = fs.readdirSync(path.join(__dirname, "icons"));

const modifySvg = (filepath) => {
  // Load the SVG file
  let svg = fs.readFileSync(filepath, "utf8");

  // Check if svg has viewbox
  const hasViewBox = svg.includes("viewBox");
  if (!hasViewBox) {
    console.log("No viewBox found");
    // Check if width and height are set
    const hasWidth = svg.includes("width");
    const hasHeight = svg.includes("height");
    if (!hasWidth || !hasHeight) {
      console.log("No width or height found");
    } else {
      console.log("Width and height found");
      console.log("Adding viewBox");

      // Get width property
      const widthStr = svg.match(/width="([^"]*)"/)[0];
      const width = widthStr.replace(/"/g, "").replace("width=", "");
      // Get height property
      const heightStr = svg.match(/height="([^"]*)"/)[0];
      const height = heightStr.replace(/"/g, "").replace("height=", "");
      console.log({ width, height });
      // Add viewBox to end of svg tag
      const viewBox = `viewBox="0 0 ${width} ${height}"`;
      svg = svg.replace(/<svg/, `<svg ${viewBox}`);
      // Make width and height are 100%
      svg = svg.replace(/width="[^"]*"/, `width="100%"`);
      svg = svg.replace(/height="[^"]*"/, `height="100%"`);
      // Write the file
      fs.writeFileSync(filepath, svg);
      console.log(`Saved ${filepath}`);
    }
  }
};

//Loop icons
icons.forEach((icon) => {
  // Get file path
  const filePath = path.join(__dirname, "icons", icon);
  // Modify svg
  modifySvg(filePath);
});

Hope this helps someone!

---

Related Topics