import { PropType, defineComponent } from "vue";
import "./index.css";

export default defineComponent({
	name: "TheIcon",
	props: {
		iconClassName: {
			type: String,
			default: "",
		},
		color: {
			type: String,
			default: "",
		},
		size: {
			type: Array as PropType<string[]>,
			default: ["1em", "1em"],
		},
	},
	setup(props) {
		let width = "1em";
		let height = "1em";
		if (Array.isArray(props.size)) {
			width = props.size[0];
			height = props.size[1];
		} else {
			width = props.size;
			height = props.size;
		}
		return () => (
			<svg style={{ width, height }} class="svg-icon" aria-hidden="true">
				<use xlinkHref={"#" + props.iconClassName} fill={props.color} />
			</svg>
		);
	},
});
