Javascript 如何将SVG导入Next.js组件？

我正在尝试将SVG图像从文件导入Next.js组件

在资产文件夹中，我有google.svg（图标）：

---

为什么我的SVG导入不起作用？

另一种方法是为您的SVG制作一个组件。我喜欢这种方法，因为如果svg需要，我可以很容易地传递宽度、高度、颜色等方面的道具

//GoogleLogo.js
import React from "react";
export default function GoogleLogo() {
  return (
    <svg className="svgIcon-use" width="25" height="37" viewBox="0 0 25 25">
      <g fill="none" fillRule="evenodd">
        <path
          d="M20.66 12.693c0-.603-.054-1.182-.155-1.738H12.5v3.287h4.575a3.91 3.91 0 0 1-1.697 2.566v2.133h2.747c1.608-1.48 2.535-3.65 2.535-6.24z"
          fill="#4285F4"
        />
        <path
          d="M12.5 21c2.295 0 4.22-.76 5.625-2.06l-2.747-2.132c-.76.51-1.734.81-2.878.81-2.214 0-4.088-1.494-4.756-3.503h-2.84v2.202A8.498 8.498 0 0 0 12.5 21z"
          fill="#34A853"
        />
        <path
          d="M7.744 14.115c-.17-.51-.267-1.055-.267-1.615s.097-1.105.267-1.615V8.683h-2.84A8.488 8.488 0 0 0 4 12.5c0 1.372.328 2.67.904 3.817l2.84-2.202z"
          fill="#FBBC05"
        />
        <path
          d="M12.5 7.38c1.248 0 2.368.43 3.25 1.272l2.437-2.438C16.715 4.842 14.79 4 12.5 4a8.497 8.497 0 0 0-7.596 4.683l2.84 2.202c.668-2.01 2.542-3.504 4.756-3.504z"
          fill="#EA4335"
        />
      </g>
    </svg>
  );
}

//GoogleLogo.js
从“React”导入React；
导出默认函数GoogleLogo（）{
返回(
);
}

在你上面的档案里

  import GoogleLogo from "./GoogleLogo";

  class Login extends React.Component {
    render() {
      return (
        <LoginLayout title="Login Page">
          <div>
            <Link href="/auth/google">
              <a className="button">
                <div>
                  <span className="svgIcon t-popup-svg">
                    <GoogleLogo />
                  </span>

                </div>
              </a>
            </Link>
          </div>
        </LoginLayout>
      );
    }
  }

从“/GoogleLogo”导入GoogleLogo；
类登录扩展了React.Component{
render（）{
返回(
);
}
}

我最近自己添加了这个。我遵循了Next.js repo上的示例

有几个步骤-

1） 您需要安装以下依赖项：

• 巴贝尔插件

2） 在

.babelrc

中，您需要添加插件

babel插件内联反应svg

  "plugins": [
    "inline-react-svg",
  ]

然后，您应该能够将SVG导入到组件中。这是我用过的类似东西的要点

注意-您需要将其声明为自己的组件

，如果您刚刚声明

{GoogleLogo}

，它将出错。还有一个问题是babel如何转换SVG，以便SVG文件中的任何更改都不会出现。您需要重命名该文件，以便bundler看到更改

---

希望这有帮助。

您可以使用svgr将svg转换为组件

您可以使用插件将svg导入转换为react组件

这将允许您执行以下操作：

从“./Icon.svg”导入图标；

为什么要在您的网页配置中排除要使用的svg fodler？这是一个错误，我在复制粘贴代码时没有考虑到这一点。在尝试从internet上进行一些配置后，我发现很容易传递svg图像的位置，到

img

标签或从“下一个/image”导入的

。这是greath解决方案，我也喜欢。但需要在不同的道路上做。需要有google.svg文件，该文件将包含svg部分代码，并以这种方式导入。无法安装“内联反应svg”这在npm注册表中不存在。我认为不需要

svg内联反应

，它不相关，没有任何包以任何方式相互提及。顺便说一句，gist链接已失效。

//GoogleLogo.js
import React from "react";
export default function GoogleLogo() {
  return (
    <svg className="svgIcon-use" width="25" height="37" viewBox="0 0 25 25">
      <g fill="none" fillRule="evenodd">
        <path
          d="M20.66 12.693c0-.603-.054-1.182-.155-1.738H12.5v3.287h4.575a3.91 3.91 0 0 1-1.697 2.566v2.133h2.747c1.608-1.48 2.535-3.65 2.535-6.24z"
          fill="#4285F4"
        />
        <path
          d="M12.5 21c2.295 0 4.22-.76 5.625-2.06l-2.747-2.132c-.76.51-1.734.81-2.878.81-2.214 0-4.088-1.494-4.756-3.503h-2.84v2.202A8.498 8.498 0 0 0 12.5 21z"
          fill="#34A853"
        />
        <path
          d="M7.744 14.115c-.17-.51-.267-1.055-.267-1.615s.097-1.105.267-1.615V8.683h-2.84A8.488 8.488 0 0 0 4 12.5c0 1.372.328 2.67.904 3.817l2.84-2.202z"
          fill="#FBBC05"
        />
        <path
          d="M12.5 7.38c1.248 0 2.368.43 3.25 1.272l2.437-2.438C16.715 4.842 14.79 4 12.5 4a8.497 8.497 0 0 0-7.596 4.683l2.84 2.202c.668-2.01 2.542-3.504 4.756-3.504z"
          fill="#EA4335"
        />
      </g>
    </svg>
  );
}

  import GoogleLogo from "./GoogleLogo";

  class Login extends React.Component {
    render() {
      return (
        <LoginLayout title="Login Page">
          <div>
            <Link href="/auth/google">
              <a className="button">
                <div>
                  <span className="svgIcon t-popup-svg">
                    <GoogleLogo />
                  </span>

                </div>
              </a>
            </Link>
          </div>
        </LoginLayout>
      );
    }
  }

  "plugins": [
    "inline-react-svg",
  ]