vite-svg-loader icon indicating copy to clipboard operation
vite-svg-loader copied to clipboard

Attribute Inheritance not working

Open hungify2022 opened this issue 1 year ago • 0 comments

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>

hungify2022 avatar Mar 25 '23 16:03 hungify2022