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]})
)
}
})
}
将图标组件动态渲染生成，就可以了。
