svg使用方式

1.直接使用，无需任何配置，和框架

2.将svg文件复制到项目，结合webpack配置使用

{
  test: /\.svg$/,
  use: ['@svgr/webpack'],
}

import IconIronMan from './Iron Man.svg';

<IconIronMan className="arco-icon" style={{ fontSize: '50px' }} />

3.使用阿里 iconfont 上面的 svg,和框架无关

（1）将 iconfont js 引用，可以直接使用 cdn 引入

（2）封装一个 svg 组件

(3) 引入这个组件，传入 type

import Svg from './svg';

<Svg type={}>

4.结合字节 arco design 组件库使用

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

const IconFont = Icon.addFromIconFontCn({ src: '//at.alicdn.com/t/font_180975_ue66sq60vyd.js' });

ReactDOM.render(
  <div>
    <IconFont type='icon-person' style={{ fontSize: 40, marginRight: 40 }} />
    <IconFont type='icon-earth' style={{ fontSize: 40, marginRight: 40 }} />
    <IconFont type='icon-flag' style={{ fontSize: 40 }} />
  </div>,
  CONTAINER
);

5.结合阿里 antd-design 组件库使用

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

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

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

总结

arco 和 antd-design 其本质都是在内部实现了一个 use 标签，原理同3