如何在 Next.js 中使用 React-icons 添加指向另一个网站的链接

Question

如何添加链接到我的反应图标。我想将 LinkedIn 按钮链接到我的链接，并为邮件图标提供 mailto 选项。

我正在使用 Next.js 和 TailwindCSS 来创建我的应用程序。

这是我的代码片段。

<div className="text-5xl flex justify-center gap-16 py-3 text-gray-600 dark:text-gray-50">
    <AiFillLinkedin href="https://www.google.com/"/>
    <AiFillMail href="mailto:[email protected]"/>
           
 </div>

Answer 1

您是否尝试过将其包装在

a

标签中？

<div className="text-5xl flex justify-center gap-16 py-3 text-gray-600 dark:text-gray-50">
    <a href="https://www.google.com/"><AiFillLinkedin /></a>
    <a href="mailto:[email protected]"><AiFillMail /></a>
 </div>

Answer 2

在 Next.js 中，添加带有图标的外部网站链接的正确方法是使用

<Link>

组件进行导航。

<a>

标签属性（例如

className

或

target="_blank"

）可以添加为 props，并将传递给底层

<a>

元素。

import Link from "next/link";

<Link href="https://www.google.com" target="_blank">
  <SiGmail />
 </Link>