next.js 中iconfont Symbol 加载svg优化

next.js 中iconfont Symbol 加载svg优化。

按照常规方法加载iconfont Symbol （例如：https://blog.csdn.net/qq_41211900/article/details/108443521）

页面会生成这样：

<svg class="icon " aria-hidden="true"><use xlink:href="#icon-mobile">
<svg id="icon-mobile" viewBox="0 0 1024 1024"><path d="M768 64a64 64 0 0 1 64 64v768a64 64 0 0 1-64 64H256a64 64 0 0 1-64-64V128a64 64 0 0 1 64-64h512z m-32 64H288a32 32 0 0 0-32 32v704a32 32 0 0 0 32 32h448a32 32 0 0 0 32-32V160a32 32 0 0 0-32-32z m-223.488 608a48 48 0 1 1 0 96 48 48 0 0 1 0-96z" "#000000"=""></path></svg>
</use></svg>

（图1的代码插入在页面内容最前面，使用icon位置代码如图2）

  经过调试将svg代码进行整改成如下,svg能正常在web端展示，并且可以通过class选个器更换颜色和字号：

<svg class="icon" id="icon-mobile" viewBox="0 0 1024 1024">
<path d="M768 64a64 64 0 0 1 64 64v768a64 64 0 0 1-64 64H256a64 64 0 0 1-64-64V128a64 64 0 0 1 64-64h512z m-32 64H288a32 32 0 0 0-32 32v704a32 32 0 0 0 32 32h448a32 32 0 0 0 32-32V160a32 32 0 0 0-32-32z m-223.488 608a48 48 0 1 1 0 96 48 48 0 0 1 0-96z" "#000000"=""></path>
</svg>

制作next.js组件如下：

1.下载iconfont字体图标包，找到iconfont.js

2.iconfont.js中只要<svg>...</svg>中间的内容，其他都不要，进行导出即可，如下图：

3.icon.js组件：

import React, { useState, useEffect, useRef, memo, useCallback } from 'react'
function Getsvg({ className, addclass, style }) {
    const svgXML = useRef(null)
    console.log(className, addclass, style)
    useEffect(() => {
        const iconfont = require('../public/js/iconfont');
        console.log("iconfont", iconfont)
        if (iconfont) {
            var parser = new DOMParser();
            var resXML = parser.parseFromString(iconfont, 'text/xml');
            var zeroXML = resXML.querySelector("#" + className);
            if (zeroXML && svgXML.current) {
                svgXML.current.innerHTML = zeroXML.innerHTML
                svgXML.current.setAttribute("id", zeroXML.getAttribute("id"))
                svgXML.current.setAttribute("viewBox", zeroXML.getAttribute("viewBox"))
            }
        }
    }, [])

    return (
        <svg className={`icon ${addclass && addclass != undefined ? addclass : ''}`} ref={svgXML}>
        </svg>
    )
}

export default Getsvg

4.页面引用：

//page
import Icon from '../components/icon'
function home(){
    return (
       <Icon className="icon-Settings"></Icon>
    )
}

export default home

效果如下：

如此就改完了，这样可以解决常规方法等页面生成后再处理svg延时加载慢的问题，并且去掉很多冗余代码。