如何在Nextjs中使用svg精灵（使用use标签）

Question

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

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

使用精灵后，图标不会显示，但我也没有收到任何错误

Answer 1

尝试将 use 标签替换为

<use href="/icons/symbol-defs.svg#icon-chevron-down"></use>

。使用

public

文件夹内的直接路径，不要使用导入的文件

致谢 - 来自 @ja 的评论