How to use @uifabric/icons - 8 common examples

/** Jest test setup file. */

const { configure } = require('enzyme');
const { initializeIcons } = require('@uifabric/icons');
const Adapter = require('enzyme-adapter-react-16');

// Initialize icons.
initializeIcons('');

global.requestAnimationFrame = callback => {
  setTimeout(callback, 0);
};

// Configure enzyme.
configure({ adapter: new Adapter() });

/** Jest test setup file. */

import { configure } from 'enzyme';
import { initializeIcons } from '@uifabric/icons';
import * as Adapter from 'enzyme-adapter-react-16';

// Initialize icons.
initializeIcons('');

// Mock requestAnimationFrame for React 16+.
declare const global: { requestAnimationFrame: (cb: () => void) => void };

global.requestAnimationFrame = (callback: () => void) => {
  setTimeout(callback, 0);
};

// Configure enzyme.
configure({ adapter: new Adapter() });

/** Jest test setup file. */

const { setIconOptions } = require('office-ui-fabric-react/lib/Styling');
const { initializeIcons } = require('@uifabric/icons');
const { configure } = require('enzyme');
const Adapter = require('enzyme-adapter-react-16');

initializeIcons('');

// Suppress icon warnings.
setIconOptions({
  disableWarnings: true
});

// Mock requestAnimationFrame for React 16+.
global.requestAnimationFrame = callback => {
  setTimeout(callback, 0);
};

// Configure enzyme.
configure({ adapter: new Adapter() });

this.state = {
            hideLoading: false,
            loadingMessage: "Loading...",
            templates: [],
            items: _items,
            showPanel: false,
            hideTemplateLoading: true,
            printTemplate: null,
            selectedTemplateIndex: -1,
            itemContent: {},
            isSiteAdmin: false
        };
        this.listService = new ListService();
        // Initialize icons
        initializeIcons();
    }

// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.

import React, { useState, useEffect } from 'react';
import { initializeIcons } from '@uifabric/icons';
import { ShellData, ShellApi } from '@bfc/shared';

import ApiClient from '../messenger/ApiClient';

import getEditor from './EditorMap';

import './extensionContainer.css';

initializeIcons(undefined, { disableWarnings: true });
/**
 * ExtensionContainer is a IFrame container to host any extension as React component
 * ExtensionContainer provides a React absraction to it's inner extention, on top of the
 * underlying messaging api between ExtensionContainer and Shell
 *
 * An extension won't have to know this ExtensionContainer exists, it just use the props
 * passed into it to communite with Shell. Those props is actually implement in Container layer.
 *
 * The data and controls flows look like this
 *  Shell <---(messaging)---> Container <---(react props)---> Extension
 *
 */

const apiClient = new ApiClient();

const subEditorCallbacks = {};

function start(): void {
  initializeIcons();

  _rootDiv = document.querySelector('#content');

  ReactDOM.hydrate(, _rootDiv);
}

import { ExpressionEngine } from 'botbuilder-expression-parser';
import { seedNewDialog, LuFile, DialogInfo, ShellApi } from '@bfc/shared';

import Example from '../../src';
import { buildDialogOptions } from '../../src/Form/utils';

import editorSchema from './editorschema.json';

import 'codemirror/mode/javascript/javascript';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material.css';
import 'codemirror/theme/neat.css';

import './styles.css';

initializeIcons(undefined, { disableWarnings: true });

const cmOptions = {
  theme: 'material',
  viewportMargin: Infinity,
  mode: {
    name: 'javascript',
    json: true,
    statementIndent: 2,
  },
  lineNumbers: true,
  lineWrapping: true,
  indentWithTabs: false,
  tabSize: 2,
  smartIndent: true,
};

constructor(props: IPropertyFieldSitePickerHostProps) {
    super(props);
    initializeIcons();

    telemetry.track('PropertyFieldSitePicker', {
      disabled: props.disabled
    });

    this.state = {
      isLoading: false,
      selectedSites: [],
      siteSearchResults: [],
      errorMessage: null
    };

    this.async = new Async(this);

    this.searchService = new SPSiteSearchService();
  }