Javascript UPPY.js图标部分中的HTML元素不会呈现

我正在制作一个自定义插件，但是我发现如果我返回一个html结构来生成一个自定义图标，它不会解释html

类云扩展插件{
建造商（uppy，opts）
{
超级（uppy，opts）
this.id=opts.id | |“Cloud”
this.title=opts.title | |“云”
this.type='收单机构'
//this.prepareUpload=this.prepareUpload.bind（this）
this.icon=（）=>{
//aria controls=“uppy仪表板内容面板--云”
log（“[pluginCloud]图标”，此图标）；
让html=`Hola`；
返回html；
}
this.defaultLocale={
字符串：{}
}
log（“[pluginCloud]constructor”，this）；
这个。i18nInit（）；
this.install=this.install.bind（this）
//this.setPluginState=this.setPluginState.bind（this）
this.render=this.render.bind（this）
}
prepareUpload（文件ID）{
log（'[pluginCloud]prepareUpload'）；
返回承诺。解决（）
}
安装（）{
log（“[pluginCloud]install”）；
//this.uppy.addPreProcessor（this.prepareUpload）
const target=this.opts.target
如果（目标）{
这个挂载（目标，这个）
}
}
卸载（）{
log（“[plugingloud]uninstall”）；
//this.uppy.removePreProcessor（this.prepareUpload）
这个。卸载（）
}
i18nInit（）{
log（“[pluginCloud]Translate”）；
}
}
设uppy=uppy.Core（）；
//设置仪表板
让仪表板=
{
id:“视频”，
内联：错，
目标:"身体",，
触发器：“#打开"模式"视频”，
语言环境：{strings:UploadFile.LANG_ES}，
元字段：[
{id:'name'，name:'Nombre'，占位符：'file name'}，
{id:'description'，name:'Descripción'，占位符：“”
],
}
//仪表板
uppy.use（uppy.Dashboard，Dashboard）；
//自定义插件
使用（云、{
目标：Uppy.仪表板，
公司网址：'http://cloud.localhost'
});

我还注意到，每次单击按钮，它都会再次渲染

---

我曾尝试用JS直接添加html，但它不能正确地解决问题

我已经能够通过添加额外的css来显示图标来解决问题

---

我需要在“after”字段中添加一个图像来显示它。

我已经能够通过添加额外的css来显示图标来解决这个问题

---

我需要在“after”字段中添加一个图像来显示它。

是完整的代码我添加了更多的代码。我认为是库本身不允许插件直接出现在前端。您必须使用preact v8.2.9进行渲染，因为完整的代码我添加了更多的代码。我认为是库本身不允许插件直接出现在前端。您必须使用preact v8.2.9进行渲染

class Cloud extends Plugin {
        
        constructor (uppy, opts) 
        {
            super(uppy, opts)

            this.id = opts.id || 'Cloud' 
            this.title = opts.title || 'Cloud'
            this.type = 'acquirer'
            //this.prepareUpload = this.prepareUpload.bind(this)
            this.icon = () => {
                //aria-controls="uppy-DashboardContent-panel--Cloud"
                console.log('[ pluginCloud ] icon',this);

                let html = `<div>Hola</div>`; 
             
                return html;
            }

            this.defaultLocale = {
                strings: {}
            }

            console.log('[ pluginCloud ] constructor', this);

            this.i18nInit();
            this.install = this.install.bind(this)
            //this.setPluginState = this.setPluginState.bind(this)
            this.render = this.render.bind(this)
        
        }
      
        prepareUpload (fileIDs) {
            console.log('[ pluginCloud ] prepareUpload'); 
            return Promise.resolve()
        }
      
        install () {
            console.log('[ pluginCloud ] install');
            //this.uppy.addPreProcessor(this.prepareUpload)
            const target = this.opts.target
            if (target) {
            this.mount(target, this)
            }
        }
      
        uninstall () {
            console.log('[ pluginCloud ] uninstall');
            //this.uppy.removePreProcessor(this.prepareUpload)
            this.unmount()
        }

        i18nInit () {
            console.log('[ pluginCloud ] Translate');
        }
    }

    let uppy = Uppy.Core();

    // Setting dashboard
    let dashboard = 
    {
        id:'video',
        inline: false,
        target: 'body',
        trigger: '#open_modal_video',
        locale: {strings:UploadFile.LANG_ES},
        metaFields : [ 
            { id :  'name' , name :  'Nombre' , placeholder :  'file name'  }, 
            { id :  'description' , name :  'Descripción' , placeholder :  ''  } 
        ],
        
    }
    

    // Dashboard
    uppy.use(Uppy.Dashboard, dashboard);

    //Custom plugin
    uppy.use(Cloud,{
        target: Uppy.Dashboard,
        companionUrl: 'http://cloud.localhost'
    });

[aria-controls="uppy-DashboardContent-panel--Cloud"]::before
{
  content: '';
  background: #00BCD4;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  overflow: hidden;
}