React中在组件在引入iconfont(第三方js)

原创于 2021-06-22 11:37:28 发布 · 535 阅读

0 ·

CC 4.0 BY-SA版权

React 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了在腾讯连连应用中如何解决因缺少index.html而导致无法引入iconfont.js的问题。通过在App模板下添加JavaScript代码动态创建并加载字体库脚本，实现了图标在模板中的正常使用。具体步骤包括创建script元素，设置类型和异步属性，指定src为iconfont的JS文件，并在模板中使用svg结合use标签展示图标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近玩腾讯连连的，打算使用iconfont上面的图标，由于没有index.html导致无法引入js。解决方法如下：

在App模板下面增加：

    //加载js
    var script = document.createElement('script')
    script.type = 'text/javascript'
    script.async = true
    script.src = '//at.alicdn.com/t/font_2624852_1vuu69zd0vl.js'
    // script.onload = resolve
    script.onload = function () {
        console.log("load iconfont script.....")
    }
    document.head.appendChild(script)

使用在模板中图标：

 <svg className="icon" aria-hidden="true">
     <use xlinkHref="#icon-kaiguan"></use>
 </svg>