Проблема с шрифтом удивительным и реагировать Мао - PullRequest
0 голосов
/ 28 октября 2019

Я пытаюсь заставить функцию работать, возвращая список с различными элементами. Но это у меня проблемы с иконками. Есть идеи? Если я изменю его на 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;

1 Ответ

0 голосов
/ 28 октября 2019

Вы используете строку "faHome" вместо импорта faHome ... удалите кавычки и попробуйте еще раз.

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

Вот ссылка на пример рабочих кодов и коробки, слегка упрощенная. https://codesandbox.io/s/7r4ed

...