我目前正在做一个nextjs项目，下载了svg sprites，也用svgr/webpack配置了nextjs，当使用Normal作为areact组件时，图标会显示出来，但我想用svg sprite使用use标签来使用它，下面是代码

import React from 'react'
import styles from "./Navbar.module.scss"
import logo from "../../../public/images/logo.png"
import Upload from "../../../public/icons/upload.svg";
import ChevronDown from "../../../public/icons/chevron-down.svg"
import Icons from "../../../public/icons/symbol-defs.svg"
import Image from 'next/image'
import Link from 'next/link'

const Navbar = () => {
    return (
        <nav className={styles.navbar}>
            <div className={styles.navbar__left}>
                <div className={styles.navbar__logoContainer}>
                    <Image src={logo} alt="logo" className={styles.navbar__logo} objectFit='cover' />
                </div>
            </div>
            <div className={styles.navbar__right}>
                <Link href="/">
                    <a className={styles.explore__text}>
                        Explore
                        <svg className="explore__icon">
                            <use xlinkHref={`${Icons}#icon-chevron-down`}></use>
                        </svg>
                    </a>
                </Link>
                <Link href="/">
                    <a className={styles.btn__text}>
                        Sign In
                    </a>
                </Link>
                <Link href="/">
                    <a className={styles.btn__text}>
                        Sign Up
                    </a>
                </Link>
                <Link href="/">
                    <a className={styles.btn__text}>
                        Upload
                    </a>
                </Link>
            </div>

        </nav>
    )
}

export default Navbar

在使用精灵的图标不显示，但我也没有得到任何错误