Next.js项目封装使用iconfont的svg图标最近在研究Next.js中使用Svg的方法，网上找了一些方法都不太

最近在研究Next.js中使用Svg的方法，网上找了一些方法都不太完整，自己调整了一下，方便其他同学使用过。

选图标

首先在iconfont上创建项目，选择自己喜欢的图标加入到项目中，并将文件下载下来。

打开文件夹中demo_index.html 如下截图:

引入一个图标需要分为下面三个步骤。

下面我们对svg图标进行封装

封装与使用

在项目中引入iconfont.js 将下载的js文件放在项目public目录下

import Head from 'next/head'
import { CMS_NAME } from '@/libs/constants'
import getBaiduAnalyticsTag from '@/libs/baiduAnalysis'

function SiteHeader() {
  return <>
    <Head>
      <title key="title">{`${CMS_NAME} - 首页`}</title>

      <meta name="viewport"
        content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />

      <link rel="icon" href="/favicon.ico" />
      <meta name="keywords" content="新编程网,新编程学习网,大熊学习,newcoder,新手学习网,编程网,面试题,前端学习,计算机网络,JavaScript,面试,Docker,GoLand"></meta>
      <meta key="description" name="description" content="专注学习编程领域，新手编程学习，以及前后端面试题，编程课程系统学习与介绍，以及好玩实用的互联网编程经验！" />
      <meta property="og:type" content="webpage" />
      <meta property="og:url" content="https://new-coder.com/" />
      <meta property="og:site_name" content="新编程网" />
      <meta property="og:title" content="新编程网 - 专注学习编程领域！面试经验分享! 系列课程学习!" />
      <meta property="og:image" content="https://new-coder.com/netdisk/web-logo.20230408_222537.png" />
      <meta key="og:description" property="og:description"
        content="注学习编程领域，新手编程学习，以及前后端面试题，编程课程系统学习与介绍，以及好玩实用的互联网编程经验！" />
    </Head>
    {/* 这里是引入文件位置 */}
    <script defer={true} type="text/javascript" dangerouslySetInnerHTML={getBaiduAnalyticsTag()} />
    <script
      defer={true}
      src={"js/iconfont.js"}
    />
  </>
}

export default SiteHeader

引入样式

创建样式表

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

在_app.tsx文件中引入iconfont的样式, 这里是全局引入的

import '@/styles/svgIcon.css'

封装组件

创建组件 SvgIcon.tsx, 并写入如下内容:


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 
    svgClass={''} 
    iconClass={'icon-huodong-shouyehuodong-shouye'} 
    fill={""}>
</SvgIcon>

svgClass 为svg添加额外的样式
iconClass 下载的图标名称
fill svg填充颜色