如何在Nextjs中使用svg sprite(使用use标签)

wsewodh2  于 2023-10-18  发布在  其他
关注(0)|答案(1)|浏览(126)

我目前正在做一个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

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

zpjtge22

zpjtge221#

尝试将use标记替换为<use href="/icons/symbol-defs.svg#icon-chevron-down"></use>。使用public文件夹内的直接路径,不要使用导入的文件
credits -来自juliomalves的评论

相关问题