如何调整 SVG 大小、调整其宽度和高度以及调整背景大小，我只想显示文本

Question

我想使用 SVG 作为我网站的徽标

我尝试通过修改其宽度和高度来调整它的大小，但它不起作用，因为它调整了整个图像的大小。

我还尝试了这些解决方案在 HTML 中调整 SVG 大小？、如何调整 svg 大小？、如何制作可拉伸而不是平铺的 SVG 背景？

这就是我想要的

import React from 'react';
import "./Header.css";
import IconSvg from "../../../assests/logo.svg";
// import SvgImage from "../../../utils/logo";
import {NavLink} from 'react-router-dom';

export default function Header() {
  return (
    <div className="header">
      <div className="header-img">
        {/* <img src={IconSvg} alt="icon"/> */}
        {/* <SvgImage/> */}
      </div>
      <div className="header-controlls">
        <div className="header-controlls-controll">
          <NavLink className={"link"} to="/"> Home </NavLink>
        </div>
        <div className="header-controlls-controll">
          <NavLink className={"link"} to="/About">About </NavLink>
        </div>
        <div className="header-controlls-controll">
          <NavLink className={"link"} to="/Orders">Orders </NavLink>
        </div>
        <div className="header-controlls-controll">
          <NavLink className={"link"} to="/Cart">Cart </NavLink>
        </div>
      </div>
    </div>
  )
}

我尝试直接通过React组件导入svg，但它们都不起作用，并且重新压缩图像会减少整个图像，这对我来说没有好处，我尝试设置preserveAspectRatio，viewBoxheight，width，但它们都没有按照我的需要工作

提前致谢

Answer 1

尝试将 SVG 作为 React 组件导入：

import { ReactComponent as Arrow } from "./assets/arrow.svg";

<Arrow width={50} height={50} />