找不到图标{前缀: 'fab', iconName: 'spotify'}

Question

我试图在页脚上显示一些图标，但它没有显示。向我抛出以下错误

找不到图标{前缀: 'fab', iconName: 'spotify'}

主要代码：

const Footer = () => {
return (
    <div className='bg-primary'>
        <FontAwesomeIcon icon="fa-brands fa-facebook" />
        <FontAwesomeIcon icon="fa-brands fa-youtube" />
        <FontAwesomeIcon icon="fa-brands fa-spotify" />
    </div>
);

};

Answer 1

有几种方法可以解决此问题，但主要在文档中说明。我假设您已经完成设置以使用包中的 FontAwesome 图标。从您尝试执行的代码来看，您似乎想在全局范围内使用该图标。但是，我发现如果像这样单独导入它会更容易：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

const Footer = () => {
return (
    <div className='bg-primary'>
       <FontAwesomeIcon icon={faCoffee} />
    </div>
);

再次强调，这是我的偏好，因为我发现它更容易，如果您希望全局添加它，请尝试首先将其添加到文档中所述的

library

。

import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { faTwitter, faFontAwesome } from '@fortawesome/free-brands-svg-icons'

library.add(fas, faTwitter, faFontAwesome)

const Footer = () => {
return (
    <div className='bg-primary'>
       <FontAwesomeIcon icon="fa-solid fa-twitter" />
    </div>
);

Answer 2

对于品牌图标，您只需要安装 @fortawesome/free-brands-svg-icons 然后：

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faFacebookF, faYoutube, faSpotify} from '@fortawesome/free-brands-svg-icons'

const Footer = () => {
return (
    <div className='bg-primary'>
        <FontAwesomeIcon icon={faFacebook} />
        <FontAwesomeIcon icon={faYoutube} />
        <FontAwesomeIcon icon={faSpotify} />
    </div>
);