@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.3.0 - 2022-01-26

Changed

• Updated depedencies, especially StencilJS and peerDependencies to allow for React 17.

• Fixed duotone SVG handling. They were rendering correctly, but internally were being handled incorrectly.

• Changed one of the default search result icons.