利用symbol模式引入阿里云图标库, 扩展项目图标

问题

在使用arco.design/ant design UI框架内置的图标时，发现部分图标没有，或者只要设计师在图标库中添加新icon ，就需要手动再重复一次之前的 downdload 代码操作，替换现有的文件。 所以不采用本地引入的方式，直接采用引入远程连接。

解决

我们可以利用官方提供的 自定义 font 图标定制自己项目的图标。

1、选择自己想要的图标添加入库，然后就可以在右上角的仓库中查看，随后点击添加项目即可看到自己创建的仓库(没有的可以创建自己项目的独立仓库)。

2、点击第三个Symbol模式,点击复制代码(注意: 添加了新的图标后，代码链接会变，会提醒你更新，重新替换项目链接即可)。

3、我项目用的是字节的UI库arco-design, 下面我用它作为例子:

import { Icon } from '@arco-design/web-react';

// 粘贴复制的代码链接
const IconFont = Icon.addFromIconFontCn({ src: '//at.alicdn.com/t/c/font_3567764_gjs2a0dqkik.js' });

// 复制图标标识 icon-fuwudiqiu
const App = () => {
  return <div>
    <IconFont type='icon-fuwudiqiu' style={{ fontSize: 40, marginRight: 40 }} />
  </div>;
}

export default App;

// ant design同理

import { createFromIconfontCN } from '@ant-design/icons';

const MyIcon = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/c/font_3567764_gjs2a0dqkik.js', // 在 iconfont.cn 上生成
});

ReactDOM.render(<MyIcon type="icon-example" />, mountedNode);