@fortawesome/fa-icon-chooser

fa-icon-chooser web component

Usage

Add it to your JavaScript bundle:

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

After the resulting JavaScript bundle has been loaded in the DOM, you can mount an fa-icon-chooser in the DOM. Suppose your HTML has a container div:

<div id="fa-icon-chooser-container"></div>

Then you could write JavaScript like this:

function handleQuery(query) {
  // some function that handles queries
}

function getUrlText(url) {
  // some function that handles GET requests
}

function handleResult(event) {
  const result = event && event.detail;

  if (result) {
    console.log(`<i class"${result.prefix} ${result.iconName}">`);
  }
}

window.addEventListener('DOMContentLoaded', event => {
  const container = document.querySelector('#fa-icon-chooser-container');
  const el = document.createElement('fa-icon-chooser');
  el.handleQuery = handleQuery;
  el.getUrlText = getUrlText;
  el.addEventListener('finish', handleResult);
  container.appendChild(el);
});

See the fa-icon-chooser API Reference for details about what you'd need to implement in handleQuery(), getUrlText(), and handleResult().

You can also look at some example implementations in this repo's development runtime code.

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
    })
  }