@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.4.1 - 2022-08-31

Changed

• Fixed the version of fa-icon-chooser on which fa-icon-chooser-react depends.