How to use @fortawesome/fontawesome-svg-core - 10 common examples

})

amplitude.getInstance().init("4cac840317d8c141fff5beb87b423d59")

/**
 * Replaces the component renderer in a way that,
 * as long as we are on the same page, the component will
 * not be unmounted and remounted.
 */
export function replaceComponentRenderer({ props, loader }) {
  const Component = props.pageResources.component
  return 
}

// CSS is added in `src/styles/global.css`
fontAwesomeConfig.autoAddCss = false

connectedCallback() {
        this._mapId = this.getAttribute('map-id');

        // Geolocation element not visible by default
        this.style = 'display: none';

        const geolocationButton = document.createElement('button');
        geolocationButton.classList = 'btn btn-danger btn-sm';

        // Set icon
        const iconDef = findIconDefinition({prefix: 'far', iconName: 'dot-circle'});
        const i = icon(iconDef, {
            transform: {
                size: 25
            }
        });
        geolocationButton.appendChild(i.node[0]);

        this.appendChild(geolocationButton);

        if ('geolocation' in navigator) {
            // Element is visible only if the browser has geolocation capability
            this.style.display = 'block';

            navigator.geolocation.getCurrentPosition(function(position) {
                // console.log(position.coords.latitude);
                // console.log(position.coords.longitude);

function FontAwesomeIcon(props) {
  var iconArgs = props.icon,
      maskArgs = props.mask,
      symbol = props.symbol,
      className = props.className,
      title = props.title;
  var iconLookup = normalizeIconArgs(iconArgs);
  var classes = objectWithKey('classes', [].concat(_toConsumableArray(classList(props)), _toConsumableArray(className.split(' '))));
  var transform = objectWithKey('transform', typeof props.transform === 'string' ? parse.transform(props.transform) : props.transform);
  var mask = objectWithKey('mask', normalizeIconArgs(maskArgs));
  var renderedIcon = icon(iconLookup, _objectSpread2({}, classes, {}, transform, {}, mask, {
    symbol: symbol,
    title: title
  }));

  if (!renderedIcon) {
    log('Could not find icon', iconLookup);
    return null;
  }

  var abstract = renderedIcon.abstract;
  var extraProps = {};
  Object.keys(props).forEach(function (key) {
    if (!FontAwesomeIcon.defaultProps.hasOwnProperty(key)) {
      // eslint-disable-line no-prototype-builtins

const path = require('path');
const prettyStringify = require('json-stringify-pretty-compact');
const shell = require('shelljs');
const YAML = require('js-yaml');

const fieldSchema = require('./data/presets/schema/field.json');
const presetSchema = require('./data/presets/schema/preset.json');
const nsi = require('name-suggestion-index');
const deprecated = require('./data/deprecated.json').dataDeprecated;

// fontawesome icons
const fontawesome = require('@fortawesome/fontawesome-svg-core');
const fas = require('@fortawesome/free-solid-svg-icons').fas;
const far = require('@fortawesome/free-regular-svg-icons').far;
const fab = require('@fortawesome/free-brands-svg-icons').fab;
fontawesome.library.add(fas, far, fab);

const request = require('request').defaults({ maxSockets: 1 });

let _currBuild = null;


function buildData() {
  if (_currBuild) return _currBuild;

  const START = '🏗   ' + colors.yellow('Building data...');
  const END = '👍  ' + colors.green('data built');

  console.log('');
  console.log(START);
  console.time(END);

library.add(faPlus);
library.add(faPencilAlt);
library.add(faBars);
library.add(faHome);
library.add(faThList);
library.add(faUserPlus);
library.add(faRoad);
library.add(faTachometerAlt);
library.add(faHeart);
library.add(faList);
library.add(faBell);
library.add(faTasks);
library.add(faBook);
library.add(faHdd);
library.add(faFlag);
library.add(faWrench);
library.add(faClock);
library.add(faCloud);
library.add(faSignOutAlt);
library.add(faSignInAlt);
library.add(faCalendarAlt);
library.add(faSearch);
library.add(faTrashAlt);
library.add(faAsterisk);
library.add(faCheck);
library.add(faCheckDouble);

// jhipster-needle-add-element-to-vendor - JHipster will add new menu items here

} from '@fortawesome/free-regular-svg-icons';

import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

// general
library.add(faBook);
library.add(faSpinner);
library.add(faTimes);
library.add(faAngleRight);
library.add(faAngleLeft);
library.add(faAngleDown);

// nav bar
library.add(faCircle);
library.add(faEnvelope);
library.add(faSignOutAlt);

// side bar
library.add(faTachometerAlt);
library.add(faCube);
library.add(faUser);
library.add(faClone);
library.add(faTag);
library.add(faComments);
library.add(faWrench);

// dashboard
library.add(faUsers);
library.add(faEye);

// login
library.add(faLock);

Vue.component(
        'crud-show-near-items',
        require('./../components/Crud/CrudShowNearItems').default
    );
    Vue.component('vue-ctk-date-time-picker', VueCtkDateTimePicker);
    Vue.component('role-permissions', RolePermissions);
    Vue.component('user-roles', UserRoles);
    Vue.component(
        'dashboard',
        require('./../components/Pages/Dashboard').default
    );

    // FontAwesome
    library.add(far);
    library.add(fas);
    library.add(fab);
    Vue.component('fa-icon', FontAwesomeIcon);

    // Modules
    Vue.use(Vuex);
    Vue.use(BootstrapVue);
    Vue.use(Notifications);
    Vue.use(VModal);
    Vue.use(ClientTable);
    Vue.use(CKEditor);
    Vue.use(BootstrapVue);
    Vue.use(VueI18n);

    // you can set default global options and events when use
    // https://www.npmjs.com/package/vue-codemirror
    Vue.use(
        VueCodemirror /* {

import { library, icon, Icon } from '@fortawesome/fontawesome-svg-core'
import {
  faDatabase, faChartBar,
  faLongArrowAltUp, faLongArrowAltDown,
  faSortAmountUp, faSortAmountDown,
  faAngleDown,
} from '@fortawesome/free-solid-svg-icons'

// https://fontawesome.com/how-to-use/with-the-api/setup/library
library.add(faDatabase)
library.add(faChartBar)
library.add(faLongArrowAltUp)
library.add(faLongArrowAltDown)
library.add(faSortAmountUp)
library.add(faSortAmountDown)
library.add(faAngleDown)

const iDatabase = icon({ prefix: 'fas', iconName: 'database' })
const iChartBar = icon({ prefix: 'fas', iconName: 'chart-bar' })
const iLongArrowAltUp = icon({ prefix: 'fas', iconName: 'long-arrow-alt-up' })
const iLongArrowAltDown = icon({ prefix: 'fas', iconName: 'long-arrow-alt-down' })
const iSortAmountUp = icon({ prefix: 'fas', iconName: 'sort-amount-up' })
const iSortAmountDown = icon({ prefix: 'fas', iconName: 'sort-amount-down' })
const iAngleDown = icon({ prefix: 'fas', iconName: 'angle-down' })

function convert(icon: Icon) {

library.add(faSync);
library.add(faEye);
library.add(faBan);
library.add(faTimes);
library.add(faArrowLeft);
library.add(faSave);
library.add(faPlus);
library.add(faPencilAlt);
library.add(faBars);
library.add(faHome);
library.add(faThList);
library.add(faUserPlus);
library.add(faRoad);
library.add(faTachometerAlt);
library.add(faHeart);
library.add(faList);
library.add(faBell);
library.add(faTasks);
library.add(faBook);
library.add(faHdd);
library.add(faFlag);
library.add(faWrench);
library.add(faClock);
library.add(faCloud);
library.add(faSignOutAlt);
library.add(faSignInAlt);
library.add(faCalendarAlt);
library.add(faSearch);
library.add(faTrashAlt);
library.add(faAsterisk);

// jhipster-needle-add-element-to-vendor - JHipster will add new menu items here

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