想请教一下如何支持加载 iconfont 上的远程图标？

[liuxinqiong]

查看项目中图标都是使用 icons 下内置图标，目前我使用 createFromIconfontCN 加载远程自定义图标，会报 ssr 错误。

感谢！

[yyong008]

提供一种解决方案：

export function Component() {
  const MyIcon = createFromIconfontCN({
    scriptUrl: "//at.alicdn.com/t/c/font_3539233_0ywt1ow3ehe.js", // generate in iconfont.cn
  });
  return (
    <div className="flex flex-col py-[140px] w-[60vw] min-h-[80vh]">
     <MyIcon type="icon-aliyun" />
    </div>
  );
}

MyIcon 在 Component 组件内部创建。这种方式需要加载 js，图标会闪一下，没有 ssr 直接渲染效果好啊

[liuxinqiong]

感谢回复。

这样还真是就不会报错了，只是 DX 和 UX 都下降了。

可以解释一下为什么在组件内部创建就不会报错了吗？ 再次感谢

[yyong008]

以解释一下为什么在组件内部创建就不会报错了吗？ 再次感谢

应该不会报错，而是不显示。

createFromIconfontCN 原理：会在浏览器环境中创建一个带有你指定 url 的 script 标签，如果在浏览器环境就插入 body 中。在组件 Component 中就能保证在浏览器环境中添加这个脚本。这其实是一个 dom 操作发生在有 document 之后，因为 remix 是ssr 的所以 一般情况下 hydrate 之后才合适进行 dom 操作。可以选一个更加好的位置提前加载 js。 ssr 中还是推荐静态的 icon。

[liuxinqiong]

嗯嗯，浏览器控制台会报 hydrate 错误，然后图标不显示。