Использование Font Awesome Icon с Reaction-Select v2?

Question

Использование: https://react -select.com / home Я пробовал варианты следующей идеи:

 const hex = 'f2bc';
 const char = unescape('%u' + hex);
 <Select
   defaultValue={ label: char, value: 'some-value'}
   ...={...}/>

редактирование: Это результат вышеуказанной попытки: Значок шрифта не найден

Answer 1

Для отображения значков вместо текста вы можете сделать так:

const options = [
      { value: "text", label: <FontAwesomeIcon icon={faFileAlt} /> },
      { value: "image", label: <FontAwesomeIcon icon={faFileImage} /> },
      { value: "video", label: <FontAwesomeIcon icon={faFileVideo} /> }
];

<Select  placeholder="Text"  options={options} />

Answer 2

Создание пользовательского компонента и использование метки работало для меня:

const DropdownRow = ({ label }) => (
  <Div style={{ height: '100%', display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
    <MyIcon size={24} color="white" />
    <div style={{ marginLeft: '10px' }}>
      {label}
    </div>
  </Div>
);

В опциях:

options={OPTIONS.map(({ value, label }) => ({
          value,
          label: <DropdownRow label={label} />
        }))}

С помощью этого кода я могу добавить значок и текст метки

Answer 3

react-select является гибким, чтобы разрешить пропуск PropTypes.node для опции label .

font-awesome icons можно использовать с className , примененным к элементу HTMLSpan, например

const labelWithIcon = <span className="fas fa-stroopwafel" />

<Select defaultValue={ label: labelWithIcon, value: 'some-value'} />