Vue下svg图标打包后不显示的问题

Vue3，用svg文件做图标，开发环境下好好的，打包后图标不能显示。
原来的代码如下：

import svgIds from 'virtual:svg-icons-names'

  // 注册svg图标
  for (const i in svgIds) {
    app.component(svgIds[i], {
      data() {
        return {
          name: '#'+svgIds[i]
        }
      },
      template: `<svg class="icon"><use :xlink:href="name" /></svg>`
    })
  }

在开发环境下正常，打包后不能显示图标。改为如下代码：

import svgIds from 'virtual:svg-icons-names'
import { h } from 'vue'

  // 注册svg图标
  for (const i in svgIds) {
    app.component(svgIds[i], {
      name: svgIds[i],
      render() {
        return h('svg',
          { class: 'icon', 'aria-hidden': 'true'},
          h('use', {href:'#'+svgIds[i]})
        )
      }
    })
  }

将图标组件动态渲染生成，就可以了。