How It Works

# createFromIconfontCN

@ant-design/icons/es/components/IconFont.js 对于使用 iconfont.cn 的用户，通过设置 createFromIconfontCN 方法参数对象中的 scriptUrl 字段， 即可轻松地使用已有项目中的图标。

  • 使用 iconfont.cn (opens new window) 提供的 Symbol 地址
  • 依次以<script>插入<body>，加载脚本，脚本中将图像的<svg>插入<body>；这里用customCache:Set<string>做缓存避免重复加载
    • 以字符串形式定义svg内容
    • 根据<script>属性data-injectcss判断是否插入默认iconfont样式
    • 判断文档加载完毕后执行svg dom的插入
      • document.readyState 已经是"complete", "loaded", "interactive"
      • 监听DOMContentLoaded事件 / 监听onreadystatechange事件document.readyState变为complete
    • svg dom的插入
      • 借助div为svg字符串构建dom document.createElement("div")).innerHTML = svgText
      • 清除svg字符串变量内存 svgText = null
      • 设置svg隐藏 aria-hidden="true" style="position:absolute; width:0; height:0; overflow:hidden;"
      • 在body中插入svg
  • 定义组件返回

基本形式：

<!-- 插入icon定义 -->
<svg aria-hidden="true" style="position:absolute; width:0; height:0; overflow:hidden;">
    <symbol id="icon_1"><path /></symbol>
    <symbol id="icon_2"><path /></symbol>
    <symbol id="icon_3"><path /></symbol>
</svg>

<!-- icon使用 -->
<svg>
    <use xlink:href="#icon_1"/>
</svg>
最后更新: 1/12/2023, 1:44:05 PM

← dumi →