Open hungify2022 opened 1 year ago
Hi! I try to implement Icon Base component based on the prop name but attributes(class, width, height) are not inherited.
Icon Base
I tried instead defineAsyncComponent(() => import(`../assets/${props.name}.svg?component`)) with any component it's perfectly fine.
defineAsyncComponent(() => import(`../assets/${props.name}.svg?component`))
app.mixin({ inheritAttrs: false, });
<script lang="ts"> export default { inheritAttrs: true, }; </script> <script lang="ts" setup> import { defineAsyncComponent, SVGAttributes, computed } from "vue"; interface IconProps extends SVGAttributes { name: "vue"; } const props = defineProps<IconProps>(); const currentIcon = computed(() => defineAsyncComponent(() => import(`../assets/${props.name}.svg?component`)) ); </script> <template> <Component :is="currentIcon" class="icon" /> </template> <style scoped> .icon { display: inline-block; fill: currentColor; vertical-align: middle; flex-shrink: 0; user-select: none; } </style>
<script setup lang="ts"> import IconBase from "./components/IconBase.vue"; </script> <template> <IconBase name="vue" class="red" width="50" height="50" /> </template>
Hi! I try to implement
Icon Base
component based on the prop name but attributes(class, width, height) are not inherited.I tried instead
defineAsyncComponent(() => import(`../assets/${props.name}.svg?component`))
with any component it's perfectly fine.Reproduction
main.ts
IconBase.vue
App.vue