I am currently working on a component that loads an SVG when utilized. However, I have encountered an issue where it does not load in the DOM. Upon inspection of the element, it always displays as shadow-root (closed).
Interestingly, it does show up when embedded in an image. The reason I prefer using SVG over images is because I want the ability to change the color dynamically.
Below is how the inspected element appears:
<svg aria-hidden="true">
<use xlink:href="/img/apartment.908eb4d5.svg#apartment">
#shadow -root (closed)
</use>
</svg>
Usage
<SvgIcon icon-name="apartment" />
Component
<template>
<svg aria-hidden="true">
<use :xlink:href="require(`@/icons/${iconName}.svg`)+ `#${iconName}`"></use>
</svg>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: "SvgIcon",
props: {
iconName: {
type: String,
default: "book"
}
}
});
</script>
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
<path fill="#000000" d="M14 6h1v1h-1v-1z"></path>
...
</path>
</svg>