字体真棒的麻烦和反应毛

Question

我正在尝试让函数正常工作，返回一个包含各种元素的列表。但是我在使用图标时遇到了麻烦。有任何想法吗？如果我在函数中将它更改为 faHome，我会得到图标，但我无法让它在列表中工作。

import React from 'react';
import styles from './sideNav.module.css';
import { Link } from 'react-router-dom';

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



const SideNavItems = () => {
    const items = [
        {
           type: styles.option,
           icon: "faHome",
           text: 'Homes',
           link: '/'
        },
        {
           type: styles.option,
           icon: 'faHome',
           text: 'News',
           link: '/news'
        }
    ];
    const showItems = () => {
        return items.map ( (item,i) => {
            return (
                <div key={i} className={item.type}>
                    <Link to={item.link}>
                    <FontAwesomeIcon icon={item.icon}
                    style={{color:'#ffffff', cursor: 'pointer', marginRight:'10'}}/>
                    {item.text}
                    </Link>
                </div>
            )
        } )         
    }
    return (
        <div>
            {showItems()}
        </div>
    )
}   
export default SideNavItems;

Answer 1

您正在使用字符串 "faHome" 而不是 import faHome...删除引号并重试。

{
    type: styles.option,
    icon: faHome, // this is a reference
    text: 'Homes',
    link: '/'
},

这里是一个 link 的工作 codesandbox 示例，稍微简化了。 https://codesandbox.io/s/7r4ed

字体真棒的麻烦和反应毛

Trouble with font awesome and react mao

font-awesome

reactjs