我目前正在做一个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
在使用精灵的图标不显示,但我也没有得到任何错误
1条答案
按热度按时间zpjtge221#
尝试将use标记替换为
<use href="/icons/symbol-defs.svg#icon-chevron-down"></use>
。使用public
文件夹内的直接路径,不要使用导入的文件credits -来自juliomalves的评论