uni-app X 中如何实现动态绑定组件？

引入三方组件在uni_modules中，现在想封装一个组件开放一个属性名name，根据这个名称动态绑定三方组件。
<template>
<view>
<component :is="componentName" />
</view>
</template>

<script>
export default {
name: 'Icon',
props: {
name: {
type: String,
required: true
}
},
computed: {
componentName() {
// 在 uni-app X 中，根据 name 属性动态生成三方组件的名称
return fr-icon-${this.name};
}
}
}
</script>

父组件如下使用没效果
<template>
<view>
<icon name="name1" />
<icon name="name2" />
</view>
</template>

<script>
import Icon from '@/components/Icon.vue';

export default {
components: {
Icon
}
}
</script>

哪位大神解释下哪里出问题？