Javascript 如何在Vue 2.5中从带有html标记的字符串创建VNode？

我正在尝试创建一个功能组件来呈现羽毛图标包，但我无法理解最后一步。以下是我得到的：

这是我的羽毛图标.vue组件

<script>
const feather = require("feather-icons");

export default {
  components: {},
  props: {
    type: {
      required: true,
      type: String
    }
  },
  mounted() {},
  render(createElement) {
    return createElement(
      "svg",
      {attrs: feather.icons[this.type].attrs },
      feather.icons[this.type].contents
    );
  }
};
</script>

但是，我的第三个参数feather.icon[this.type].contents的结果是一个字符串，其中包含svg标记内的“innerHTML”：

"<line x1="6" y1="3" x2="6" y2="15"></line><circle cx="18" cy="6" r="3"></circle><circle cx="6" cy="18" r="3"></circle><path d="M18 9a9 9 0 0 1-9 9"></path>"

“”

所以我的问题是，如何将feather.icon[this.type].contents转换为一组vnode

---

我尝试过使用DOMParser和parseFromString，但没有成功。有什么想法吗？

您可以使用的

domProps

属性

此对象还允许您绑定普通HTML属性以及 DOM属性，如innerHTML（这将取代v-html） 指令）

这里有一个例子

console.clear（）
常量内容=`
`
新Vue({
el:“应用程序”，
渲染（h）{
返回h（“svg”，{domProps:{innerHTML:content}}）
}
})

---

这就像一个符咒！谢谢我将编辑我的原始问题，有一个打字错误。应该是“contents”，而不是我键入的“content”。我也尝试过domProps方法，但因为这个原因没有起作用。

"<line x1="6" y1="3" x2="6" y2="15"></line><circle cx="18" cy="6" r="3"></circle><circle cx="6" cy="18" r="3"></circle><path d="M18 9a9 9 0 0 1-9 9"></path>"