chamilo-lms/assets/vue/components/basecomponents/BaseIcon.vue

<template>
  <i :class="iconClass" aria-hidden="true" />
</template>

<script setup>
import { computed } from "vue";
import { chamiloIconToClass } from "./ChamiloIcons";

const props = defineProps({
  icon: {
    type: String,
    required: true,
    validator: (value) => {
      if (typeof value !== "string") {
        return false;
      }
      return Object.keys(chamiloIconToClass).includes(value);
    },
  },
  size: {
    type: String,
    default: "normal",
    validator: (value) => {
      if (typeof value !== "string") {
        return false;
      }
      return ["big", "normal", "small"].includes(value);
    },
  },
});

const iconClass = computed(() => {
  let iconClass = chamiloIconToClass[props.icon] + " ";
  switch (props.size) {
    case "big":
      iconClass += "text-3xl/4 ";
      break;
    case "normal":
      iconClass += "text-xl/4 ";
      break;
    case "small":
      iconClass += "text-base/4 ";
      break;
  }
  return iconClass;
});
</script>