<commit_before><template>

  <!-- eslint-disable max-len -->

  <!-- tracking -->
  <mat-svg v-if="correct" name="check_circle" category="action" :style="style" />
  <mat-svg v-else-if="helpNeeded" name="error" category="alert" :style="style" />
  <mat-svg v-else-if="hint" name="lightbulb_outline" category="action" :style="style" />
  <mat-svg v-else-if="incorrect" name="close" category="navigation" :style="style" />
  <mat-svg v-else-if="inProgress" name="access_time" category="device" :style="style" />
  <mat-svg v-else-if="mastered" name="stars" category="action" :style="style" />
  <mat-svg v-else-if="notStarted" name="brightness_1" category="image" :style="style" />
  <mat-svg v-else-if="rectified" name="lens" category="image" :style="style" />
  <!-- coaching -->
  <mat-svg v-else-if="coach" name="local_library" category="maps" :style="style" />
  <mat-svg v-else-if="lesson" name="import_contacts" category="communication" :style="style" />
  <mat-svg v-else-if="question" name="keyboard_arrow_right" category="hardware" :style="style" :class="flip" />
  <mat-svg v-else-if="quiz" name="assignment_late" category="action" :style="style" />
  <!-- content -->
  <mat-svg v-else-if="app" name="widgets" category="device" :style="style" />
  <mat-svg v-else-if="audio" name="audiotrack" category="image" :style="style" />
  <mat-svg v-else-if="channel" name="apps" category="navigation" :style="style" />
  <mat-svg v-else-if="doc" name="book" category="action" :style="style" />
  <mat-svg v-else-if="exercise" name="assignment" category="action" :style="style" />
  <mat-svg v-else-if="topic" name="folder" category="file" :style="style" />
  <mat-svg v-else-if="video" name="ondemand_video" category="notification" :style="style" />
  <mat-svg v-else-if="html5" name="widgets" category="device" :style="style" />
  <!-- users -->
  <mat-svg v-else-if="classroom" name="business" category="communication" :style="style" />
  <mat-svg v-else-if="group" category="action" name="group_work" :style="style" />
  <mat-svg v-else-if="people" name="people" category="social" :style="style" />
  <mat-svg v-else-if="person" name="person" category="social" :style="style" />
  <mat-svg v-else-if="permission" name="vpn_key" category="communication" :style="style" />
  <!-- misc -->
  <mat-svg v-else-if="dot" name="brightness_1" category="image" :style="style" />
  <mat-svg v-else-if="error" name="error" category="alert" :style="style" />
  <!-- UI -->
  <mat-svg v-else-if="back" name="arrow_back" category="navigation" :style="style" :class="flip" />
  <mat-svg v-else-if="forward" name="arrow_forward" category="navigation" :style="style" :class="flip" />
  <mat-svg v-else-if="clear" name="clear" category="content" :style="style" />
  <mat-svg v-else-if="dropdown" name="arrow_drop_down" category="navigation" :style="style" />
  <mat-svg v-else-if="language" name="language" category="action" :style="style" />
  <mat-svg v-else-if="logout" name="exit_to_app" category="action" :style="style" :class="flip" />
  <mat-svg v-else-if="menu" name="menu" category="navigation" :style="style" />
  <mat-svg v-else-if="search" name="search" category="action" :style="style" />

  <!--eslint-enable-->

</template>


<script>

  import themeMixin from 'kolibri.coreVue.mixins.themeMixin';

  const boolean = {
    type: Boolean,
    default: false,
  };

  export default {
    name: 'KIcon',
    mixins: [themeMixin],
    props: {
      /**
       * color to apply to the icon
       */
      color: {
        type: String,
        required: false,
      },
      // tracking
      correct: boolean,
      helpNeeded: boolean,
      hint: boolean,
      incorrect: boolean,
      inProgress: boolean,
      mastered: boolean,
      notStarted: boolean,
      rectified: boolean,
      // coaching
      coach: boolean,
      lesson: boolean,
      question: boolean,
      quiz: boolean,
      // content
      app: boolean,
      audio: boolean,
      channel: boolean,
      doc: boolean,
      exercise: boolean,
      topic: boolean,
      video: boolean,
      html5: boolean,
      // users
      classroom: boolean,
      group: boolean,
      people: boolean,
      permission: boolean,
      person: boolean,
      // misc
      dot: boolean,
      error: boolean,
      // UI
      back: boolean,
      forward: boolean,
      clear: boolean,
      dropdown: boolean,
      language: boolean,
      logout: boolean,
      menu: boolean,
      search: boolean,
    },
    computed: {
      style() {
        if (this.color) {
          return { fill: this.color };
        }
        return { fill: this.$themeTokens.text };
      },
      flip() {
        return this.isRtl ? 'rtl-icon' : null;
      },
    },
  };

</script>


<style lang="scss" scoped>

  svg {
    position: relative;
    top: 0.125em;
    width: 1.125em;<commit_msg>KIcon - remove boolean props, add string prop ‘icon’<commit_after><template>

  <!-- eslint-disable max-len -->

  <!-- tracking -->
  <mat-svg v-if="icon === 'correct'" name="check_circle" category="action" :style="style" />
  <mat-svg v-else-if="icon ==='helpNeeded'" name="error" category="alert" :style="style" />
  <mat-svg v-else-if="icon ==='hint'" name="lightbulb_outline" category="action" :style="style" />
  <mat-svg v-else-if="icon ==='incorrect'" name="close" category="navigation" :style="style" />
  <mat-svg v-else-if="icon ==='inProgress'" name="access_time" category="device" :style="style" />
  <mat-svg v-else-if="icon ==='mastered'" name="stars" category="action" :style="style" />
  <mat-svg v-else-if="icon ==='notStarted'" name="brightness_1" category="image" :style="style" />
  <mat-svg v-else-if="icon ==='rectified'" name="lens" category="image" :style="style" />
  <!-- coaching -->
  <mat-svg v-else-if="icon ==='coach'" name="local_library" category="maps" :style="style" />
  <mat-svg v-else-if="icon ==='lesson'" name="import_contacts" category="communication" :style="style" />
  <mat-svg v-else-if="icon ==='question'" name="keyboard_arrow_right" category="hardware" :style="style" :class="flip" />
  <mat-svg v-else-if="icon ==='quiz'" name="assignment_late" category="action" :style="style" />
  <!-- content -->
  <mat-svg v-else-if="icon ==='app' || icon === 'html5'" name="widgets" category="device" :style="style" />
  <mat-svg v-else-if="icon ==='audio'" name="audiotrack" category="image" :style="style" />
  <mat-svg v-else-if="icon ==='channel'" name="apps" category="navigation" :style="style" />
  <mat-svg v-else-if="icon ==='doc' || icon ==='document'" name="book" category="action" :style="style" />
  <mat-svg v-else-if="icon ==='exercise'" name="assignment" category="action" :style="style" />
  <mat-svg v-else-if="icon ==='topic'" name="folder" category="file" :style="style" />
  <mat-svg v-else-if="icon ==='video'" name="ondemand_video" category="notification" :style="style" />
  <!-- users -->
  <mat-svg v-else-if="icon ==='classroom'" name="business" category="communication" :style="style" />
  <mat-svg v-else-if="icon ==='group'" category="action" name="group_work" :style="style" />
  <mat-svg v-else-if="icon ==='people'" name="people" category="social" :style="style" />
  <mat-svg v-else-if="icon ==='person'" name="person" category="social" :style="style" />
  <mat-svg v-else-if="icon ==='permission'" name="vpn_key" category="communication" :style="style" />
  <!-- misc -->
  <mat-svg v-else-if="icon ==='dot'" name="brightness_1" category="image" :style="style" />
  <mat-svg v-else-if="icon ==='error'" name="error" category="alert" :style="style" />
  <!-- UI -->
  <mat-svg v-else-if="icon ==='back'" name="arrow_back" category="navigation" :style="style" :class="flip" />
  <mat-svg v-else-if="icon ==='forward'" name="arrow_forward" category="navigation" :style="style" :class="flip" />
  <mat-svg v-else-if="icon ==='clear'" name="clear" category="content" :style="style" />
  <mat-svg v-else-if="icon ==='dropdown'" name="arrow_drop_down" category="navigation" :style="style" />
  <mat-svg v-else-if="icon ==='language'" name="language" category="action" :style="style" />
  <mat-svg v-else-if="icon ==='logout'" name="exit_to_app" category="action" :style="style" :class="flip" />
  <mat-svg v-else-if="icon ==='menu'" name="menu" category="navigation" :style="style" />
  <mat-svg v-else-if="icon ==='search'" name="search" category="action" :style="style" />

  <!--eslint-enable-->

</template>


<script>

  import themeMixin from 'kolibri.coreVue.mixins.themeMixin';

  const iconTypes = [
    'correct',
    'helpNeeded',
    'hint',
    'incorrect',
    'inProgress',
    'mastered',
    'notStarted',
    'rectified',
    // coaching
    'coach',
    'lesson',
    'question',
    'quiz',
    // content
    'app',
    'audio',
    'channel',
    'doc',
    'document',
    'exercise',
    'topic',
    'video',
    'html5',
    // users
    'classroom',
    'group',
    'people',
    'permission',
    'person',
    // misc
    'dot',
    'error',
    // UI
    'back',
    'forward',
    'clear',
    'dropdown',
    'language',
    'logout',
    'menu',
    'search',
  ];

  export default {
    name: 'KIcon',
    mixins: [themeMixin],
    props: {
      icon: {
        type: String,
        required: true,
        validator(value) {
          return iconTypes.includes(value);
        },
      },
      /**
       * color to apply to the icon
       */
      color: {
        type: String,
        required: false,
      },
      // tracking
    },
    computed: {
      style() {
        if (this.color) {
          return { fill: this.color };
        }
        return { fill: this.$themeTokens.text };
      },
      flip() {
        return this.isRtl ? 'rtl-icon' : null;
      },
    },
  };

</script>


<style lang="scss" scoped>

  svg {
    position: relative;
    top: 0.125em;
    width: 1.125em;
{'fraction_non_alphanumeric': 0.2106864037311163, 'fraction_numerical': 0.002433336712967657, 'mean_word_length': 3.441242683475912, 'pattern_counts': {'":': 0, '<': 98, '<?xml version=': 0, '>': 98, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2392805', 'n_tokens_mistral': 3399, 'n_tokens_neox': 3340, 'n_words': 651}