1. 直接使用React
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>在HTML中使用React 18</title></script><script src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script><script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script><script src="https://unpkg.com/@babel/standalone@7.28.4/babel.min.js"></script><style>body {font-family: sans-serif;display: flex;justify-content: center;align-items: center;min-height: 100vh;background-color: #f0f0f0;}#root {background: white;padding: 2rem;border-radius: 8px;box-shadow: 0 2px 10px rgba(0,0,0,0.1);text-align: center;}button {margin: 0 0.5rem;padding: 0.5rem 1rem;font-size: 1rem;cursor: pointer;}</style>
</head>
<body><div id="root"></div><script type="text/babel">function Counter() {const [count, setCount] = React.useState(0);return (<div><h1>计数器: {count}</h1><div><button onClick={() => setCount(count - 1)}>-1</button><button onClick={() => setCount(0)}>重置</button><button onClick={() => setCount(count + 1)}>+1</button></div></div>);}const root = ReactDOM.createRoot(document.getElementById('root'));root.render(<Counter />);</script>
</body>
</html>
2. 使用ant-design（UMD方式）
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>在HTML中使用 Ant Design 5</title><link rel="stylesheet" href="https://unpkg.com/antd@5.27.4/dist/reset.css">
</head>
<body><div id="root"></div><script src="https://unpkg.com/react@18.3.1/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone@7.28.4/babel.js"></script><script src="https://unpkg.com/dayjs@1.11.18/dayjs.min.js"></script><script src="https://unpkg.com/antd@5.27.4/dist/antd.js"></script><script type="text/babel">const { Button, message } = antd;const App = () => {const handleClick = () => {message.success('你好，Ant Design！');};return (<div style={{ padding: '50px' }}><h1>我的Ant Design页面</h1><Button type="primary" onClick={handleClick}>点击我</Button></div>);};const root = ReactDOM.createRoot(document.getElementById('root'));root.render(<App />);</script>
</body>
</html>
3. 使用@ant-design/icons（UMD方式）
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Ant Design 5 图标使用</title><link rel="stylesheet" href="https://unpkg.com/antd@5.27.4/dist/reset.css"><style>body {padding: 20px;background-color: #f5f5f5;font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;}#root {max-width: 800px;margin: 0 auto;background: white;padding: 24px;border-radius: 8px;box-shadow: 0 2px 8px rgba(0,0,0,0.1);}.icon-demo {display: flex;align-items: center;margin: 10px 0;padding: 10px;border-bottom: 1px solid #f0f0f0;}.icon-container {display: flex;flex-wrap: wrap;gap: 16px;margin: 20px 0;}.icon-item {display: flex;flex-direction: column;align-items: center;padding: 10px;border: 1px solid #e8e8e8;border-radius: 6px;width: 80px;}</style>
</head>
<body><div id="root"></div><script src="https://unpkg.com/react@18.3.1/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone@7.28.4/babel.js"></script><script src="https://unpkg.com/dayjs@1.11.18/dayjs.min.js"></script><script src="https://unpkg.com/antd@5.27.4/dist/antd.js"></script><script src="https://unpkg.com/@ant-design/icons@5.6.1/dist/index.umd.js"></script><script type="text/babel">const {HomeOutlined,SearchOutlined,HeartOutlined,StarOutlined,MessageOutlined,UserOutlined,SettingOutlined,SmileOutlined,SyncOutlined, LoadingOutlined } = icons;const { Button, Card, Space, Typography, Divider } = antd;const { Title, Paragraph, Text } = Typography;const App = () => {return (<div><Title level={2}>Ant Design 5 图标示例</Title><Paragraph>在HTML中直接使用Ant Design图标</Paragraph><Divider>基础图标</Divider><Space size="large" wrap><HomeOutlined style={{ fontSize: '24px', color: '#1890ff' }} /><SearchOutlined style={{ fontSize: '24px', color: '#52c41a' }} /><HeartOutlined style={{ fontSize: '24px', color: '#eb2f96' }} /><StarOutlined style={{ fontSize: '24px', color: '#faad14' }} /><MessageOutlined style={{ fontSize: '24px', color: '#722ed1' }} /></Space><Divider>不同大小的图标</Divider><Space size="large" align="center"><SmileOutlined style={{ fontSize: '16px' }} /><SmileOutlined style={{ fontSize: '24px' }} /><SmileOutlined style={{ fontSize: '32px' }} /><SmileOutlined style={{ fontSize: '40px' }} /></Space><Divider>图标与按钮结合</Divider><Space wrap><Button type="primary" icon={<SearchOutlined />}>搜索</Button><Button icon={<HeartOutlined />}>收藏</Button><Button type="dashed" icon={<StarOutlined />}>标星</Button></Space><Divider>旋转和动画效果</Divider><Space size="large"><SyncOutlined spin style={{ fontSize: '24px' }} /><LoadingOutlined style={{ fontSize: '24px' }} /><SettingOutlined rotate={90} style={{ fontSize: '24px' }} /></Space></div>);};const root = ReactDOM.createRoot(document.getElementById('root'));root.render(<App />);</script>
</body>
</html>
4. 使用svg方式
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>SVG图标示例</title><link rel="stylesheet" href="https://unpkg.com/antd@5.27.4/dist/reset.css"><style>body { padding: 20px; }.icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; }.icon-container { display: flex; gap: 20px; margin: 20px 0; }</style>
</head>
<body><div id="root"></div><script src="https://unpkg.com/react@18.3.1/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone@7.28.4/babel.js"></script><script type="text/babel">const HomeSvg = () => (<svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor" className="icon"><path d="M946.5 505L534.6 93.4a31.93 31.93 0 0 0-45.2 0L77.5 505c-12 12-18.8 28.3-18.8 45.3 0 35.3 28.7 64 64 64h43.4V908c0 17.7 14.3 32 32 32H448V716h112v224h265.9c17.7 0 32-14.3 32-32V614.3h43.4c17 0 33.3-6.7 45.3-18.8 24.9-25 24.9-65.5-.1-90.5z" /></svg>);const SearchSvg = () => (<svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor" className="icon"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z" /></svg>);const App = () => {const [color, setColor] = React.useState('#000');return (<div><h2>自定义SVG图标</h2><div className="icon-container"><div style={{ color: '#1890ff', fontSize: '32px' }}><HomeSvg /><span style={{ fontSize: '14px', display: 'block' }}>首页</span></div><div style={{ color: '#52c41a', fontSize: '32px' }}><SearchSvg /><span style={{ fontSize: '14px', display: 'block' }}>搜索</span></div><div style={{ color: color, fontSize: '32px' }}><HomeSvg /><span style={{ fontSize: '14px', display: 'block' }}>动态颜色</span></div></div><inputtype="color"value={color}onChange={(e) => setColor(e.target.value)}style={{ marginTop: '10px' }}/></div>);};ReactDOM.render(<App />, document.getElementById('root'));</script>
</body>
</html>
完毕， OK！！！
