<template>
	<span :style="getStyles" v-on="$listeners" class="wcc-icon-base">
		<component :is="icon" :width="width" :height="height" :color="color">
		</component>
	</span>
</template>

<script>
import logo from "./cookieyes";
import chat from "./chat";
import help from "./help";
import rocket from "./rocket";
import blank from "./blank";
import css from "./css";
import note from "./note";
import layout from "./layout";
import close from "./close";
import edit from "./edit";
import trash from "./trash";
import spinner from "./spinner";
import editAlt from "./edit-alt";
import cookiePolicy from "./cookie-policy";
import privacyPolicy from "./privacy-policy";
import search from "./search";
import general from "./general";
import successCircle from "./success-circle";
import successCircleMinor from "./success-circle-minor";
import errorCircleMinor from "./error-circle-minor";
import connect from "./connect";
import crown from "./crown";
import wtlogo from "./webtoffee";
import avatar from "./avatar";
import info from "./info";
import activeCookie from "./active-cookie";
import inactiveCookie from "./inactive-cookie";
import scanner from "./scanner";
import loading from "./loading";
import exclamationTriangle from "./exclamation-triangle";
import arrow from "./arrow";
import copyIcon from "./copy-icon";
import angleRight from "./angle-right";
import localhost from "./localhost";
import exclamationCircle from "./exclamation-circle";
import list from "./list";
import eye from "./eye";
import accordionArrow from "./accordion-arrow";
import checkCircle from "./check-circle";
import exclamationCircleMinor from "./exclamation-circle-minor";


export default {
	name: "BaseIcon",
	props: {
		icon: {
			type: String,
			default: "logo",
		},
		width: {
			type: String,
			default: "18px",
		},
		height: {
			type: String,
			default: "100%",
		},
		color: {
			type: String,
			default: "currentColor",
		},
	},
	computed: {
		getStyles() {
			return {
				height: this.height + "px",
				width: this.width + "px",
			};
		},
	},
	components: {
		logo,
		chat,
		help,
		rocket,
		blank,
		note,
		css,
		layout,
		close,
		edit,
		trash,
		spinner,
		editAlt,
		cookiePolicy,
		privacyPolicy,
		search,
		general,
		successCircle,
		connect,
		crown,
		wtlogo,
		avatar,
		info,
		activeCookie,
		inactiveCookie,
		scanner,
		loading,
		exclamationTriangle,
		arrow,
		copyIcon,
		angleRight,
		localhost,
		exclamationCircle,
		list,
		eye,
		successCircleMinor,
		errorCircleMinor,
		accordionArrow,
		checkCircle,
		exclamationCircleMinor,
	},
};
</script>

<style lang="scss" scoped>
.wcc-icon-base {
	display: inline-block;
}
</style>
