I'm not experiencing any issues in the browser, I am getting the desired output. However, why does this keep showing up in the editor terminal?
Any assistance would be greatly appreciated.
Error - No Default Export:
The module "/vue3/src/components/TestIcon.vue" does not have a default export.
This is how my component looks:
TestIcon.vue
<template>
<span v-html="svg" class="icon-wrapper" ref="iconWrapper"></span>
</template>
<script setup lang="ts">
import type { tycon } from "test-icons";
import { computed, onMounted, ref } from "vue";
import { completeDataSet } from "test-icons";
const props = defineProps<{
icon: tycon;
class: string;
color: string;
height: string;
width: string;
}>();
const iconPassed = completeDataSet.find((item) => item.name === props.icon);
const svg = computed(() => iconPassed?.data);
const iconWrapper = ref<HTMLElement | null>(null);
onMounted(() => {
iconWrapper.value?.lastElementChild?.firstElementChild?.setAttribute(
"class",
props.class
);
iconWrapper.value?.firstElementChild?.setAttribute(
"style",
"width:" + props.width + "px;height:" + props.height + "px;"
);
iconWrapper.value?.firstElementChild?.firstElementChild?.setAttribute(
"fill",
props.color
);
});
</script>
App.vue:
<template>
<main>
<TestIcon :icon="'icon_test'" :class="'tests'" :height="40" :width="40" />
</main>
</template>
<script lang="ts">
import TestIcon from "@/components/TestIcon.vue";
export default {
components: {
TestIcon,
}
};
</script>