首页 > 其他分享 >ant design使用本地IconFont文件

ant design使用本地IconFont文件

时间:2024-09-12 15:02:22浏览次数:9  
标签:官网 xxx IconFont js ant design scriptUrl font

先参考这个官网的示例 :
官网示例:通过设置 createFromIconfontCN 方法参数对象中的 scriptUrl 字段, 可以使用 iconfont.cn 项目中的图标。
在iconfont.cn网站使用symbol方式生成在线链接。

 

但官网的说明有个问题,就是全部使用的是网络引用,有时候我们需要的环境可能并不是一个有外网的环境。所以我们需要将网络引用改为本地引用。

改为本地引用的方法也很简单。
将 //at.alicdn.com/t/font_xxx.js 这个文件下载下来,放在public 目录下面,例如存为font_xxx.js 然后

import { Icon } from 'antd';

const IconFont = Icon.createFromIconfontCN({
  // scriptUrl: '//at.alicdn.com/t/font_xxx.js'
   scriptUrl: 'font_xxx.js'
});

export default IconFont;

 

标签:官网,xxx,IconFont,js,ant,design,scriptUrl,font
From: https://www.cnblogs.com/Im-Victor/p/18410212

相关文章

  • Power Designer 连接 PostgreSQL 逆向工程生成pd表结构操作步骤以及过程中出现的问题
    、使用PowerDesigner16.5链接pg数据库1.1、启动PD.选择CreateModel…。 1.2、选择Modeltypes/PhysicalDataModelPhysicalDiagram:选择pgsql直接【ok】  1.3、选择connect在工具栏选择Database-Connect…快捷键:ctrl+shift+N.如下图:  1.4、选择配置连接......
  • PowerDesigner 逆向工程 Could not Initialize JavaVM!
    原项目的大量的表,使用PowerDesigner进行逆向工程。提示CouldnotInitializeJavaVM! 网上找到原因,PowerDesigner不可以使用64位JDK环境! 有一种不修改环境变量的方法在PowerDesigner目录下,建立一个启动批处理,如:startup.bat,在其中配置JAVA_HOME、CLASSPATH,如下例所示: ......
  • The Teacher's Day gift a future teacher wants
    `#includeincludevoidprintBanner();voidprintHeart();voidprintFlower();intmain(){std::cout<<"\n";printBanner();std::cout<<std::endl;printFlower();std::cout<<std::endl;printHeart();return0;}`点击查看......
  • FIT9137 An Enterprise Network Design
    FIT9137Assignment2SubmissionGuidelinesAssignment2 isworth 25% of theUnit Marks.Deadline:Week-8–Friday, 13th September 2024, 11:55PM (Melbournetime)● Submissionformatanddetails: You must submit exactlytwo files with the ......
  • SQL题:某外卖平台有users(用户表),restaurants(餐厅表),orders(订单表)
    一、进行表的创建--用户表createtableifnotexistsusers( user_idint,user_namestring,passwordstring,emailstring,phone_numberstring,addressstring)rowformatdelimitedfieldsterminatedby',';--餐厅表createtableif......
  • Trigger源码分析 -- ant-design-vue系列
    Trigger源码分析–ant-design-vue系列1概述源码地址:https://github.com/vueComponent/ant-design-vue/blob/main/components/vc-trigger/Trigger.tsx在源码的实现中,Trigger组件主要有两个作用:使用Portal组件,把Popup组件传送到指定的dom下,默认是body。为target节点绑......
  • pydantic 和 sqlalchemy 之间的模型转换
    字段dict#Assuming`session`isyourSQLAlchemysessionuser_instance=session.query(User).first()#ConverttoPydanticmodeldapter=TypeAdapter(User,UserPydantic)user_pydantic=adapter.to_pydantic(user_instance)#也可以UserPydantic.model_validate......
  • 一键下载,轻松应对工作挑战:Adobe InDesign 2023 最新版软件下载
    ##一键下载,轻松应对工作挑战:AdobeInDesign2023最新版软件下载在当今快节奏的工作环境中,效率和便捷性是成功的关键。无论是设计师、出版商还是营销人员,都需要一款功能强大且易于使用的排版软件来应对各种工作挑战。AdobeInDesign2023正是这样一款软件,它凭借其强大的功能和不......
  • dominant和predominant的区别
    dominant是主宰,决定predominant是占据优势(这种优势通常是一时的)显然,占据优势并不一定能主宰一切。dominant语气更强。 来源:What'sthedifferencebetweendominantandpredominantinEnglish?-Quorameaning-Whatisthedifferencebetween"dominant"and"predomi......
  • 解决 蚁剑AntSword 连接后 ,命令回显 有问题 (ret=127) 的方法
    在渗透测试过程中,我们在连接上蚁剑后,想要进行 命令执行查看一些信息,发现无论输入任何指令,返回的信息只有ret=127,要解决这种问题,为大家提供一个解决方案。蚁剑软件,命令回显只有ret=127​这种情况,可能是因为禁用了某些函数,上传一个php文件,查看一下​......