Use with react-fontawesome

[sweetraare]

How can I use it with react-fontawesome? when I try I only get it buttons without an icon

[gregfenton]

What are you using in your configuration for the icons property to <FontIconPicker /> ?

Please share some code so we can see what you are dealing with.

[gregfenton]

BTW: I hacked around a bit. I'm using react-semantic-ui that includes an older free distribution of font-awesome. Can't say for sure this will work in the long run (FEEDBACK WELCOMED!!) but I added the following and it is working for me:

import { ICONS } from "semantic-ui-react/dist/commonjs/lib/SUI";

// ...

<FontIconPicker
        icons={ICONS}
        value={[]}
        renderFunc={(icon) => <i className={`icon ${icon}`} />}
        showSearch={true}
        theme='blue'
        isMulti={false}
        onChange={onChange}
        onBlur={(evt, val) => onBlur(val)} // need input.onBlur so that reduxForm knows when we've clicked in/out of a field (so it can update "touched" )
        onChangeRaw={(e) => e.preventDefault()}
        closeOnSelect
        {...rest}
      />

[gregfenton]

Another update. The categories don't work with the above because ICONS is a flattened list within SUI.

To get categories working, I use suiIcons from the following instead of ICONS above:

import * as SUI from "semantic-ui-react/dist/commonjs/lib/SUI";

export const suiIcons = {
  Accessibility: [ ...SUI.ACCESSIBILITY ],
  Arrows: [ ...SUI.ARROWS ],
  Audio_Video: [ ...SUI.AUDIO_VIDEO ],
  Business: [ ...SUI.BUSINESS ],
  Chess: [ ...SUI.CHESS ],
  Code: [ ...SUI.CODE ],
  Communication: [ ...SUI.COMMUNICATION ],
  Computers: [ ...SUI.COMPUTERS ],
  Currency: [ ...SUI.CURRENCY ],
  Date_Time: [ ...SUI.DATE_TIME ],
  Design: [ ...SUI.DESIGN ],
  Editors: [ ...SUI.EDITORS ],
  Files: [ ...SUI.FILES ],
  Genders: [ ...SUI.GENDERS ],
  Hands_Gestures: [ ...SUI.HANDS_GESTURES ],
  Health: [ ...SUI.HEALTH ],
  Images: [ ...SUI.IMAGES ],
  Interfaces: [ ...SUI.INTERFACES ],
  Logistics: [ ...SUI.LOGISTICS ],
  Maps: [ ...SUI.MAPS ],
  Medical: [ ...SUI.MEDICAL ],
  Objects: [ ...SUI.OBJECTS ],
  Payments_shopping: [ ...SUI.PAYMENTS_SHOPPING ],
  Shapes: [ ...SUI.SHAPES ],
  Spinners: [ ...SUI.SPINNERS ],
  Sports: [ ...SUI.SPORTS ],
  Status: [ ...SUI.STATUS ],
  Users_People: [ ...SUI.USERS_PEOPLE ],
  Vehicles: [ ...SUI.VEHICLES ],
  Writing: [ ...SUI.WRITING ],
  Brands: [ ...SUI.BRANDS ],
};