How to use the @edtr-io/editor-ui.createIcon function in @edtr-io/editor-ui

import { StatefulPlugin, StateType } from '@edtr-io/core'
import * as React from 'react'

import { VideoEditor } from './editor'
import { VideoRenderer } from './renderer'
import { createIcon, faFilm } from '@edtr-io/editor-ui'

export const videoState = StateType.string()
export const videoPlugin: StatefulPlugin = {
  //eslint-disable-next-line react/display-name
  Component: props =>
    props.editable ?  : ,
  state: videoState,
  title: 'Video',
  description: 'Binde Videos von Youtube, Vimeo, Wikimedia und BR ein.',
  icon: createIcon(faFilm),
  onPaste(clipboardData: DataTransfer) {
    const value = clipboardData.getData('text')

    const regex = /^(https?:\/\/)?(.*?(youtube\.com\/watch\?(.*&)?v=.+|youtu\.be\/.+|vimeo\.com\/.+|upload\.wikimedia\.org\/.+(\.webm|\.ogg)?|br\.de\/.+))/
    if (regex.test(value)) {
      return { state: value }
    }
  }
}

import { StatefulPlugin, StateType } from '@edtr-io/core'

import { SpoilerEditor } from './editor'
import { createIcon, faCaretSquareDown } from '@edtr-io/editor-ui'

export const spoilerState = StateType.object({
  title: StateType.string(''),
  content: StateType.child('rows')
})

export const spoilerPlugin: StatefulPlugin = {
  Component: SpoilerEditor,
  state: spoilerState,
  icon: createIcon(faCaretSquareDown),
  title: 'Spoiler',
  description:
    'In diese ausklappbaren Box kannst du zum Beispiel Exkurse hinzufügen.'
}

export interface SpoilerTheme {
  color: string
}

import { StatefulPlugin, StateType } from '@edtr-io/core'

import { HintEditor } from './editor'
import { createIcon, faLightbulb } from '@edtr-io/editor-ui'

export const hintState = StateType.object({
  title: StateType.string(''),
  content: StateType.child('rows')
})

export const hintPlugin: StatefulPlugin = {
  Component: HintEditor,
  state: hintState,
  title: 'Hinweis',
  description: 'Gib zusätzliche Tipps zur Aufgabe in dieser ausklappbaren Box.',
  icon: createIcon(faLightbulb)
}

export const AnswerProps = StateType.object({
  id: StateType.child(),
  isCorrect: StateType.boolean(false),
  feedback: StateType.child(),
  hasFeedback: StateType.boolean(false)
})

export const scMcState = StateType.object({
  isSingleChoice: StateType.boolean(false),
  answers: StateType.list(AnswerProps)
})

export const scMcExercisePlugin: StatefulPlugin = {
  Component: ScMcExerciseEditor,
  state: scMcState,
  icon: createIcon(faDotCircle),
  title: 'Auswahlaufgabe',
  description:
    'Füge deiner Aufgabe mehrere Single- oder Multiplechoice-Antworten hinzu.'
}

import { StatefulPlugin, StateType } from '@edtr-io/core'

import { SolutionEditor } from './editor'
import { createIcon, faCheckSquare } from '@edtr-io/editor-ui'

export const solutionState = StateType.object({
  title: StateType.string(''),
  content: StateType.child('rows')
})

export const solutionPlugin: StatefulPlugin = {
  Component: SolutionEditor,
  state: solutionState,
  icon: createIcon(faCheckSquare),
  title: 'Lösung',
  description:
    'Gestalte in dieser ausklappbaren Box eine ausführliche Lösung zu deinen Aufgaben.'
}

import { StatefulPlugin, StateType } from '@edtr-io/core'

import { AnchorEditor } from './editor'
import { faAnchor, createIcon } from '@edtr-io/editor-ui'

export const anchorState = StateType.string()

export const anchorPlugin: StatefulPlugin = {
  Component: AnchorEditor,
  state: anchorState,
  title: 'Anker',
  description: 'Füge eine Sprungmarke innerhalb deines Inhalts hinzu.',
  icon: createIcon(faAnchor)
}

export function createHighlightPlugin(config: HighlightPluginConfig) : StatefulPlugin {
  return {
    Component: createHighlightEditor(config),
    state: highlightState,
    title: 'Code',
    description:
      'Schreibe Code und lasse ihn je nach Programmiersprache highlighten.',
    icon: createIcon(faCode)
  }
}

import { createIcon, faKeyboard } from '@edtr-io/editor-ui'

export const wrongAnswerObject = StateType.object({
  value: StateType.string(''),
  feedback: StateType.child()
})
export const inputExerciseState = StateType.object({
  type: StateType.string('Text'),
  correctAnswers: StateType.list(StateType.string('')),
  wrongAnswers: StateType.list(wrongAnswerObject)
})
export const inputExercisePlugin: StatefulPlugin = {
  Component: InputExerciseEditor,
  state: inputExerciseState,
  title: 'Eingabefeld',
  icon: createIcon(faKeyboard),
  description: 'Füge deiner Aufgabe ein Eingabefeld für die Lernenden hinzu.'
}

export function createHighlightPlugin(config: HighlightPluginConfig) : StatefulPlugin {
  return {
    Component: createHighlightEditor(config),
    state: highlightState,
    title: 'Code',
    description:
      'Schreibe Code und lasse ihn je nach Programmiersprache highlighten.',
    icon: createIcon(faCode)
  }
}

export const StepProps = StateType.object({
  left: StateType.child(),
  right: StateType.child(),
  transform: StateType.child()
})

export const equationsState = StateType.object({
  steps: StateType.list(StepProps)
})

export const equationsPlugin: StatefulPlugin = {
  Component: EquationsEditor,
  state: equationsState,
  title: 'Gleichungen',
  description: 'Erzeuge einfach übersichtliche mathematische Gleichungen.',
  icon: createIcon(faEquals)
}

export * from './editor'