Vue.js VueJS单文件组件简要显示未设置样式的SVG

我有一个非常简单的Vue单文件组件（使用Vue 2.4.2），它包含一个使用一组预定义SVG符号的SVG图像，并且工作得非常好

我注意到，在应用组件（无范围）样式之前，图标会短暂显示为未设置样式。值得注意的是：

• 在主.scss文件中包含scss时，不会出现问题
• 使用

  v-clope

  没有效果
• 发生在最新的Chrome、FF和Safari（MacOS）上

Q：我显然可以使用将其包含在主scss文件中的解决方法，但我想知道这是SVG样式特定的还是使用组件样式时延迟是正常的？

我的组件（省略附加SCS）：

导出默认值{
名称：'图标'，
道具：{
图标：{type:String}，
旋转：{type:Boolean，默认值：false}
},
计算：{
符号（）{
返回this.icon？“#”+this.icon:”
}
}
}
@导入“../style/variables”；
.图标{
显示：内联块；
宽度：$图标大小；
高度：$图标大小；
线高：1；
svg{
宽度：100%；
身高：100%；
填充：当前颜色；
}
...

<template>
  <i class="icon" v-if="symbol" :class="{'icon-spin': spinning}">
    <svg>
      <use v-bind:xlink:href="symbol"></use>
    </svg>
  </i>
</template>
<script>

export default {
  name: 'Icon',
  props: {
    icon: {type: String},
    spinning: {type: Boolean, default: false}
  },
  computed: {
    symbol () {
      return this.icon ? '#' + this.icon : ''
    }
  }
}
</script>
<style lang="scss">

@import '../../style/variables';

.icon {
  display: inline-block;
  width: $icon-size;
  height: $icon-size;
  line-height: 1;

  svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
  }

  ...