Шрифты Потрясающие иконки не появляются в DOM - PullRequest
Новая
       18

Шрифты Потрясающие иконки не появляются в DOM

0 голосов
/ 25 июня 2019

Когда я отправляю строку значков с помощью реквизита, некоторые значки не отображаются.console warning

В моей БД у меня есть такие значки, как строка STRING type DB with icon strings Значки, такие как выпускной колпачок или глаз, обычно отображаются на странице, но другие значки делаютне.

const CourseIcon = ({
courseType: { type, prefix, custom, faIcon, icon },
className,

...rest
}) => {
return custom ? (
 <img
   src={require(`../../img/course-icons/${icon}.png`)}
   className={classnames('course-icon', className)}
   title={type}
   alt={type}
 />
) : (
 <FontAwesomeIcon
   className={classnames('course-icon', className)}
   title={type}
   icon={faIcon}
   {...rest}
 />
);
};

CourseIcon.propTypes = {
courseType: PropTypes.object.isRequired,
};

export default CourseIcon;

Вот код.Когда я использую console.log на courseType все определяется.

Ответы [ 2 ]

1 голос
/ 25 июня 2019

Новый font-awesome разделен на стили значков на несколько пакетов.После того, как вы установили нужные вам элементы и правильно импортировали значки из них в проект, вам также нужно определить источник стиля при использовании значка с FontAwesomeIcon.

Например:

определение импорта и библиотеки: 

// Notice that this icon comes from the regular style package.
import { faKeyboard } from '@fortawesome/free-regular-svg-icons';
import { library } from '@fortawesome/fontawesome-svg-core';

library.add(faKeyboard);

Затем внутри вашего компонента: 

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

// ... other code parts

const YourComponent = () => {
  return (
    // The first element of the icon array will define your icon style
    // far = font awesome regular (obviously)
    // The rest of it will define the icon itself
    <FontAwesomeIcon icon={['far', 'keyboard']} />
  );
};
0 голосов
/ 26 июня 2019

пример для компонента экспорта изображения по умолчанию 

import from const similar example
 const render_example =  
({
courseType: { type, prefix, custom, faIcon, icon },
className,

...rest
}) => and concat your render with this const if is neccesary

import React from 'react';
import './styles/styles.css';
import Logo from '../images/logo.svg';

class ClassName extends React.Component {
render() {
  return (
    <div className="class">
     <div className="_header">
      <img src={Logo} alt="Logo de la conferencia" />
       </div>
        <div className="section-name__class">
         <Gravatar className="image_avatar" email={this.props.email} />
          <h1>
          {this.props.firstname} <br /> {this.props.only__name}
          </h1>
        </div>
      </div>
    );
  }
}

export default image;
...