svg use渲染问题？

Question

有以下的svg图片

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
  <circle cx="10" cy="10" r="8" stroke="#00A870" stroke-width="1.2"/>
  <path d="M6 10.1111L8.66667 12.7778L14 7" stroke="#00A870" stroke-width="1.2"/>
</svg>

在vscode中预览的时候颜色是正常的，如下

但使用封装的图标组件、

<template>
  <svg
    aria-hidden="true"
    :class="`${svgClass} focus:outline-none svg-icon`"
    :width="`${width}`"
    :height="`${height}`"
  >
    <use v-bind="{ 'xlink:href': `#${computedSvgName}`}" />
  </svg>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import VueTypes from 'vue-types'
import ids from 'virtual:svg-icons-names'

export default defineComponent({
  name: 'Icon',
  props: {
    svgName: VueTypes.string.def('').isRequired,
    svgClass: VueTypes.string.def(''),
    width: VueTypes.oneOfType([VueTypes.number, VueTypes.string]).def(24),
    height: VueTypes.oneOfType([VueTypes.number, VueTypes.string]).def(24)
  },
  setup (props) {
    const computedSvgName = computed(() => {
      return ids.find((el) => el.match(/_([\w-]+)$/)[1] === props.svgName)
    })
    return {
      computedSvgName
    }
  }
})
</script>

<style lang="scss" scoped>
.svg-icon {
  @apply inline-block;
}
</style>

在项目中引入调用之后，发现外层的circle无论如何都会是灰色

但将该svg作为background的话，不会有此问题

Answer 1

<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 20 20">
  <circle cx="10" cy="10" r="8" stroke="currentColor" stroke-width="1.2"/>
  <path d="M6 10.1111L8.66667 12.7778L14 7" stroke="currentColor" stroke-width="1.2"/>
</svg>