feat: import animal-island-ui snapshot

2026-05-19 19:31:52 +08:00
commit e1065947d6
139 changed files with 14957 additions and 0 deletions
@@ -0,0 +1,120 @@
+import React from 'react';
+import { Icon, ICON_LIST } from '../../../src';
+import { ApiTable, ApiRow, sectionStyle, sectionTitleStyle, tagStyle, CodeBlock, labelStyle } from '../../tools';
+
+const ICON_API: ApiRow[] = [
+    {
+        prop: 'name',
+        desc: '图标名称',
+        type: 'IconName',
+        defaultVal: '-',
+        required: true,
+    },
+    {
+        prop: 'size',
+        desc: '图标尺寸',
+        type: 'number | string',
+        defaultVal: '24',
+    },
+    {
+        prop: 'bounce',
+        desc: '弹跳动画',
+        type: 'boolean',
+        defaultVal: 'false',
+    },
+    {
+        prop: 'className',
+        desc: '自定义类名',
+        type: 'string',
+        defaultVal: '-',
+    },
+    {
+        prop: 'style',
+        desc: '自定义样式',
+        type: 'CSSProperties',
+        defaultVal: '-',
+    },
+];
+
+const IconDemo: React.FC = () => (
+    <div style={sectionStyle}>
+        <div style={sectionTitleStyle}>
+            Icon <span style={tagStyle}>10 icons</span>
+        </div>
+        <div style={labelStyle}>基础用法</div>
+        <div style={{ display: 'flex', gap: 20, flexWrap: 'wrap' as const, alignItems: 'center' }}>
+            <Icon name="icon-miles" size={32} />
+            <Icon name="icon-camera" size={32} />
+            <Icon name="icon-chat" size={32} />
+            <Icon name="icon-design" size={32} />
+            <Icon name="icon-map" size={32} />
+        </div>
+        <div style={labelStyle}>size 尺寸</div>
+        <div style={{ display: 'flex', gap: 20, alignItems: 'center' }}>
+            <Icon name="icon-miles" size={16} />
+            <Icon name="icon-miles" size={24} />
+            <Icon name="icon-miles" size={32} />
+            <Icon name="icon-miles" size={48} />
+        </div>
+        <div style={labelStyle}>bounce 弹跳动画（鼠标悬停查看效果）</div>
+        <div style={{ display: 'flex', gap: 20, alignItems: 'center' }}>
+            <Icon name="icon-miles" size={32} bounce />
+            <Icon name="icon-camera" size={32} bounce />
+            <Icon name="icon-chat" size={32} bounce />
+        </div>
+        <div style={labelStyle}>图标列表</div>
+        <div style={{
+            border: '1px solid #e8e2d6',
+            borderRadius: 12,
+            overflow: 'hidden',
+            padding: '5px 16px',
+        }}>
+            {ICON_LIST.map((icon, index) => (
+                <div
+                    key={icon.name}
+                    style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 20,
+                        padding: '12px 5px',
+                        borderBottom: index < ICON_LIST.length - 1 ? '1px dashed #f0e8d8' : 'none',
+                        background: '#fff',
+                    }}
+                >
+                    <Icon name={icon.name} size={32} />
+                    <span style={{ fontSize: 14, color: '#725d42', fontFamily: 'inherit' }}>
+                        {icon.label}
+                    </span>
+                    <span style={{
+                        marginLeft: 'auto',
+                        fontSize: 12,
+                        color: '#a0936e',
+                        fontFamily: "'SF Mono', 'Fira Code', Consolas, monospace",
+                    }}>
+                        {icon.name}
+                    </span>
+                </div>
+            ))}
+        </div>
+        <CodeBlock
+            code={`import React from 'react';
+import { Icon } from 'animal-island-ui';
+
+const App = () => {
+    return (
+        <div>
+            {/* 基础用法 */}
+            <Icon name="icon-miles" size={32} />
+            {/* 弹跳动画 */}
+            <Icon name="icon-camera" size={48} bounce />
+        </div>
+    );
+};
+
+export default App;`}
+        />
+        <ApiTable rows={ICON_API} />
+    </div>
+);
+
+export default IconDemo;