Open sweetraare opened 4 years ago
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.
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}
/>
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 ],
};
How can I use it with react-fontawesome? when I try I only get it buttons without an icon