网上找的不完整，自己调整了一下，方便自己方便他人。

注意！

next.js没有index.html文件，之前vue当中把脚本放在index.html的方法无法用。

但是next.js有layout.tsx文件，我们可以把script脚本放在这里。

在根layout组件中，是用html包裹着children的，把script放在这里，就能引入外部脚本了。

// layout.tsx
import React from "react";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import StyledComponentsRegistry from "../lib/AntdRegistry";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
  title: process.env.NEXT_PUBLIC_APP_NAME || "Next.js Antd Admin",
  description: "萌萌人小说站",
};
const RootLayout = ({ children }: React.PropsWithChildren) => {
  return (
    <>
      <html lang="en">
        <head>
          <script
            defer={true}
            src={"http://at.alicdn.com/t/c/font_4418981_x3vsvfiyp1n.js"}
          />
        </head>
        <body className={inter.className}>
          <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
        </body>
      </html>
    </>
  );
};

export default RootLayout;

import "./svgIcon.mudule.css";

interface IProps {
  iconClass: string;
  svgClass: string;
  fill: string;
}

function SvgIcon(props: IProps) {
  const { iconClass, fill, svgClass } = props;
  return (
    <i aria-hidden="true">
      <svg className={`svg-class ${svgClass}`}>
        <use xlinkHref={"#" + iconClass} fill={fill} />
      </svg>
    </i>
  );
}

export default SvgIcon;


// svgIcon.mudule.css


.svg-class {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

使用：

 
import SvgIcon from "@/components/SvgIcon";
 
<SvgIcon iconClass={'icon-book'} />

nextjs封装svgIcon，使用iconfont

注意！

使用：