SVG外部使用，vue不工作，尽管chrome中的inspect元素显示<；使用xlink:href>；它是正确链接的

我随后在vue中创建了图标组件（使用webpack模板）。图标组件是从网站复制粘贴。而使用图标组件的Header.vue位于同一目录中，如下所示：

<template>
  <header class="main-header">
    /** ICON COMPONENT **/
    <icon width="100" height="100" :glyph="Logo"></icon>

    <div class="main-header-row">
      <div class="search-box">
        <input type="search" placeholder="search..."/>
        <button type="submit" class="searchButton" />
        <i class="search-icon"></i>
      </div>
      <div class="main-header-nav">
        <ul>
          <li><a href="#">home</a></li>
          <li><a href="#">projecten</a></li>
          <li><a href="#">klanten</a></li>
          <li><a href="#">partners</a></li>
          <li><a href="#">tickets</a></li>
          <li><a href="#">tools</a></li>
          <li><a href="#">meer</a></li>
        </ul>
      </div>
      <div class="main-header-alerts-and-account">
        <ul>
          <li><a href="#">dean alert</a></li>
          <li><a href="#">meldingen</a></li>
          <li><a href="#">account</a></li>
        </ul>
      </div>
    </div>
    <icon width="500" height="200" :glyph= "Logo"></icon>
  </header>
</template>

<script>
  import Icon from './Icon'
  import Logo from '../assets/icons/logo.svg'

  export default {
    name: 'header',
    components: {
      Icon
    },
    data() {
      return { Logo }
    }
  }
</script>

<style scoped>
  .main-header-row,
  .main-header-nav > ul,
  .main-header-alerts-and-account > ul
  {
    display: flex;
    flex-wrap: wrap;
  }

  .main-header-row
  {
    justify-content: space-between;
  }
  .main-header-nav > ul,
  .main-header-alerts-and-account > ul
  {
    list-style: none;
  }

  .main-header-nav > ul > li,
  .main-header-alerts-and-account > ul >li
  {
    list-style: none;
    padding: 5px;
  }

  .search-box
  {
    padding-top: 24px;
  }
</style>

/**图标组件**/














从“./图标”导入图标
从“../assets/icons/Logo.svg”导入徽标
导出默认值{
名称：'标题'，
组成部分：{
偶像
},
数据（）{
返回{Logo}
}
}
.主标题行，
.主收割台导航>ul，
.主标题警报和帐户>ul
{
显示器：flex；
柔性包装：包装；
}
.主标题行
{
证明内容：之间的空间；
}
.主收割台导航>ul，
.主标题警报和帐户>ul
{
列表样式：无；
}
.主收割台导航>ul>li，
.主标题警报和帐户>ul>li
{
列表样式：无；
填充物：5px；
}
.搜索框
{
填充顶部：24px；
}

在Chrome上检查元素（svg）时，但我无法在浏览器中看到

在Icon组件中使用了

而不是

，并且工作正常