function Demo() {
  return (
    <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
      <Icons.InfoCircleOutlined iconSize="xl" />
      <Icons.CheckCircleOutlined iconSize="xl" />
      <Icons.WarningOutlined iconSize="xl" />
      <Icons.CloseCircleOutlined iconSize="xl" />
    </div>
  );
}

function IconSizes() {
  const sizes = ['s', 'm', 'l', 'xl', 'xxl'];
  return (
    <div style={{ display: 'flex', gap: 24, alignItems: 'end' }}>
      {sizes.map(size => (
        <div key={size} style={{ textAlign: 'center' }}>
          <Icons.DatabaseOutlined iconSize={size} />
          <div style={{ fontSize: 12, marginTop: 8, color: '#666' }}>{size}</div>
        </div>
      ))}
    </div>
  );
}

function IconGallery() {
  const Section = ({ title, children }) => (
    <div style={{ marginBottom: 24 }}>
      <div style={{ fontWeight: 600, marginBottom: 8, color: '#666' }}>{title}</div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 16 }}>{children}</div>
    </div>
  );
  return (
    <div>
      <Section title="Charts">
        <Icons.LineChartOutlined iconSize="xl" />
        <Icons.BarChartOutlined iconSize="xl" />
        <Icons.PieChartOutlined iconSize="xl" />
        <Icons.AreaChartOutlined iconSize="xl" />
        <Icons.DashboardOutlined iconSize="xl" />
        <Icons.FundProjectionScreenOutlined iconSize="xl" />
      </Section>
      <Section title="Data">
        <Icons.DatabaseOutlined iconSize="xl" />
        <Icons.TableOutlined iconSize="xl" />
        <Icons.ConsoleSqlOutlined iconSize="xl" />
        <Icons.FilterOutlined iconSize="xl" />
        <Icons.FieldNumberOutlined iconSize="xl" />
        <Icons.FieldTimeOutlined iconSize="xl" />
        <Icons.FunctionOutlined iconSize="xl" />
        <Icons.CalculatorOutlined iconSize="xl" />
      </Section>
      <Section title="Actions">
        <Icons.PlusOutlined iconSize="xl" />
        <Icons.EditOutlined iconSize="xl" />
        <Icons.DeleteOutlined iconSize="xl" />
        <Icons.CopyOutlined iconSize="xl" />
        <Icons.SaveOutlined iconSize="xl" />
        <Icons.DownloadOutlined iconSize="xl" />
        <Icons.UploadOutlined iconSize="xl" />
        <Icons.ReloadOutlined iconSize="xl" />
        <Icons.SyncOutlined iconSize="xl" />
        <Icons.SearchOutlined iconSize="xl" />
        <Icons.ExpandOutlined iconSize="xl" />
        <Icons.FullscreenOutlined iconSize="xl" />
        <Icons.ShareAltOutlined iconSize="xl" />
        <Icons.ExportOutlined iconSize="xl" />
      </Section>
      <Section title="Status">
        <Icons.CheckOutlined iconSize="xl" />
        <Icons.CheckCircleOutlined iconSize="xl" />
        <Icons.CloseOutlined iconSize="xl" />
        <Icons.CloseCircleOutlined iconSize="xl" />
        <Icons.InfoCircleOutlined iconSize="xl" />
        <Icons.WarningOutlined iconSize="xl" />
        <Icons.ExclamationCircleOutlined iconSize="xl" />
        <Icons.QuestionCircleOutlined iconSize="xl" />
        <Icons.LoadingOutlined iconSize="xl" />
        <Icons.StopOutlined iconSize="xl" />
      </Section>
      <Section title="Navigation">
        <Icons.MenuOutlined iconSize="xl" />
        <Icons.DownOutlined iconSize="xl" />
        <Icons.UpOutlined iconSize="xl" />
        <Icons.RightOutlined iconSize="xl" />
        <Icons.CaretDownOutlined iconSize="xl" />
        <Icons.CaretUpOutlined iconSize="xl" />
        <Icons.ArrowRightOutlined iconSize="xl" />
        <Icons.MoreOutlined iconSize="xl" />
        <Icons.EllipsisOutlined iconSize="xl" />
      </Section>
      <Section title="Objects">
        <Icons.FileOutlined iconSize="xl" />
        <Icons.FileTextOutlined iconSize="xl" />
        <Icons.FileImageOutlined iconSize="xl" />
        <Icons.BookOutlined iconSize="xl" />
        <Icons.TagOutlined iconSize="xl" />
        <Icons.TagsOutlined iconSize="xl" />
        <Icons.StarOutlined iconSize="xl" />
        <Icons.BellOutlined iconSize="xl" />
        <Icons.CalendarOutlined iconSize="xl" />
        <Icons.ClockCircleOutlined iconSize="xl" />
        <Icons.MailOutlined iconSize="xl" />
        <Icons.LinkOutlined iconSize="xl" />
        <Icons.LockOutlined iconSize="xl" />
        <Icons.UnlockOutlined iconSize="xl" />
        <Icons.KeyOutlined iconSize="xl" />
      </Section>
      <Section title="Users">
        <Icons.UserOutlined iconSize="xl" />
        <Icons.UserAddOutlined iconSize="xl" />
        <Icons.UsergroupAddOutlined iconSize="xl" />
        <Icons.LoginOutlined iconSize="xl" />
      </Section>
      <Section title="Settings">
        <Icons.SettingOutlined iconSize="xl" />
        <Icons.BgColorsOutlined iconSize="xl" />
        <Icons.FormatPainterOutlined iconSize="xl" />
        <Icons.HighlightOutlined iconSize="xl" />
        <Icons.EyeOutlined iconSize="xl" />
        <Icons.EyeInvisibleOutlined iconSize="xl" />
        <Icons.SunOutlined iconSize="xl" />
        <Icons.MoonOutlined iconSize="xl" />
      </Section>
    </div>
  );
}

function IconWithText() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <Icons.CheckCircleOutlined iconSize="l" style={{ color: '#52c41a' }} />
        <span>Success message</span>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <Icons.InfoCircleOutlined iconSize="l" style={{ color: '#1890ff' }} />
        <span>Information message</span>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <Icons.WarningOutlined iconSize="l" style={{ color: '#faad14' }} />
        <span>Warning message</span>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <Icons.CloseCircleOutlined iconSize="l" style={{ color: '#ff4d4f' }} />
        <span>Error message</span>
      </div>
    </div>
  );
}

import { Icons } from '@superset/components';