@ant-design/icons#FallOutlined TypeScript Examples
The following examples show how to use
@ant-design/icons#FallOutlined.
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: FunnelCorrelationTable.tsx From posthog-foss with MIT License | 4 votes |
|
export function FunnelCorrelationTable(): JSX.Element | null {
const { insightProps } = useValues(insightLogic)
const logic = funnelLogic(insightProps)
const {
stepsWithCount,
correlationValues,
correlationTypes,
eventHasPropertyCorrelations,
eventWithPropertyCorrelationsValues,
parseDisplayNameForCorrelation,
correlationsLoading,
eventWithPropertyCorrelationsLoading,
nestedTableExpandedKeys,
correlationPropKey,
filters,
aggregationTargetLabel,
} = useValues(logic)
const {
setCorrelationTypes,
loadEventWithPropertyCorrelations,
addNestedTableExpandedKey,
removeNestedTableExpandedKey,
openCorrelationPersonsModal,
} = useActions(logic)
const { reportCorrelationInteraction } = useActions(eventUsageLogic)
const onClickCorrelationType = (correlationType: FunnelCorrelationType): void => {
if (correlationTypes) {
if (correlationTypes.includes(correlationType)) {
setCorrelationTypes(correlationTypes.filter((types) => types !== correlationType))
} else {
setCorrelationTypes([...correlationTypes, correlationType])
}
} else {
setCorrelationTypes([correlationType])
}
}
const renderOddsRatioTextRecord = (record: FunnelCorrelation): JSX.Element => {
const get_friendly_numeric_value = (value: number): string => {
if (value < 10 && !Number.isInteger(value)) {
return value.toFixed(1)
}
return value.toFixed()
}
const is_success = record.correlation_type === FunnelCorrelationType.Success
const { first_value, second_value } = parseDisplayNameForCorrelation(record)
return (
<>
<h4>
{is_success ? (
<RiseOutlined style={{ color: 'green' }} />
) : (
<FallOutlined style={{ color: 'red' }} />
)}{' '}
<PropertyKeyInfo value={first_value} />
{second_value !== undefined && (
<>
{' :: '}
<PropertyKeyInfo value={second_value} disablePopover />
</>
)}
</h4>
<div>
{capitalizeFirstLetter(aggregationTargetLabel.plural)}{' '}
{filters.aggregation_group_type_index != undefined ? 'that' : 'who'} converted were{' '}
<mark>
<b>
{get_friendly_numeric_value(record.odds_ratio)}x {is_success ? 'more' : 'less'} likely
</b>
</mark>{' '}
to{' '}
{record.result_type === FunnelCorrelationResultsType.EventWithProperties
? 'have this event property'
: 'do this event'}
</div>
<CorrelationMatrix />
</>
)
}
const renderSuccessCount = (record: FunnelCorrelation): JSX.Element => {
return (
<ValueInspectorButton
onClick={() => {
openCorrelationPersonsModal(record, true)
}}
>
{record.success_count}
</ValueInspectorButton>
)
}
const renderFailureCount = (record: FunnelCorrelation): JSX.Element => {
return (
<ValueInspectorButton
onClick={() => {
openCorrelationPersonsModal(record, false)
}}
>
{record.failure_count}
</ValueInspectorButton>
)
}
const renderNestedTable = (eventName: string): JSX.Element => {
if (eventWithPropertyCorrelationsLoading) {
return (
<div className="nested-properties-loading">
<Spin />
<h3>Loading correlation results</h3>
<p>This process can take up to 20 seconds. </p>
</div>
)
}
return (
<div>
<h4 style={{ paddingLeft: 16 }}>Correlated properties</h4>
<Table
dataSource={eventWithPropertyCorrelationsValues[eventName]}
rowKey={(record: FunnelCorrelation) => record.event.event}
className="nested-properties-table"
scroll={{ x: 'max-content' }}
pagination={{
pageSize: 5,
hideOnSinglePage: true,
onChange: (page, page_size) =>
reportCorrelationInteraction(
FunnelCorrelationResultsType.EventWithProperties,
'pagination change',
{ page, page_size }
),
}}
>
<Column
title="Property"
key="eventName"
render={(_, record: FunnelCorrelation) => renderOddsRatioTextRecord(record)}
align="left"
/>
<Column
title="Completed"
key="success_count"
render={(_, record: FunnelCorrelation) => renderSuccessCount(record)}
width={90}
align="center"
/>
<Column
title="Dropped off"
key="failure_count"
render={(_, record: FunnelCorrelation) => renderFailureCount(record)}
width={120}
align="center"
/>
<Column
title=""
key="actions"
render={(_, record: FunnelCorrelation) => <CorrelationActionsCell record={record} />}
align="center"
width={30}
/>
</Table>
</div>
)
}
return stepsWithCount.length > 1 ? (
<VisibilitySensor id={correlationPropKey} offset={152}>
<div className="funnel-correlation-table">
<span className="funnel-correlation-header">
<span className="table-header">
<IconSelectEvents style={{ marginRight: 4, fontSize: 24, opacity: 0.5 }} />
CORRELATED EVENTS
</span>
<span className="table-options">
<p className="title">CORRELATION</p>
<div
className="tab-btn ant-btn"
style={{
paddingTop: '1px',
paddingBottom: '1px',
borderTopRightRadius: 0,
borderBottomRightRadius: 0,
}}
onClick={() => onClickCorrelationType(FunnelCorrelationType.Success)}
>
<Checkbox
checked={correlationTypes.includes(FunnelCorrelationType.Success)}
style={{
pointerEvents: 'none',
}}
>
Success
</Checkbox>
</div>
<div
className="tab-btn ant-btn"
style={{
marginRight: '8px',
paddingTop: '1px',
paddingBottom: '1px',
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0,
}}
onClick={() => onClickCorrelationType(FunnelCorrelationType.Failure)}
>
<Checkbox
checked={correlationTypes.includes(FunnelCorrelationType.Failure)}
style={{
pointerEvents: 'none',
}}
>
Dropoff
</Checkbox>
</div>
</span>
</span>
<Table
dataSource={correlationValues}
loading={correlationsLoading}
size="small"
scroll={{ x: 'max-content' }}
rowKey={(record: FunnelCorrelation) => record.event.event}
pagination={{
pageSize: 5,
hideOnSinglePage: true,
onChange: () => reportCorrelationInteraction(FunnelCorrelationResultsType.Events, 'load more'),
}}
expandable={{
expandedRowRender: (record) => renderNestedTable(record.event.event),
expandedRowKeys: nestedTableExpandedKeys,
rowExpandable: () => filters.aggregation_group_type_index === undefined,
/* eslint-disable react/display-name */
expandIcon: ({ expanded, onExpand, record, expandable }) => {
if (!expandable) {
return null
}
return expanded ? (
<Tooltip title="Collapse">
<div
style={{ cursor: 'pointer', opacity: 0.5, fontSize: 24 }}
onClick={(e) => {
removeNestedTableExpandedKey(record.event.event)
onExpand(record, e)
}}
>
<IconUnfoldLess />
</div>
</Tooltip>
) : (
<Tooltip title="Expand to see correlated properties for this event">
<div
style={{ cursor: 'pointer', opacity: 0.5, fontSize: 24 }}
onClick={(e) => {
!eventHasPropertyCorrelations(record.event.event) &&
loadEventWithPropertyCorrelations(record.event.event)
addNestedTableExpandedKey(record.event.event)
onExpand(record, e)
}}
>
<IconUnfoldMore />
</div>
</Tooltip>
)
},
/* eslint-enable react/display-name */
}}
>
<Column
title="Event"
key="eventName"
render={(_, record: FunnelCorrelation) => renderOddsRatioTextRecord(record)}
align="left"
ellipsis
/>
<Column
title={
<div className="flex-center">
Completed
<Tooltip
title={`${capitalizeFirstLetter(aggregationTargetLabel.plural)} ${
filters.aggregation_group_type_index != undefined ? 'that' : 'who'
} performed the event and completed the entire funnel.`}
>
<InfoCircleOutlined className="column-info" />
</Tooltip>
</div>
}
key="success_count"
render={(_, record: FunnelCorrelation) => renderSuccessCount(record)}
width={90}
align="center"
/>
<Column
title={
<div className="flex-center">
Dropped off
<Tooltip
title={
<>
{capitalizeFirstLetter(aggregationTargetLabel.plural)}{' '}
{filters.aggregation_group_type_index != undefined ? 'that' : 'who'}{' '}
performed the event and did <b>not complete</b> the entire funnel.
</>
}
>
<InfoCircleOutlined className="column-info" />
</Tooltip>
</div>
}
key="failure_count"
render={(_, record: FunnelCorrelation) => renderFailureCount(record)}
width={120}
align="center"
/>
<Column
title=""
key="actions"
render={(_, record: FunnelCorrelation) => <CorrelationActionsCell record={record} />}
width={30}
/>
</Table>
</div>
</VisibilitySensor>
) : null
}
Example #2
| Source File: FunnelPropertyCorrelationTable.tsx From posthog-foss with MIT License | 4 votes |
|
export function FunnelPropertyCorrelationTable(): JSX.Element | null {
const { insightProps } = useValues(insightLogic)
const logic = funnelLogic(insightProps)
const {
stepsWithCount,
propertyCorrelationValues,
propertyCorrelationTypes,
excludedPropertyNames,
parseDisplayNameForCorrelation,
propertyCorrelationsLoading,
inversePropertyNames,
propertyNames,
correlationPropKey,
allProperties,
filters,
aggregationTargetLabel,
} = useValues(logic)
const { setPropertyCorrelationTypes, setPropertyNames, openCorrelationPersonsModal } = useActions(logic)
const { reportCorrelationInteraction } = useActions(eventUsageLogic)
const onClickCorrelationType = (correlationType: FunnelCorrelationType): void => {
if (propertyCorrelationTypes) {
if (propertyCorrelationTypes.includes(correlationType)) {
setPropertyCorrelationTypes(propertyCorrelationTypes.filter((types) => types !== correlationType))
} else {
setPropertyCorrelationTypes([...propertyCorrelationTypes, correlationType])
}
} else {
setPropertyCorrelationTypes([correlationType])
}
}
const renderSuccessCount = (record: FunnelCorrelation): JSX.Element => {
return (
<ValueInspectorButton
onClick={() => {
openCorrelationPersonsModal(record, true)
}}
>
{record.success_count}
</ValueInspectorButton>
)
}
const renderFailureCount = (record: FunnelCorrelation): JSX.Element => {
return (
<ValueInspectorButton
onClick={() => {
openCorrelationPersonsModal(record, false)
}}
>
{record.failure_count}
</ValueInspectorButton>
)
}
const renderOddsRatioTextRecord = (record: FunnelCorrelation): JSX.Element => {
const get_friendly_numeric_value = (value: number): string => {
if (value < 10 && !Number.isInteger(value)) {
return value.toFixed(1)
}
return value.toFixed()
}
const is_success = record.correlation_type === FunnelCorrelationType.Success
const { first_value, second_value } = parseDisplayNameForCorrelation(record)
return (
<>
<h4>
{is_success ? (
<RiseOutlined style={{ color: 'green' }} />
) : (
<FallOutlined style={{ color: 'red' }} />
)}{' '}
<PropertyKeyInfo value={first_value} />
{second_value !== undefined && (
<>
{' :: '}
<PropertyKeyInfo value={second_value} disablePopover />
</>
)}
</h4>
<div>
{capitalizeFirstLetter(aggregationTargetLabel.plural)}{' '}
{filters.aggregation_group_type_index != undefined ? 'that' : 'who'} converted were{' '}
<mark>
<b>
{get_friendly_numeric_value(record.odds_ratio)}x {is_success ? 'more' : 'less'} likely
</b>
</mark>{' '}
to have this property value
</div>
</>
)
}
return stepsWithCount.length > 1 ? (
<VisibilitySensor offset={150} id={`${correlationPropKey}-properties`}>
<div className="funnel-correlation-table">
<span className="funnel-correlation-header">
<span className="table-header">
<IconSelectProperties style={{ marginRight: 4, opacity: 0.5, fontSize: 24 }} />
CORRELATED PROPERTIES
</span>
<span className="table-options">
{allProperties.length > 0 && (
<>
<p className="title">PROPERTIES </p>
<PropertyNamesSelect
value={new Set(propertyNames)}
onChange={(selectedProperties: string[]) => setPropertyNames(selectedProperties)}
allProperties={inversePropertyNames(excludedPropertyNames || [])}
/>
</>
)}
<p className="title" style={{ marginLeft: 8 }}>
CORRELATION
</p>
<div
className="tab-btn ant-btn"
style={{
paddingTop: '1px',
paddingBottom: '1px',
borderTopRightRadius: 0,
borderBottomRightRadius: 0,
}}
onClick={() => onClickCorrelationType(FunnelCorrelationType.Success)}
>
<Checkbox
checked={propertyCorrelationTypes.includes(FunnelCorrelationType.Success)}
style={{
pointerEvents: 'none',
}}
>
Success
</Checkbox>
</div>
<div
className="tab-btn ant-btn"
style={{
marginRight: '8px',
paddingTop: '1px',
paddingBottom: '1px',
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0,
}}
onClick={() => onClickCorrelationType(FunnelCorrelationType.Failure)}
>
<Checkbox
checked={propertyCorrelationTypes.includes(FunnelCorrelationType.Failure)}
style={{
pointerEvents: 'none',
}}
>
Dropoff
</Checkbox>
</div>
</span>
</span>
<Table
dataSource={propertyCorrelationValues}
loading={propertyCorrelationsLoading}
scroll={{ x: 'max-content' }}
size="small"
rowKey={(record: FunnelCorrelation) => record.event.event}
pagination={{
pageSize: 5,
hideOnSinglePage: true,
onChange: (page, page_size) =>
reportCorrelationInteraction(FunnelCorrelationResultsType.Properties, 'pagination change', {
page,
page_size,
}),
}}
>
<Column
title={`${capitalizeFirstLetter(aggregationTargetLabel.singular)} property`}
key="propertName"
render={(_, record: FunnelCorrelation) => renderOddsRatioTextRecord(record)}
align="left"
/>
<Column
title={
<div className="flex-center">
Completed
<Tooltip
title={`${capitalizeFirstLetter(aggregationTargetLabel.plural)} ${
filters.aggregation_group_type_index != undefined ? 'that' : 'who'
} have this property and completed the entire funnel.`}
>
<InfoCircleOutlined className="column-info" />
</Tooltip>
</div>
}
key="success_count"
render={(_, record: FunnelCorrelation) => renderSuccessCount(record)}
width={90}
align="center"
/>
<Column
title={
<div className="flex-center">
Dropped off
<Tooltip
title={
<>
{capitalizeFirstLetter(aggregationTargetLabel.plural)}{' '}
{filters.aggregation_group_type_index != undefined ? 'that' : 'who'} have
this property and did <b>not complete</b> the entire funnel.
</>
}
>
<InfoCircleOutlined className="column-info" />
</Tooltip>
</div>
}
key="failure_count"
render={(_, record: FunnelCorrelation) => renderFailureCount(record)}
width={120}
align="center"
/>
<Column
title=""
key="actions"
render={(_, record: FunnelCorrelation) => <CorrelationActionsCell record={record} />}
align="center"
width={30}
/>
</Table>
</div>
</VisibilitySensor>
) : null
}
Example #3
| 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>
);
}
