How to use the @fortawesome/fontawesome-svg-core.icon function in @fortawesome/fontawesome-svg-core

function drawFontAwesomeIcon(node, ctx, iconName, x, y, size, color = "white", prefix = "far") {
    let def = findIconDefinition({prefix: prefix, iconName: iconName});
    if (!def) return;
    let icn = icon(def, {
        transform: {
            // can't use scale here, as that apparently only affects CSS not the actual path data
        }
    });
    ctx.fillStyle = color;
    let path = new Path2D(icn.icon[4]);
    // path.moveTo(x, y);
    ctx.save();
    ctx.translate(x, y);
    ctx.scale(size, size);
    ctx.fill(path);
    ctx.restore();
}

${{ html: linkifyUrls(update.message) }}
      <p></p>
      ${user &amp;&amp; user.id === measure.author_id &amp;&amp; !update.published_at ? html`
        <div class="is-flex">
          <form action="${location.url}" method="GET">
            <input value="${update.id}" name="edit" type="hidden">
            <input value="updates" name="tab" type="hidden">
            <button type="submit" class="has-text-no-underline is-size-7 button is-text">
              <span class="icon">${icon(faPencilAlt)}</span>
              <span>Edit</span>
            </button>
          </form>
          <form action="${location.url}" method="POST">
            <input value="${update.id}" type="hidden">
            <button type="submit" class="has-text-no-underline is-size-7 button is-text">
              <span class="icon">${icon(faTrash)}</span>
              <span>Delete</span>
            </button>
          </form>
        </div>
      ` : html``}
    
  `
}

<a href="${measureUrl}" class="button has-text-grey is-small">
                      ${action.resource.yeas}
                    </a>
                  
                `
              : html`
                  <div class="buttons has-addons">
                    <span class="button is-static is-small">
                      Votes
                    </span>
                    <a href="${measureUrl}" class="button has-text-grey is-small">
                      <span class="icon has-text-grey-light">${icon(faCheck)}</span>
                      <span>${action.resource.yeas}</span>
                      <span>&nbsp;</span>
                      <span class="icon has-text-grey-light">${icon(faTimes)}</span>
                      <span>${action.resource.nays}</span>
                    </a>
                  </div>
              `}
            
          
        
      `
    default:
      return html``
  }
}

<select name="position" autocomplete="off">
                  <option selected="${!position" value="all">All</option>
                  <option selected="${position" value="yea">Yea</option>
                  <option selected="${position" value="nay">Nay</option>
                </select>
              
              <button class="vote-filters-submit is-hidden" type="submit"></button>
            
          
          <div class="field is-narrow">
            <div class="control">
              <button> dispatch({ type: 'measure:voteFormActivated', measure, event })}
                class="${`button is-small ${measure.showVoteForm ? 'is-hidden' : ''}`}"
              &gt;
                <span class="icon">${icon(faComment)}</span>
                <span>Add your argument</span>
              </button>
            </div>
          </div>
          ${user &amp;&amp; user.is_admin ? html`
            <div class="field is-narrow">
              <div class="control">
                <a class="button is-link has-text-weight-semibold is-small" href="${`${location.path}/import`}">
                  <span class="icon">${icon(faPlus)}</span>
                  <span>Import external argument</span>
                </a>
              </div>
            </div>
          ` : ''}

const filterView = (state, dispatch) => {
  const { loading, location, measures } = state
  const measure = measures[location.params.shortId]
  const pagination = measure.votesPagination || {}
  const currOffset = Number(location.query.offset) || 0
  return html`
    <div style="margin-bottom: 2em;">
      <div class="field is-grouped">
        <form method="POST" class="control">
          <button class="${`button ${loading.voteReport ? 'is-loading' : ''}`}" disabled="${loading.voteReport}" type="submit">
            <span class="icon is-small">${icon(faTable)}</span>
            <span>Download CSV</span>
          </button>
        </form>
        <form class="control is-expanded has-icons-left" method="GET">
          <input value="${decodeURIComponent(location.query.search || '')}" placeholder="Search by name, district, or location" class="input" name="search" type="text">
          <span class="icon is-small is-left">${icon(faSearch)}</span>
          <button class="button is-hidden" type="submit">Search</button>
        </form>
        ${Number(pagination.count) &gt; Number(pagination.limit) ? html`</div></div>

<form method="POST" class="control">
          <button class="${`button ${loading.voteReport ? 'is-loading' : ''}`}" disabled="${loading.voteReport}" type="submit">
            <span class="icon is-small">${icon(faTable)}</span>
            <span>Download CSV</span>
          </button>
        </form>
        <form class="control is-expanded has-icons-left" method="GET">
          <input value="${decodeURIComponent(location.query.search || '')}" placeholder="Search by name, district, or location" class="input" name="search" type="text">
          <span class="icon is-small is-left">${icon(faSearch)}</span>
          <button class="button is-hidden" type="submit">Search</button>
        </form>
        ${Number(pagination.count) &gt; Number(pagination.limit) ? html`
          <div class="control">
            <nav class="field is-narrow has-addons">
              ${pagination.prev ? html`
                <div class="control">
                  <a href="${prevPage(state)}" class="${`button ${loading.votes ? 'is-loading' : ''}`}">Previous</a>
                </div>
              ` : html``}
              <div class="control">
                <div class="button is-static">
                  ${currOffset + 1} - ${Math.min((measure.votes || []).length, pagination.limit) + currOffset} of ${pagination.count}
                </div>
              </div>
              ${pagination.next ? html`</nav></div>

const voteButtons = ({ loading, measure }, dispatch) => {
  const { vote } = measure
  const { comment, delegate_name, position, public: is_public } = vote || {}
  return html`
    <div class="columns is-gapless is-multiline is-marginless">
      ${position === 'abstain' ? abstainButton({ loading, measure }, dispatch) : html``}
      <div class="column is-half">
        <form style="height: 100%;" method="POST">
          <input value="${position || ''}" name="vote_id" type="hidden">
          <input value="yea" name="position" type="hidden">
          <input value="${typeof is_public === 'boolean' ? is_public : 'true'}" name="public" type="hidden">
          <input value="${comment || ''}" name="comment" type="hidden">
          <button class="${`${loading.vote ? 'is-loading' : ''} button vote-button-yea is-success has-text-weight-semibold is-fullwidth`}" style="${`${vote &amp;&amp; position !== 'yea' ? 'opacity: .3;' : ''} display: block; line-height: 100%; height: 100%; white-space: normal;`}" type="submit">
            <span class="icon is-small">${icon(faCheck)}</span>
            <span>${position === 'yea' ? delegate_name ? `Inherited Yea vote from ${delegate_name}` : 'You voted Yea' : 'Vote Yea'}</span>
          </button>
        </form>
      </div>
      <div style="border-left: 1px solid white;" class="column is-half">
        <form style="height: 100%;" method="POST">
          <input value="${position || ''}" name="vote_id" type="hidden">
          <input value="nay" name="position" type="hidden">
          <input value="${typeof is_public === 'boolean' ? is_public : 'true'}" name="public" type="hidden">
          <input value="${comment || ''}" name="comment" type="hidden">
          <button class="${`${loading.vote ? 'is-loading' : ''} button vote-button-nay is-danger has-text-weight-semibold is-fullwidth`}" style="${`${vote &amp;&amp; position !== 'nay' ? 'opacity: .3;' : ''} display: block; line-height: 100%; height: 100%; white-space: normal;`}" type="submit">
            <span class="icon is-small">${icon(faTimes)}</span>
            <span>${position === 'nay' ? delegate_name ? `Inherited Nay vote from ${delegate_name}` : 'You voted Nay' : 'Vote Nay'}</span>
          </button>
        </form>
      </div></div>

? html`<a href="${username ? `/${username}` : `/twitter/${twitter_username}`}">
                <span>${first_name} ${last_name}</span>
                <span class="has-text-grey is-size-7">@${username || twitter_username}</span>
              </a>`
            : html`
              <span>${first_name} ${last_name}</span>
            `}
          
          <div class="media-right">
            ${idx &gt; 0 ? moveButton({ id, idx, direction: 'up' }, dispatch) : ''}
            ${idx &lt; (proxies.length - 1) ? moveButton({ id, idx, direction: 'down' }, dispatch) : ''}
            <form method="POST" style="display: inline;">
              <input type="hidden" name="to_id" value="${to_id}">
              <input type="hidden" value="${id}">
              <button title="Remove" type="submit" class="button is-small">
                <span class="icon has-text-grey">${icon(faTimes)}</span>
              </button>
            </form>
            <span title="Click and hold to drag to a new position" class="icon has-text-grey is-hidden-touch" style="cursor: move;">
              ${icon(faBars)}
            </span>
          </div>
        
      
    
  `
}

<div class="field">
            <div class="control has-icons-left">
              <input placeholder="First and Last Name" type="text" class="${`input" name="add_proxy[name]" autocomplete="off">
              ${error &amp;&amp; error.name
                ? html`<span class="icon is-small is-left">${icon(faExclamationTriangle)}</span>`
                : html`<span class="icon is-small is-left">${icon(faUser)}</span>`
              }
              ${error &amp;&amp; error.name ? html`<p class="help is-danger">${error.message}</p>` : ''}
            </div>
          </div>
          <div class="field">
            <div class="control has-icons-left">
              <input placeholder="Email" required="" type="text" class="${`input" name="add_proxy[email]" autocomplete="off">
              ${error &amp;&amp; error.email
                ? html`<span class="icon is-small is-left">${icon(faExclamationTriangle)}</span>`
                : html`<span class="icon is-small is-left">${icon(faEnvelope)}</span>`
              }
              ${error &amp;&amp; error.email ? html`<p class="help is-danger">${error.message}</p>` : ''}
            </div>
          </div>
          <div class="field">
            <div class="control">
              <button class="button is-link is-outlined">
                <span style="margin-left:0 !important;" class="icon is-small">${icon(faHandshake)}</span>
                <span>Add</span>
              </button>
            </div>
          </div>
        
      
      <p class="is-size-7">They'll be sent an <strong>invitation email</strong>. You'll be BCC'd.</p>

faBuilding,
  faCat,
  faCoffee,
  faFlag,
  faFrown,
  faFutbol,
  faHistory,
  faLightbulb,
  faMusic,
  faSearch,
  faSmile,
  faTimes
);

export const building = icon({ prefix: 'far', iconName: 'building' }).html;
export const cat = icon({ prefix: 'fas', iconName: 'cat' }).html;
export const coffee = icon({ prefix: 'fas', iconName: 'coffee' }).html;
export const flag = icon({ prefix: 'far', iconName: 'flag' }).html;
export const futbol = icon({ prefix: 'fas', iconName: 'futbol' }).html;
export const frown = icon({ prefix: 'far', iconName: 'frown' }).html;
export const history = icon({ prefix: 'fas', iconName: 'history' }).html;
export const lightbulb = icon({ prefix: 'far', iconName: 'lightbulb' }).html;
export const music = icon({ prefix: 'fas', iconName: 'music' }).html;
export const search = icon({ prefix: 'fas', iconName: 'search' }).html;
export const smile = icon({ prefix: 'far', iconName: 'smile' }).html;
export const times = icon({ prefix: 'fas', iconName: 'times' }).html;