import { h, defineComponent } from "vue";

import svg from "./mdi.js";

const SvgIcon = defineComponent({
  name: "SvgIcon",
  props: {
    icon: {
      type: String,
      required: true,
    },
    size: {
      type: [Number, String],
      default: 24,
    },
    color: {
      type: String,
      default: "currentColor",
    },
    class: {
      type: String,
      default: undefined,
    },
    viewBox: {
      type: String,
      default: "0 0 24 24",
    },
    flip: {
      type: String,
      default: undefined,
    },
    rotate: {
      type: Number,
      default: undefined,
    },
  },
  setup(props) {
    return () =>
      h(
        "svg",
        {
          class: props.class,
          viewBox: props.viewBox,
          width: props.size,
          height: props.size,
          fill: props.color,
          style: {
            transform: `rotate(${props.rotate}deg) ${props.flip}`,
          },
        },
        h("path", { d: svg[props.icon] })
      );
  },
});

export { SvgIcon };