@fortawesome/fa-icon-chooser-react

FaIconChooser React Component

Find API References for the required callback functions in the fa-icon-chooser component documentation over here.

Usage

npm install --save @fortawesome/fa-icon-chooser-react

import ReactDOM from 'react-dom'
import { FaIconChooser } from '@fortawesome/fa-icon-chooser-react'

// One or both of these would be provided somehow by the user.
// If both are provided as propse, kitToken takes priority over version.
// If only version is present, the Icon Chooser will run with only
// Font Awesome Free with the given version.
const version = '5.15.5'
const kitToken = undefined

// Implement the required callback functions.

function handleQuery() {
  // ...
}

function handleResult() {
  // ...
}

function getUrlText() {
  // ...
}

const chooser = <FaIconChooser
  version={ version }
  kitToken={ kitToken }
  handleQuery={ handleQuery }
  getUrlText={ getUrlText }
  onFinish={ handleResult }
></FaIconChooser>

ReactDOM.render(chooser, document.body)

See also the example React app.

Changelog

0.7.0 - 2024-06-05

Changed

• Family and style selection are now based on drop down selections, and the available values are retrieved from the GraphQL API. This removes the hardcoding of familyStyles and lets the icon chooser work with all available familyStyles for the active version of Font Awesome.

• Several slots for messages to indicate the unavailability of certain familyStyles have been removed. They are no longer used, now that the UI only includes in the drop down selectors available familyStyle combinations for the active version of Font Awesome.

  The following slots have been removed:

  • light-requires-pro
  • thin-requires-pro
  • duotone-requires-pro
  • sharp-solid-requires-pro
  • sharp-regular-requires-pro
  • sharp-light-requires-pro
  • uploaded-requires-pro
  • sharp-solid-style-filter-sr-message
  • sharp-regular-style-filter-sr-message
  • sharp-light-style-filter-sr-message
  • solid-style-filter-sr-message
  • regular-style-filter-sr-message
  • light-style-filter-sr-message
  • thin-style-filter-sr-message
  • duotone-style-filter-sr-message
  • brands-style-filter-sr-message
  • uploaded-style-filter-sr-message

• The QueryHandler type now takes a second optional argument for variables. (See also Breaking Changes)o

Fixed

• Duotone custom icons in kits now work correctly.

Breaking Changes

• The icon chooser's queries now use variables, instead of interpolating all values into a single query document string. Thus, any QueryHandler callback must be updated to handle the query variables.

  Its type signature is now:

  export type QueryHandler = (document: string, variables?: object) => Promise<any>;
  

  Suggestion:

  async function handleQuery(query, variables) {
    const headers = buildHeaders()
    const url = getApiUrl()
    const body = JSON.stringify({query, variables})
  
    return fetch(url, {
      method: "POST",
      headers,
      body
    })
  }