@ant-design/icons#BarChartOutlined TypeScript Examples
The following examples show how to use
@ant-design/icons#BarChartOutlined.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: general-chart.editor.tsx From next-basics with GNU General Public License v3.0 | 6 votes |
|
export function GeneralChartEditor({
nodeUid,
}: EditorComponentProps): React.ReactElement {
const node = useBuilderNode<GeneralChartProperties>({ nodeUid });
return (
<EditorContainer nodeUid={nodeUid}>
<div className={styles.chartContainer}>
<div className={styles.layout}>
<BarChartOutlined className={styles.chartIcon} />
</div>
<div className={styles.layout}>
<LineChartOutlined className={styles.chartIcon} />
</div>
<div className={styles.layout}>
<PieChartFilled className={styles.chartIcon} />
</div>
<div className={styles.layout}>
<AreaChartOutlined className={styles.chartIcon} />
</div>
</div>
</EditorContainer>
);
}
Example #2
| Source File: useGetVizIcon.tsx From datart with Apache License 2.0 | 6 votes |
|
function useGetVizIcon() {
const chartManager = ChartManager.instance();
const chartIcons = chartManager.getAllChartIcons();
return useCallback(
({ relType, avatar, subType }) => {
switch (relType) {
case 'DASHBOARD':
return subType !== null ? (
renderIcon(subType === 'free' ? 'CombinedShape' : 'kanban')
) : (
<FundFilled />
);
case 'DATACHART':
return avatar ? renderIcon(chartIcons[avatar]) : <BarChartOutlined />;
default:
return p => (p.expanded ? <FolderOpenFilled /> : <FolderFilled />);
}
},
[chartIcons],
);
}
Example #3
| Source File: FunnelBinsPicker.tsx From posthog-foss with MIT License | 5 votes |
|
export function FunnelBinsPicker(): JSX.Element {
const { insightProps } = useValues(insightLogic)
const { filters, numericBinCount } = useValues(funnelLogic(insightProps))
const { setBinCount } = useActions(funnelLogic(insightProps))
return (
<Select
id="funnel-bin-filter"
dropdownClassName="funnel-bin-filter-dropdown"
data-attr="funnel-bin-filter"
defaultValue={BinCountAuto}
value={filters.bin_count || BinCountAuto}
onSelect={(count) => setBinCount(count)}
dropdownRender={(menu) => {
return (
<>
{menu}
<div>
<InputNumber
className="funnel-bins-custom-picker"
size="middle"
min={MIN}
max={MAX}
value={numericBinCount}
onChange={(count) => {
const parsedCount = typeof count === 'string' ? parseInt(count) : count
if (parsedCount) {
setBinCount(parsedCount)
}
}}
/>{' '}
bins
</div>
</>
)
}}
listHeight={440}
bordered={false}
dropdownMatchSelectWidth={false}
dropdownAlign={ANTD_TOOLTIP_PLACEMENTS.bottomRight}
optionLabelProp="label"
>
<Select.OptGroup label="Bin Count">
{options.map((option) => {
if (option.value === 'custom') {
return null
}
return (
<Select.Option
className={clsx({ 'select-option-hidden': !option.display })}
key={option.value}
value={option.value}
label={
<>
<BarChartOutlined /> {option.label}
</>
}
>
{option.label}
</Select.Option>
)
})}
</Select.OptGroup>
</Select>
)
}
Example #4
| Source File: FunnelDisplayLayoutPicker.tsx From posthog-foss with MIT License | 5 votes |
|
export function FunnelDisplayLayoutPicker(): JSX.Element {
const { insightProps } = useValues(insightLogic)
const { barGraphLayout } = useValues(funnelLogic(insightProps))
const { setFilters } = useActions(funnelLogic(insightProps))
const options = [
{
value: FunnelLayout.vertical,
icon: <BarChartOutlined />,
label: 'Left to right',
},
{
value: FunnelLayout.horizontal,
icon: <FunnelPlotOutlined />,
label: 'Top to bottom',
},
]
return (
<Select
defaultValue={FunnelLayout.vertical}
value={barGraphLayout || FunnelLayout.vertical}
onChange={(layout: FunnelLayout) => setFilters({ layout })}
bordered
dropdownMatchSelectWidth={false}
data-attr="funnel-bar-layout-selector"
optionLabelProp="label"
>
<Select.OptGroup label="Graph display options">
{options.map((option) => (
<Select.Option
key={option.value}
value={option.value}
label={
<>
{option.icon} {option.label}
</>
}
>
{option.label}
</Select.Option>
))}
</Select.OptGroup>
</Select>
)
}
Example #5
| Source File: PageMaker.stories.tsx From ant-extensions with MIT License | 5 votes |
|
addNew = (callback: AnyObject) => {
const newWidget = { id: "widget-2", title: "Widget New", icon: <BarChartOutlined /> };
widgets.push(newWidget);
callback({ id: "widget-2", title: "Widget New", icon: <BarChartOutlined /> });
}
Example #6
| Source File: ChartWidgetDropdown.tsx From datart with Apache License 2.0 | 5 votes |
|
ChartWidgetDropdown: React.FC<
ChartWidgetDropdownProps
> = props => {
const t = useI18NPrefix(`viz.board.action`);
const onChartWidget = useCallback(
({ key }) => {
if (key === 'select') {
props.onSelect();
}
if (key === 'create') {
props.onCreate?.();
}
},
[props],
);
const addChartTypes = [
{
name: t('ImportExistingDataCharts'),
icon: '',
type: 'select',
},
{
name: t('createDataChartInBoard'),
icon: '',
type: 'create',
},
];
const chartWidgetItems = (
<Menu onClick={onChartWidget}>
{addChartTypes.map(({ name, icon, type }) => (
<Menu.Item key={type}>{name}</Menu.Item>
))}
</Menu>
);
return (
<Dropdown
overlay={chartWidgetItems}
placement="bottomLeft"
trigger={['click']}
>
<Tooltip title={t('dataChart')}>
<ToolbarButton icon={<BarChartOutlined />} />
</Tooltip>
</Dropdown>
);
}
Example #7
| Source File: ChartFilter.tsx From posthog-foss with MIT License | 4 votes |
|
export function ChartFilter({ filters, onChange, disabled }: ChartFilterProps): JSX.Element {
const { insightProps } = useValues(insightLogic)
const { chartFilter } = useValues(chartFilterLogic(insightProps))
const { setChartFilter } = useActions(chartFilterLogic(insightProps))
const { preflight } = useValues(preflightLogic)
const cumulativeDisabled = filters.insight === InsightType.STICKINESS || filters.insight === InsightType.RETENTION
const tableDisabled = false
const pieDisabled = filters.insight === InsightType.RETENTION || filters.insight === InsightType.STICKINESS
const barDisabled = filters.insight === InsightType.RETENTION
const barValueDisabled =
barDisabled || filters.insight === InsightType.STICKINESS || filters.insight === InsightType.RETENTION
const defaultDisplay: ChartDisplayType =
filters.insight === InsightType.RETENTION
? ChartDisplayType.ActionsTable
: filters.insight === InsightType.FUNNELS
? ChartDisplayType.FunnelViz
: ChartDisplayType.ActionsLineGraphLinear
function Label({ icon, children = null }: { icon: React.ReactNode; children: React.ReactNode }): JSX.Element {
return (
<>
{icon} {children}
</>
)
}
function WarningTag({ children = null }: { children: React.ReactNode }): JSX.Element {
return (
<Tag color="orange" style={{ marginLeft: 8, fontSize: 10 }}>
{children}
</Tag>
)
}
const options =
filters.insight === InsightType.FUNNELS
? preflight?.is_clickhouse_enabled
? [
{
value: FunnelVizType.Steps,
label: <Label icon={<OrderedListOutlined />}>Steps</Label>,
},
{
value: FunnelVizType.Trends,
label: (
<Label icon={<LineChartOutlined />}>
Trends
<WarningTag>BETA</WarningTag>
</Label>
),
},
]
: [
{
value: FunnelVizType.Steps,
label: <Label icon={<OrderedListOutlined />}>Steps</Label>,
},
]
: [
{
label: 'Line Chart',
options: [
{
value: ChartDisplayType.ActionsLineGraphLinear,
label: <Label icon={<LineChartOutlined />}>Linear</Label>,
},
{
value: ChartDisplayType.ActionsLineGraphCumulative,
label: <Label icon={<AreaChartOutlined />}>Cumulative</Label>,
disabled: cumulativeDisabled,
},
],
},
{
label: 'Bar Chart',
options: [
{
value: ChartDisplayType.ActionsBarChart,
label: <Label icon={<BarChartOutlined />}>Time</Label>,
disabled: barDisabled,
},
{
value: ChartDisplayType.ActionsBarChartValue,
label: <Label icon={<BarChartOutlined />}>Value</Label>,
disabled: barValueDisabled,
},
],
},
{
value: ChartDisplayType.ActionsTable,
label: <Label icon={<TableOutlined />}>Table</Label>,
disabled: tableDisabled,
},
{
value: ChartDisplayType.ActionsPieChart,
label: <Label icon={<PieChartOutlined />}>Pie</Label>,
disabled: pieDisabled,
},
]
return (
<Select
key="2"
defaultValue={filters.display || defaultDisplay}
value={chartFilter || defaultDisplay}
onChange={(value: ChartDisplayType | FunnelVizType) => {
setChartFilter(value)
onChange?.(value)
}}
bordered
dropdownAlign={ANTD_TOOLTIP_PLACEMENTS.bottomRight}
dropdownMatchSelectWidth={false}
data-attr="chart-filter"
disabled={disabled}
options={options}
/>
)
}
Example #8
| Source File: PathTab.tsx From posthog-foss with MIT License | 4 votes |
|
export function PathTab(): JSX.Element {
const { insightProps, allEventNames } = useValues(insightLogic)
const { filter, wildcards } = useValues(pathsLogic(insightProps))
const { setFilter, updateExclusions } = useActions(pathsLogic(insightProps))
const { featureFlags } = useValues(featureFlagLogic)
const [advancedOptionsShown, setAdvancedOptionShown] = useState(false) // TODO: Move to kea logic if option is kept
const { showingPeople, cohortModalVisible } = useValues(personsModalLogic)
const { setCohortModalVisible } = useActions(personsModalLogic)
const { preflight } = useValues(preflightLogic)
const { user } = useValues(userLogic)
const { groupsTaxonomicTypes } = useValues(groupsModel)
const hasAdvancedPaths = user?.organization?.available_features?.includes(AvailableFeature.PATHS_ADVANCED)
const screens = useBreakpoint()
const isSmallScreen = screens.xs || (screens.sm && !screens.md)
const taxonomicGroupTypes: TaxonomicFilterGroupType[] = filter.include_event_types
? [
...filter.include_event_types.map((item) => {
if (item === PathType.Screen) {
return TaxonomicFilterGroupType.Screens
} else if (item === PathType.CustomEvent) {
return TaxonomicFilterGroupType.CustomEvents
} else {
return TaxonomicFilterGroupType.PageviewUrls
}
}),
TaxonomicFilterGroupType.Wildcards,
]
: [TaxonomicFilterGroupType.Wildcards]
const overrideStartInput =
filter.funnel_paths && [FunnelPathType.between, FunnelPathType.after].includes(filter.funnel_paths)
const overrideEndInput =
filter.funnel_paths && [FunnelPathType.between, FunnelPathType.before].includes(filter.funnel_paths)
const onClickPathtype = (pathType: PathType): void => {
if (filter.include_event_types) {
if (filter.include_event_types.includes(pathType)) {
setFilter({
include_event_types: filter.include_event_types.filter((types) => types !== pathType),
})
} else {
setFilter({
include_event_types: filter.include_event_types
? [...filter.include_event_types, pathType]
: [pathType],
})
}
} else {
setFilter({
include_event_types: [pathType],
})
}
}
function _getStepNameAtIndex(filters: Record<string, any>, index: number): string {
const targetEntity =
filters.events?.filter((event: Record<string, any>) => {
return event.order === index - 1
})?.[0] ||
filters.actions?.filter((action: Record<string, any>) => {
return action.order === index - 1
})?.[0]
return targetEntity?.name || ''
}
function _getStepLabel(funnelFilters?: Record<string, any>, index?: number, shift: number = 0): JSX.Element {
if (funnelFilters && index) {
return (
<div>
<BarChartOutlined />
<span className="label">{`${
index > 0 ? 'Funnel step ' + (index + shift) : 'Funnel dropoff ' + index * -1
}: ${_getStepNameAtIndex(funnelFilters, index > 0 ? index + shift : index * -1)}`}</span>
</div>
)
} else {
return <span />
}
}
function getStartPointLabel(): JSX.Element {
if (filter.funnel_paths) {
if (filter.funnel_paths === FunnelPathType.after) {
return _getStepLabel(filter.funnel_filter, filter.funnel_filter?.funnel_step)
} else if (filter.funnel_paths === FunnelPathType.between) {
// funnel_step targets the later of the 2 events when specifying between so the start point index is shifted back 1
return _getStepLabel(filter.funnel_filter, filter.funnel_filter?.funnel_step, -1)
} else {
return <span />
}
} else {
return filter.start_point ? (
<span className="label">{filter.start_point}</span>
) : (
<span className="label" style={{ color: 'var(--muted)' }}>
Add start point
</span>
)
}
}
function getEndPointLabel(): JSX.Element {
if (filter.funnel_paths) {
if (filter.funnel_paths === FunnelPathType.before || filter.funnel_paths === FunnelPathType.between) {
return _getStepLabel(filter.funnel_filter, filter.funnel_filter?.funnel_step)
} else {
return <span />
}
} else {
return filter.end_point ? (
<span className="label">{filter.end_point}</span>
) : (
<span style={{ color: 'var(--muted)' }}>Add end point</span>
)
}
}
return (
<>
<PersonsModal
visible={showingPeople && !cohortModalVisible}
view={InsightType.PATHS}
filters={filter}
onSaveCohort={() => {
setCohortModalVisible(true)
}}
aggregationTargetLabel={{ singular: 'user', plural: 'users' }}
/>
<Row>
<Col span={12}>
<Col className="event-types" style={{ paddingBottom: 16 }}>
<Row align="middle">
<Col xs={20} sm={20} xl={3}>
<b>Events:</b>
</Col>
<Col
xs={20}
sm={20}
xl={7}
className="tab-btn left ant-btn"
onClick={() => onClickPathtype(PathType.PageView)}
>
<Checkbox
checked={filter.include_event_types?.includes(PathType.PageView)}
style={{
pointerEvents: 'none',
}}
>
Pageviews
</Checkbox>
</Col>
<Col
xs={20}
sm={20}
xl={7}
className="tab-btn center ant-btn"
onClick={() => onClickPathtype(PathType.Screen)}
>
<Checkbox
checked={filter.include_event_types?.includes(PathType.Screen)}
style={{
pointerEvents: 'none',
}}
>
Screenviews
</Checkbox>
</Col>
<Col
xs={20}
sm={20}
xl={7}
className="tab-btn right ant-btn"
onClick={() => onClickPathtype(PathType.CustomEvent)}
>
<Checkbox
checked={filter.include_event_types?.includes(PathType.CustomEvent)}
style={{
pointerEvents: 'none',
}}
>
Custom events
</Checkbox>
</Col>
</Row>
<hr />
{hasAdvancedPaths && (
<>
<Row align="middle">
<Col>
<b>Wildcard groups: (optional)</b>
<Tooltip
title={
<>
Use wildcard matching to group events by unique values in path item
names. Use an asterisk (*) in place of unique values. For example,
instead of /merchant/1234/payment, replace the unique value with an
asterisk /merchant/*/payment.{' '}
<b>Use a comma to separate multiple wildcards.</b>
</>
}
>
<InfoCircleOutlined className="info-indicator" />
</Tooltip>
</Col>
<Select
mode="tags"
style={{ width: '100%', marginTop: 5 }}
onChange={(path_groupings) => setFilter({ path_groupings })}
tokenSeparators={[',']}
value={filter.path_groupings || []}
/>
</Row>
<hr />
</>
)}
<Row align="middle">
<Col span={9}>
<b>Starting at</b>
</Col>
<Col span={15}>
<PathItemSelector
pathItem={filter.start_point}
index={0}
onChange={(pathItem) =>
setFilter({
start_point: pathItem,
})
}
taxonomicGroupTypes={taxonomicGroupTypes}
disabled={overrideStartInput || overrideEndInput}
wildcardOptions={wildcards}
>
<Button
data-attr={'new-prop-filter-' + 1}
block={true}
className="paths-endpoint-field"
style={{
textAlign: 'left',
backgroundColor:
overrideStartInput || overrideEndInput
? 'var(--border-light)'
: 'white',
}}
disabled={overrideEndInput && !overrideStartInput}
onClick={
filter.funnel_filter && overrideStartInput
? () => {
router.actions.push(
combineUrl(
'/insights',
encodeParams(
filter.funnel_filter as Record<string, any>,
'?'
)
).url
)
}
: () => {}
}
>
<div className="label-container">
{getStartPointLabel()}
{filter.start_point || overrideStartInput ? (
<CloseButton
onClick={(e: Event) => {
setFilter({
start_point: undefined,
funnel_filter: undefined,
funnel_paths: undefined,
})
e.stopPropagation()
}}
className="close-button"
/>
) : null}
</div>
</Button>
</PathItemSelector>
</Col>
</Row>
{hasAdvancedPaths && (
<>
<hr />
<Row align="middle">
<Col span={9}>
<b>Ending at</b>
</Col>
<Col span={15}>
<PathItemSelector
pathItem={filter.end_point}
index={1}
onChange={(pathItem) =>
setFilter({
end_point: pathItem,
})
}
taxonomicGroupTypes={taxonomicGroupTypes}
disabled={overrideEndInput || overrideStartInput}
wildcardOptions={wildcards}
>
<Button
data-attr={'new-prop-filter-' + 0}
block={true}
className="paths-endpoint-field"
style={{
textAlign: 'left',
backgroundColor:
overrideStartInput || overrideEndInput
? 'var(--border-light)'
: 'white',
}}
disabled={overrideStartInput && !overrideEndInput}
onClick={
filter.funnel_filter && overrideEndInput
? () => {
router.actions.push(
combineUrl(
'/insights',
encodeParams(
filter.funnel_filter as Record<string, any>,
'?'
)
).url
)
}
: () => {}
}
>
<div className="label-container">
{getEndPointLabel()}
{filter.end_point || overrideEndInput ? (
<CloseButton
onClick={(e: Event) => {
setFilter({
end_point: undefined,
funnel_filter: undefined,
funnel_paths: undefined,
})
e.stopPropagation()
}}
className="close-button"
/>
) : null}
</div>
</Button>
</PathItemSelector>
</Col>
</Row>
</>
)}
{['control', 'direct'].includes(
featureFlags[FEATURE_FLAGS.PATHS_ADVANCED_EXPERIMENT] as string
) &&
hasAdvancedPaths && (
<>
<hr />
<h4
className="secondary"
style={{ display: 'flex', cursor: 'pointer', alignItems: 'center' }}
onClick={() => setAdvancedOptionShown(!advancedOptionsShown)}
>
<span style={{ flexGrow: 1 }}>Advanced options</span>
{featureFlags[FEATURE_FLAGS.PATHS_ADVANCED_EXPERIMENT] === 'control' && (
<div
className={clsx(
'advanced-options-dropdown',
advancedOptionsShown && 'expanded'
)}
>
<IconArrowDropDown />
</div>
)}
</h4>
{featureFlags[FEATURE_FLAGS.PATHS_ADVANCED_EXPERIMENT] === 'direct' ||
advancedOptionsShown ? (
<PathAdvanded />
) : (
<div
className="text-muted-alt cursor-pointer"
onClick={() => setAdvancedOptionShown(!advancedOptionsShown)}
>
Adjust maximum number of paths, path density or path cleaning options.
</div>
)}
</>
)}
{!hasAdvancedPaths && !preflight?.instance_preferences?.disable_paid_fs && (
<Row align="middle">
<Col span={24}>
<PayCard
identifier={AvailableFeature.PATHS_ADVANCED}
title="Get a deeper understanding of your users"
caption="Advanced features such as interconnection with funnels, grouping & wildcarding and exclusions can help you gain deeper insights."
docsLink="https://posthog.com/docs/user-guides/paths"
/>
</Col>
</Row>
)}
</Col>
</Col>
<Col span={12} style={{ marginTop: isSmallScreen ? '2rem' : 0, paddingLeft: 32 }}>
<GlobalFiltersTitle title={'Filters'} unit="actions/events" />
<PropertyFilters
pageKey="insight-path"
taxonomicGroupTypes={[
TaxonomicFilterGroupType.EventProperties,
TaxonomicFilterGroupType.PersonProperties,
...groupsTaxonomicTypes,
TaxonomicFilterGroupType.Cohorts,
TaxonomicFilterGroupType.Elements,
]}
eventNames={allEventNames}
/>
<TestAccountFilter filters={filter} onChange={setFilter} />
{hasAdvancedPaths && (
<>
<hr />
<h4 className="secondary">
Exclusions
<Tooltip
title={
<>
Exclude events from Paths visualisation. You can use wildcard groups in
exclusions as well.
</>
}
>
<InfoCircleOutlined className="info-indicator" />
</Tooltip>
</h4>
<PathItemFilters
taxonomicGroupTypes={taxonomicGroupTypes}
pageKey={'exclusion'}
propertyFilters={
filter.exclude_events &&
filter.exclude_events.map((name) => ({
key: name,
value: name,
operator: null,
type: 'event',
}))
}
onChange={(values) => {
const exclusion = values.length > 0 ? values.map((v) => v.value) : values
updateExclusions(exclusion as string[])
}}
wildcardOptions={wildcards}
/>
</>
)}
</Col>
</Row>
</>
)
}
Example #9
| Source File: Icon.tsx From html2sketch with MIT License | 4 votes |
|
IconSymbol: FC = () => {
return (
<Row>
{/*<CaretUpOutlined*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/1.CaretUpOutlined'}*/}
{/*/>*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/2.MailOutlined'}*/}
{/*/>*/}
{/*<StepBackwardOutlined*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
{/*/>*/}
{/*<StepForwardOutlined*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
{/*/>*/}
<StepForwardOutlined />
<ShrinkOutlined />
<ArrowsAltOutlined />
<DownOutlined />
<UpOutlined />
<LeftOutlined />
<RightOutlined />
<CaretUpOutlined />
<CaretDownOutlined />
<CaretLeftOutlined />
<CaretRightOutlined />
<VerticalAlignTopOutlined />
<RollbackOutlined />
<FastBackwardOutlined />
<FastForwardOutlined />
<DoubleRightOutlined />
<DoubleLeftOutlined />
<VerticalLeftOutlined />
<VerticalRightOutlined />
<VerticalAlignMiddleOutlined />
<VerticalAlignBottomOutlined />
<ForwardOutlined />
<BackwardOutlined />
<EnterOutlined />
<RetweetOutlined />
<SwapOutlined />
<SwapLeftOutlined />
<SwapRightOutlined />
<ArrowUpOutlined />
<ArrowDownOutlined />
<ArrowLeftOutlined />
<ArrowRightOutlined />
<LoginOutlined />
<LogoutOutlined />
<MenuFoldOutlined />
<MenuUnfoldOutlined />
<BorderBottomOutlined />
<BorderHorizontalOutlined />
<BorderInnerOutlined />
<BorderOuterOutlined />
<BorderLeftOutlined />
<BorderRightOutlined />
<BorderTopOutlined />
<BorderVerticleOutlined />
<PicCenterOutlined />
<PicLeftOutlined />
<PicRightOutlined />
<RadiusBottomleftOutlined />
<RadiusBottomrightOutlined />
<RadiusUpleftOutlined />
<RadiusUprightOutlined />
<FullscreenOutlined />
<FullscreenExitOutlined />
<QuestionOutlined />
<PauseOutlined />
<MinusOutlined />
<PauseCircleOutlined />
<InfoOutlined />
<CloseOutlined />
<ExclamationOutlined />
<CheckOutlined />
<WarningOutlined />
<IssuesCloseOutlined />
<StopOutlined />
<EditOutlined />
<CopyOutlined />
<ScissorOutlined />
<DeleteOutlined />
<SnippetsOutlined />
<DiffOutlined />
<HighlightOutlined />
<AlignCenterOutlined />
<AlignLeftOutlined />
<AlignRightOutlined />
<BgColorsOutlined />
<BoldOutlined />
<ItalicOutlined />
<UnderlineOutlined />
<StrikethroughOutlined />
<RedoOutlined />
<UndoOutlined />
<ZoomInOutlined />
<ZoomOutOutlined />
<FontColorsOutlined />
<FontSizeOutlined />
<LineHeightOutlined />
<SortAscendingOutlined />
<SortDescendingOutlined />
<DragOutlined />
<OrderedListOutlined />
<UnorderedListOutlined />
<RadiusSettingOutlined />
<ColumnWidthOutlined />
<ColumnHeightOutlined />
<AreaChartOutlined />
<PieChartOutlined />
<BarChartOutlined />
<DotChartOutlined />
<LineChartOutlined />
<RadarChartOutlined />
<HeatMapOutlined />
<FallOutlined />
<RiseOutlined />
<StockOutlined />
<BoxPlotOutlined />
<FundOutlined />
<SlidersOutlined />
<AndroidOutlined />
<AppleOutlined />
<WindowsOutlined />
<IeOutlined />
<ChromeOutlined />
<GithubOutlined />
<AliwangwangOutlined />
<DingdingOutlined />
<WeiboSquareOutlined />
<WeiboCircleOutlined />
<TaobaoCircleOutlined />
<Html5Outlined />
<WeiboOutlined />
<TwitterOutlined />
<WechatOutlined />
<AlipayCircleOutlined />
<TaobaoOutlined />
<SkypeOutlined />
<FacebookOutlined />
<CodepenOutlined />
<CodeSandboxOutlined />
<AmazonOutlined />
<GoogleOutlined />
<AlipayOutlined />
<AntDesignOutlined />
<AntCloudOutlined />
<ZhihuOutlined />
<SlackOutlined />
<SlackSquareOutlined />
<BehanceSquareOutlined />
<DribbbleOutlined />
<DribbbleSquareOutlined />
<InstagramOutlined />
<YuqueOutlined />
<AlibabaOutlined />
<YahooOutlined />
<RedditOutlined />
<SketchOutlined />
<AccountBookOutlined />
<AlertOutlined />
<ApartmentOutlined />
<ApiOutlined />
<QqOutlined />
<MediumWorkmarkOutlined />
<GitlabOutlined />
<MediumOutlined />
<GooglePlusOutlined />
<AppstoreAddOutlined />
<AppstoreOutlined />
<AudioOutlined />
<AudioMutedOutlined />
<AuditOutlined />
<BankOutlined />
<BarcodeOutlined />
<BarsOutlined />
<BellOutlined />
<BlockOutlined />
<BookOutlined />
<BorderOutlined />
<BranchesOutlined />
<BuildOutlined />
<BulbOutlined />
<CalculatorOutlined />
<CalendarOutlined />
<CameraOutlined />
<CarOutlined />
<CarryOutOutlined />
<CiCircleOutlined />
<CiOutlined />
<CloudOutlined />
<ClearOutlined />
<ClusterOutlined />
<CodeOutlined />
<CoffeeOutlined />
<CompassOutlined />
<CompressOutlined />
<ContactsOutlined />
<ContainerOutlined />
<ControlOutlined />
<CopyrightCircleOutlined />
<CopyrightOutlined />
<CreditCardOutlined />
<CrownOutlined />
<CustomerServiceOutlined />
<DashboardOutlined />
<DatabaseOutlined />
<DeleteColumnOutlined />
<DeleteRowOutlined />
<DisconnectOutlined />
<DislikeOutlined />
<DollarCircleOutlined />
<DollarOutlined />
<DownloadOutlined />
<EllipsisOutlined />
<EnvironmentOutlined />
<EuroCircleOutlined />
<EuroOutlined />
<ExceptionOutlined />
<ExpandAltOutlined />
<ExpandOutlined />
<ExperimentOutlined />
<ExportOutlined />
<EyeOutlined />
<FieldBinaryOutlined />
<FieldNumberOutlined />
<FieldStringOutlined />
<DesktopOutlined />
<DingtalkOutlined />
<FileAddOutlined />
<FileDoneOutlined />
<FileExcelOutlined />
<FileExclamationOutlined />
<FileOutlined />
<FileImageOutlined />
<FileJpgOutlined />
<FileMarkdownOutlined />
<FilePdfOutlined />
<FilePptOutlined />
<FileProtectOutlined />
<FileSearchOutlined />
<FileSyncOutlined />
<FileTextOutlined />
<FileUnknownOutlined />
<FileWordOutlined />
<FilterOutlined />
<FireOutlined />
<FlagOutlined />
<FolderAddOutlined />
<FolderOutlined />
<FolderOpenOutlined />
<ForkOutlined />
<FormatPainterOutlined />
<FrownOutlined />
<FunctionOutlined />
<FunnelPlotOutlined />
<GatewayOutlined />
<GifOutlined />
<GiftOutlined />
<GlobalOutlined />
<GoldOutlined />
<GroupOutlined />
<HddOutlined />
<HeartOutlined />
<HistoryOutlined />
<HomeOutlined />
<HourglassOutlined />
<IdcardOutlined />
<ImportOutlined />
<InboxOutlined />
<InsertRowAboveOutlined />
<InsertRowBelowOutlined />
<InsertRowLeftOutlined />
<InsertRowRightOutlined />
<InsuranceOutlined />
<InteractionOutlined />
<KeyOutlined />
<LaptopOutlined />
<LayoutOutlined />
<LikeOutlined />
<LineOutlined />
<LinkOutlined />
<Loading3QuartersOutlined />
<LoadingOutlined />
<LockOutlined />
<MailOutlined />
<ManOutlined />
<MedicineBoxOutlined />
<MehOutlined />
<MenuOutlined />
<MergeCellsOutlined />
<MessageOutlined />
<MobileOutlined />
<MoneyCollectOutlined />
<MonitorOutlined />
<MoreOutlined />
<NodeCollapseOutlined />
<NodeExpandOutlined />
<NodeIndexOutlined />
<NotificationOutlined />
<NumberOutlined />
<PaperClipOutlined />
<PartitionOutlined />
<PayCircleOutlined />
<PercentageOutlined />
<PhoneOutlined />
<PictureOutlined />
<PoundCircleOutlined />
<PoundOutlined />
<PoweroffOutlined />
<PrinterOutlined />
<ProfileOutlined />
<ProjectOutlined />
<PropertySafetyOutlined />
<PullRequestOutlined />
<PushpinOutlined />
<QrcodeOutlined />
<ReadOutlined />
<ReconciliationOutlined />
<RedEnvelopeOutlined />
<ReloadOutlined />
<RestOutlined />
<RobotOutlined />
<RocketOutlined />
<SafetyCertificateOutlined />
<SafetyOutlined />
<ScanOutlined />
<ScheduleOutlined />
<SearchOutlined />
<SecurityScanOutlined />
<SelectOutlined />
<SendOutlined />
<SettingOutlined />
<ShakeOutlined />
<ShareAltOutlined />
<ShopOutlined />
<ShoppingCartOutlined />
<ShoppingOutlined />
<SisternodeOutlined />
<SkinOutlined />
<SmileOutlined />
<SolutionOutlined />
<SoundOutlined />
<SplitCellsOutlined />
<StarOutlined />
<SubnodeOutlined />
<SyncOutlined />
<TableOutlined />
<TabletOutlined />
<TagOutlined />
<TagsOutlined />
<TeamOutlined />
<ThunderboltOutlined />
<ToTopOutlined />
<ToolOutlined />
<TrademarkCircleOutlined />
<TrademarkOutlined />
<TransactionOutlined />
<TrophyOutlined />
<UngroupOutlined />
<UnlockOutlined />
<UploadOutlined />
<UsbOutlined />
<UserAddOutlined />
<UserDeleteOutlined />
<UserOutlined />
<UserSwitchOutlined />
<UsergroupAddOutlined />
<UsergroupDeleteOutlined />
<VideoCameraOutlined />
<WalletOutlined />
<WifiOutlined />
<BorderlessTableOutlined />
<WomanOutlined />
<BehanceOutlined />
<DropboxOutlined />
<DeploymentUnitOutlined />
<UpCircleOutlined />
<DownCircleOutlined />
<LeftCircleOutlined />
<RightCircleOutlined />
<UpSquareOutlined />
<DownSquareOutlined />
<LeftSquareOutlined />
<RightSquareOutlined />
<PlayCircleOutlined />
<QuestionCircleOutlined />
<PlusCircleOutlined />
<PlusSquareOutlined />
<MinusSquareOutlined />
<MinusCircleOutlined />
<InfoCircleOutlined />
<ExclamationCircleOutlined />
<CloseCircleOutlined />
<CloseSquareOutlined />
<CheckCircleOutlined />
<CheckSquareOutlined />
<ClockCircleOutlined />
<FormOutlined />
<DashOutlined />
<SmallDashOutlined />
<YoutubeOutlined />
<CodepenCircleOutlined />
<AliyunOutlined />
<PlusOutlined />
<LinkedinOutlined />
<AimOutlined />
<BugOutlined />
<CloudDownloadOutlined />
<CloudServerOutlined />
<CloudSyncOutlined />
<CloudUploadOutlined />
<CommentOutlined />
<ConsoleSqlOutlined />
<EyeInvisibleOutlined />
<FileGifOutlined />
<DeliveredProcedureOutlined />
<FieldTimeOutlined />
<FileZipOutlined />
<FolderViewOutlined />
<FundProjectionScreenOutlined />
<FundViewOutlined />
<MacCommandOutlined />
<PlaySquareOutlined />
<OneToOneOutlined />
<RotateLeftOutlined />
<RotateRightOutlined />
<SaveOutlined />
<SwitcherOutlined />
<TranslationOutlined />
<VerifiedOutlined />
<VideoCameraAddOutlined />
<WhatsAppOutlined />
{/*</Col>*/}
</Row>
);
}
