¿Cómo cambiar el tamaño de SVG para llenar su contenedor en ReactJS?

Podemos cambiar el tamaño de SVG para llenar su contenedor en ReactJS usando los accesorios de tipo. Podemos agregar el siguiente estilo al SVG

Sintaxis CSS:

svg {
 width: inherit;
 height: inherit;
}

Sintaxis de reacción:

<svg style = {{ width: "inherit", height:"inherit"}}
// Child elements
</svg>

Creando la aplicación React:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, acceda a ella con el siguiente comando:

cd foldername

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

App.js: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import { React, Component } from "react";
  
class App extends Component {
  
  render() {
    return (
      <>
        <div style={{ backgroundColor: "#ddd", height: 200 }}>
          <MySvg width="20%" />
        </div>
        <br />
        <div style={{ backgroundColor: "#ddd", height: 300, width: 200 }}>
          <MySvg width="80%" />
        </div>
      </>
    );
  }
  
}
  
const MySvg = (props) => {
  return (
    // With Styling
    <svg style={{ width: "inherit", height: "inherit" }}
      version="1.1"
      viewBox="0 0 31.921 36.45"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <g transform="translate(-20.655 -17.456)">
        <path
          d="m51.254 44.131-14.638 8.451-14.638-8.451v-16.902l14.638-8.451 
            14.638 8.451z"
          fill="none"
          stroke="#fb00ff"
          stroke-linejoin="round"
          stroke-width="2.6458"
        />
      </g>
    </svg>
  );
}
  
export default App

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Producción: 

• Antes de aplicar los accesorios de estilo, el siguiente será el resultado:
• Después de aplicar accesorios de estilo, el siguiente será el resultado: