Vue SVG component not loading in DOM

Question

Hi I'm trying to make a component that loads an svg when used. But the problem is it does not load in the DOM. It always display shadow -root (closed) when I inspect the element.

But it does display when used in image. Reason why I want to use svg than image is I want to be able to change the color.

The inspected element appears as:

<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 fill="#000000" d="M14 8h1v1h-1v-1z"></path>
<path fill="#000000" d="M14 10h1v1h-1v-1z"></path>
<path fill="#000000" d="M14 12h1v1h-1v-1z"></path>
<path fill="#000000" d="M14 16h1v1h-1v-1z"></path>
<path fill="#000000" d="M14 14h1v1h-1v-1z"></path>
<path fill="#000000" d="M6 6h1v1h-1v-1z"></path>
<path fill="#000000" d="M6 8h1v1h-1v-1z"></path>
<path fill="#000000" d="M6 10h1v1h-1v-1z"></path>
<path fill="#000000" d="M6 12h1v1h-1v-1z"></path>
<path fill="#000000" d="M6 16h1v1h-1v-1z"></path>
<path fill="#000000" d="M6 14h1v1h-1v-1z"></path>
<path fill="#000000" d="M4 6h1v1h-1v-1z"></path>
<path fill="#000000" d="M4 8h1v1h-1v-1z"></path>
<path fill="#000000" d="M4 10h1v1h-1v-1z"></path>
<path fill="#000000" d="M4 12h1v1h-1v-1z"></path>
<path fill="#000000" d="M4 16h1v1h-1v-1z"></path>
<path fill="#000000" d="M4 14h1v1h-1v-1z"></path>
<path fill="#000000" d="M8 6h1v1h-1v-1z"></path>
<path fill="#000000" d="M8 8h1v1h-1v-1z"></path>
<path fill="#000000" d="M8 10h1v1h-1v-1z"></path>
<path fill="#000000" d="M8 12h1v1h-1v-1z"></path>
<path fill="#000000" d="M8 16h1v1h-1v-1z"></path>
<path fill="#000000" d="M8 14h1v1h-1v-1z"></path>
<path fill="#000000" d="M18.5 19h-0.5v-13.5c0-0.763-0.567-1.549-1.291-1.791l-4.709-1.57v-1.64c0-0.158-0.075-0.307-0.202-0.401s-0.291-0.123-0.442-0.078l-9.042 2.713c-0.737 0.221-1.314 0.997-1.314 1.766v14.5h-0.5c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h18c0.276 0 0.5-0.224 0.5-0.5s-0.224-0.5-0.5-0.5zM16.393 4.658c0.318 0.106 0.607 0.507 0.607 0.842v13.5h-5v-15.806l4.393 1.464zM2 4.5c0-0.329 0.287-0.714 0.602-0.808l8.398-2.52v17.828h-9v-14.5z"></path>
</svg>

Does it mean I also need to add id attribute in the svg file? — PenAndPapers
– PenAndPapers, Commented Apr 27, 2021 at 7:52

blackgreen · Accepted Answer · 2021-04-27 10:04:50Z

1

The <use> element copies the node referenced in href attribute. If you use a fragment link, you must make sure the svg file you load has the appropriate id attribute.

<svg id="apartment" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
    <path fill="#000000" d="M14 6h1v1h-1v-1z"></path>
    ...
</svg>

Also xlink:href is deprecated.

answered Apr 27, 2021 at 10:04

blackgreen♦

46.9k29 gold badges171 silver badges162 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue SVG component not loading in DOM

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related