mirror of
https://github.com/apache/superset.git
synced 2026-05-22 16:25:49 +00:00
4266d36cf4
Snapshots all four versioned Docusaurus sections at v6.1.0, cut from master after the version-cutting tooling (#39837) and broken-internal- links fixes (#40102) landed. Captures fresh auto-generated content and freezes data dependencies so the historical snapshot stays correct. Versioning behavior: lastVersion stays at current for every section, so the canonical URLs (/docs/..., /admin-docs/..., /developer-docs/..., /components/...) continue to render content from master. The current version is consistently labeled "Next" with an unreleased banner, and 6.1.0 is a historical pin accessible only via its explicit version segment. Component playground: previously disabled: true in versions-config.json, now enabled and versioned. The plugin block in docusaurus.config.ts was already gated only by the disabled flag, so no other code changes were needed to bring it back online. Snapshot includes: - All MDX content for the four sections. - Auto-gen captured fresh: 74 database pages (engine spec metadata), ~1,800 API reference files (openapi.json), 59 component pages (Storybook stories). - Data imports frozen at cut time into snapshot-local _versioned_data/ dirs: versioned_docs/version-6.1.0/_versioned_data/src/data/databases.json (canonical 80-database diagnostics from master, preserved by the generator's input-hash cache) admin_docs_versioned_docs/version-6.1.0/_versioned_data/data/countries.json admin_docs_versioned_docs/version-6.1.0/_versioned_data/static/feature-flags.json developer_docs_versioned_docs/version-6.1.0/_versioned_data/static/data/components.json - Import paths in deeply-nested files rewritten so they still resolve from one directory deeper inside the snapshot. Verified via full yarn build: exit 0, no broken links surfaced by onBrokenLinks: throw. Anchor warnings present are pre-existing on master (community#superset-community-calendar) and unrelated.
253 lines
8.1 KiB
Plaintext
253 lines
8.1 KiB
Plaintext
---
|
|
title: Icons
|
|
sidebar_label: Icons
|
|
---
|
|
|
|
<!--
|
|
Licensed to the Apache Software Foundation (ASF) under one
|
|
or more contributor license agreements. See the NOTICE file
|
|
distributed with this work for additional information
|
|
regarding copyright ownership. The ASF licenses this file
|
|
to you under the Apache License, Version 2.0 (the
|
|
"License"); you may not use this file except in compliance
|
|
with the License. You may obtain a copy of the License at
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing,
|
|
software distributed under the License is distributed on an
|
|
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
|
KIND, either express or implied. See the License for the
|
|
specific language governing permissions and limitations
|
|
under the License.
|
|
-->
|
|
|
|
import { StoryWithControls } from '../../../../src/components/StorybookWrapper';
|
|
|
|
# Icons
|
|
|
|
Icon library for Apache Superset. Contains over 200 icons based on Ant Design icons with consistent sizing and theming support.
|
|
|
|
## Live Example
|
|
|
|
<StoryWithControls
|
|
component="Icons"
|
|
renderComponent="Icons.InfoCircleOutlined"
|
|
props={{
|
|
iconSize: "xl"
|
|
}}
|
|
controls={[
|
|
{
|
|
name: "iconSize",
|
|
label: "Icon Size",
|
|
type: "inline-radio",
|
|
options: [
|
|
"s",
|
|
"m",
|
|
"l",
|
|
"xl",
|
|
"xxl"
|
|
],
|
|
description: "Size of the icons: s (12px), m (16px), l (20px), xl (24px), xxl (32px)."
|
|
},
|
|
{
|
|
name: "showNames",
|
|
label: "Show Names",
|
|
type: "boolean"
|
|
},
|
|
{
|
|
name: "iconColor",
|
|
label: "Icon Color",
|
|
type: "select"
|
|
}
|
|
]}
|
|
/>
|
|
|
|
## Try It
|
|
|
|
Edit the code below to experiment with the component:
|
|
|
|
```tsx live
|
|
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>
|
|
);
|
|
}
|
|
```
|
|
|
|
## Icon Sizes
|
|
|
|
```tsx live
|
|
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>
|
|
);
|
|
}
|
|
```
|
|
|
|
## Icon Gallery
|
|
|
|
```tsx live
|
|
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>
|
|
);
|
|
}
|
|
```
|
|
|
|
## Icon with Text
|
|
|
|
```tsx live
|
|
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>
|
|
);
|
|
}
|
|
```
|
|
|
|
## Props
|
|
|
|
| Prop | Type | Default | Description |
|
|
|------|------|---------|-------------|
|
|
| `iconSize` | `string` | `"xl"` | Size of the icons: s (12px), m (16px), l (20px), xl (24px), xxl (32px). |
|
|
|
|
## Import
|
|
|
|
```tsx
|
|
import { Icons } from '@superset-ui/core/components';
|
|
```
|
|
|
|
---
|
|
|
|
:::tip[Improve this page]
|
|
This documentation is auto-generated from the component's Storybook story.
|
|
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Icons/Icons.stories.tsx).
|
|
:::
|