字符串内的Vue MDI图标

问题描述

如何在字符串中使用mdi图标,并以一种方法将其返回,该方法将作为聚集表中单元的组成部分。

import { mdiPencil } from "@mdi/js";
data(){
  return{
    mdiPencil
  }
}
methods:{
 viewButton() {
   return `<v-btn icon><v-icon>{{ mdiPencil }}</v-icon></v-btn>`;
 },}

以上是我的方法。现在,它在聚集表单元格中将{{mdiPencil}}显示为字符串,而不显示图标。如何显示图标?

解决方法

您可以尝试

return `<svg role="img" class="v-icon__svg">
        <path d="${mdiPencil}"></path>
      </svg>`;