vite-svg-loader
vite-svg-loader copied to clipboard
Attribute Inheritance not working
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
app.mixin({
inheritAttrs: false,
});
IconBase.vue
<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>
App.vue
<script setup lang="ts">
import IconBase from "./components/IconBase.vue";
</script>
<template>
<IconBase name="vue" class="red" width="50" height="50" />
</template>