How to use @iconify/iconify - 10 common examples

import UI from './src/ui';

// UI configuration
const itemsPerPage = 55; // 5 rows x 11 icons. Also see plugin-ui.js
let iconifyConfig = {
	config: {
		itemsPerPage: itemsPerPage,
		search: {
			limit: itemsPerPage * 2,
		},
	},
};

// Use local API for development. See config.common.js
if (process.env.ICONIFY_API) {
	Iconify.setConfig('defaultAPI', process.env.ICONIFY_API_VALUE);
}
if (process.env.SEARCH_API) {
	iconifyConfig.config.API = {
		URI: process.env.SEARCH_API_VALUE,
	};
}

let params = {
	callback: (event, data) => {
		console.log('Callback to plugin:', event, data);
	},

	iconify: iconifyConfig,

	// Prefix to limit plugin to one collection. Changing this might be broken by stored route and require reset of options
	// prefix: 'ic',

if (result === null) {
		return;
	}

	// Create timer
	timer = window.setInterval(nextTick, 100);
}

// Show notice that plug-in is in development mode, not ready for publishing
if (process.env.SEARCH_DEV) {
	console.log('Running plug-in in development mode!');
}

// Disable Iconify storage
Iconify.setConfig('localStorage', false);
Iconify.setConfig('sessionStorage', false);
if (process.env.ICONIFY_API) {
	// Use local API for development. See config.common.js
	Iconify.setConfig('defaultAPI', process.env.ICONIFY_API_VALUE);
}

// Load samples
loadScript('https://code.iconify.design/samples.js');
delay(
	counter => {
		// Do not delay for more than 1 second
		return counter > 10 || Iconify.iconExists('mdi:account-check');
	},
	() => {
		let iconifyConfig = {
			config: {
				itemsPerPage: itemsPerPage,

}
	if (result === null) {
		return;
	}

	// Create timer
	timer = window.setInterval(nextTick, 100);
}

// Show notice that plug-in is in development mode, not ready for publishing
if (process.env.SEARCH_DEV) {
	console.log('Running plug-in in development mode!');
}

// Disable Iconify storage
Iconify.setConfig('localStorage', false);
Iconify.setConfig('sessionStorage', false);
if (process.env.ICONIFY_API) {
	// Use local API for development. See config.common.js
	Iconify.setConfig('defaultAPI', process.env.ICONIFY_API_VALUE);
}

// Load samples
loadScript('https://code.iconify.design/samples.js');
delay(
	counter => {
		// Do not delay for more than 1 second
		return counter > 10 || Iconify.iconExists('mdi:account-check');
	},
	() => {
		let iconifyConfig = {
			config: {

// Create timer
	timer = window.setInterval(nextTick, 100);
}

// Show notice that plug-in is in development mode, not ready for publishing
if (process.env.SEARCH_DEV) {
	console.log('Running plug-in in development mode!');
}

// Disable Iconify storage
Iconify.setConfig('localStorage', false);
Iconify.setConfig('sessionStorage', false);
if (process.env.ICONIFY_API) {
	// Use local API for development. See config.common.js
	Iconify.setConfig('defaultAPI', process.env.ICONIFY_API_VALUE);
}

// Load samples
loadScript('https://code.iconify.design/samples.js');
delay(
	counter => {
		// Do not delay for more than 1 second
		return counter > 10 || Iconify.iconExists('mdi:account-check');
	},
	() => {
		let iconifyConfig = {
			config: {
				itemsPerPage: itemsPerPage,
				search: {
					limit: itemsPerPage * 2,
				},

renderIconName() {
		let props = this.props;

		let app = props.app,
			options = app.options,
			iconName = props.iconName,
			showPrefix =
				!props.view ||
				props.view.type !== 'collection' ||
				props.view.prefix !== options.icon.prefix,
			text = showPrefix ? iconName : options.icon.name,
			data = Iconify.getIcon(iconName),
			sampleHeight = props.container.scaleDownIcon(data.height), // ignore other attributes because rotation is not applied
			sample = FullFooter.renderSample(iconName, {});

		return (
			
		);
	}

.replace('{prefix}', icon.prefix)
			.replace('{name}', icon.name);

		if (!loaded) {
			return (
				
			);
		}

		let iconData = Iconify.getIcon(name);

		let tooltip = [
			lang.name.replace('{name}', props.title),
			lang.size
				.replace('{width}', iconData.width)
				.replace('{height}', iconData.height),
			lang.palette.replace(
				'{palette}',
				iconData.body.indexOf('currentColor') === -1
					? lang.colors
					: lang.colorless
			),
		];
		tooltip = tooltip.join('\n');

		// Generate SVG

if (!loaded) {
			return (
				
					{deleteButton}
				
			);
		}

		let icon = props.icon,
			iconData = Iconify.getIcon(name);

		// Generate link and tooltip
		let link = props.config.links.icon
			.replace('{prefix}', icon.prefix)
			.replace('{name}', icon.name);

		let tooltip = [
			lang.name.replace('{prefix}', icon.prefix).replace('{name}', icon.name),
			lang.size
				.replace('{width}', iconData.width)
				.replace('{height}', iconData.height),
			lang.palette.replace(
				'{palette}',
				iconData.body.indexOf('currentColor') === -1
					? lang.colors
					: lang.colorless

if (event && event.preventDefault) {
			event.preventDefault();
		}

		// Get selected icon
		if (options && options.iconName !== void 0) {
			iconName = options.iconName;
			delete options.iconName;
		}
		if (iconName === null) {
			return;
		}

		// Get icon data
		let iconData = Iconify.getIcon(iconName);
		if (!iconData) {
			return;
		}

		// Add icon to recent list
		let ui = this.props.ui;
		ui.storeIcon('recent', iconName);

		if (
			this.route.page === 'recent' &&
			this.iconifyView &&
			this.iconifyView.sync
		) {
			this.iconifyView.sync();
		}

render() {
		let props = this.props,
			container = props.container;

		let app = props.app,
			iconName = props.iconName,
			data = Iconify.getIcon(iconName),
			options = app.options,
			transformations = options.getIconTransformations(true),
			sample = FullFooter.renderSample(iconName, transformations),
			sampleHeight = container.scaleDownIcon(
				data.height,
				data.width,
				transformations.rotate
			),
			sampleLimit = 128,
			hasColor = sample.indexOf('currentColor') !== -1;

		// Change color in sample
		if (hasColor && transformations.color !== '') {
			sample = sample.replace(/currentColor/g, transformations.color);
		}

constructor(props) {
		super(props);

		let ui = props.ui,
			params = ui.params;

		// Set state
		this.state = {
			counter: 0,
		};

		// Disable cache for icons
		Iconify.setConfig('localStorage', false);
		Iconify.setConfig('sessionStorage', false);

		// Notices
		this.notices = [];

		// Options
		this.options = ui.options;

		// Selected nodes tree
		this.selectedNodes = params.selectedNodes ? [params.selectedNodes] : [];

		// Page and routes
		this.route =
			params.route && params.route.page
				? JSON.parse(JSON.stringify(params.route))
				: {