@ant-design/icons#BuildOutlined TypeScript Examples
The following examples show how to use
@ant-design/icons#BuildOutlined.
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: AppsPage.tsx From disco-cube-admin with MIT License | 5 votes |
|
apps: Record<
AppNames,
{
path: string;
render: () => React.ReactNode;
label: string;
icon: React.ForwardRefExoticComponent<AntdIconProps & React.RefAttributes<HTMLSpanElement>>;
}
> = {
rpiDemos: {
path: `/rpi-demos`,
label: "RPI Demos",
icon: BuildOutlined,
render: () => <ConnectedRpiDemos />,
},
video: {
path: `/video`,
label: "Video",
icon: VideoCameraOutlined,
render: () => <ConnectedVideoApp />,
},
cubemap: {
path: `/cubemap`,
label: "Cubemap",
icon: PictureOutlined,
render: () => <ConnectedCubemapApp />,
},
paint: {
path: `/paint`,
label: "Paint",
icon: HighlightOutlined,
render: () => <ConnectedPaintApp />,
},
debug: {
path: `/debug`,
label: "Debug",
icon: BugOutlined,
render: () => <ConnectedCommonApp appName={`debug`} />,
},
sparkle: {
path: `/sparkle`,
label: "Sparkle",
icon: StarOutlined,
render: () => <ConnectedCommonApp appName={`sparkle`} />,
},
sprinkles: {
path: `/sprinkles`,
label: "Sprinkles",
icon: SmallDashOutlined,
render: () => <ConnectedCommonApp appName={`sprinkles`} />,
},
particles: {
path: `/particles`,
label: "Particles",
icon: MoreOutlined,
render: () => <ConnectedCommonApp appName={`particles`} />,
},
particleFlow: {
path: `/particleFlow`,
label: "Particle Flow",
icon: DeploymentUnitOutlined,
render: () => <ConnectedCommonApp appName={`particleFlow`} />,
},
tilt: {
path: `/tilt`,
label: "Tilt",
icon: RotateRightOutlined,
render: () => <ConnectedCommonApp appName={`tilt`} />,
},
maze: {
path: `/maze`,
label: "Maze",
icon: TableOutlined,
render: () => <ConnectedCommonApp appName={`maze`} />,
},
}
Example #2
| 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>
);
}
Example #3
| Source File: index.tsx From visual-layout with MIT License | 4 votes |
|
NodeTree = () => {
const [search, setSearch] = useState('');
const [expandedKeys, setExpandedKeys] = useState<Key[]>([]);
const [autoExpandParent, setAutoExpandParent] = useState(true);
const { appService, refresh } = useContext(AppContext);
const page = appService.project.getCurrentPage();
useEffect(() => {
setAutoExpandParent(true);
setExpandedKeys([
// @ts-ignore
...new Set([
...expandedKeys,
...(page?.currentNode.map(({ id }) => id) || []),
]),
]);
// eslint-disable-next-line
}, [appService.project, page?.currentNode[0]]);
const trees = useMemo((): DataNode[] => {
const getTree = (node: NodeService | string, id?: number): DataNode => {
if (isString(node)) {
return {
title: node,
key: `${id}:${node}`,
icon: (
<Tooltip placement="right" title="Text">
<ProfileOutlined />
</Tooltip>
),
};
} else {
const { id, _name, type, children } = node;
nodeKeyId.set(id, node);
return {
title: `${_name}`,
key: id,
icon: ({ selected }) =>
selected ? (
<CheckCircleTwoTone twoToneColor="#52c41a" />
) : type === 'Component' ? (
<Tooltip placement="right" title="Component">
<AppstoreOutlined />
</Tooltip>
) : (
<Tooltip placement="right" title="Element">
<BuildOutlined />
</Tooltip>
),
children: isString(children)
? [
{
title: children,
key: `${id}:${children}`,
icon: (
<Tooltip placement="right" title="Text">
<ProfileOutlined />
</Tooltip>
),
},
]
: (children
?.map(child => child && getTree(child, id))
.filter(_ => _) as DataNode[]),
};
}
};
return page?.page ? [getTree(page.page)] : [];
// eslint-disable-next-line
}, [refresh, page?.page]);
const filter = (treeData: DataNode[]): DataNode[] => {
function matchSearch<T extends string>(title: T): boolean {
return !search || new RegExp(_.escapeRegExp(search), 'ig').test(title);
}
return treeData
.map(tree => {
const { title, children } = tree;
tree.children = children && filter(children);
if (tree.children?.length || matchSearch(title as string)) {
return tree;
}
return false;
})
.filter(_ => _) as DataNode[];
};
return (
<div className={styles.container}>
<div className={styles.search}>
<Input.Search
placeholder="Search Node"
onChange={e => setSearch(e.target.value)}
/>
</div>
<div className={styles.scrollWarper}>
<Tree
showIcon
onSelect={(_, { node }) => {
if (node) {
const nodeService = nodeKeyId.get(node.key);
if (nodeService) {
page.setCurrentNode([nodeService]);
}
}
}}
showLine={{ showLeafIcon: false }}
selectedKeys={
appService.project.getCurrentPage()?.currentNode.map(({ id }) => id) ||
[]
}
autoExpandParent={autoExpandParent}
expandedKeys={expandedKeys}
onExpand={expandedKeysValue => {
setAutoExpandParent(false);
setExpandedKeys(expandedKeysValue);
}}
treeData={filter(cloneJsxObject(trees))}
/>
</div>
</div>
);
}
Example #4
| Source File: ProtofileManager.tsx From Protoman with MIT License | 4 votes |
|
ProtofileManager: React.FunctionComponent<Props> = ({ collectionName }) => {
const dispatch = useDispatch();
const collection = useSelector((s: AppState) => getByKey(s.collections, collectionName));
const filepaths = collection?.protoFilepaths;
const rootPath = collection?.protoRootPath;
const buildStatus = collection?.buildStatus;
const buildError = collection?.buildError;
const [selected, setSelected] = React.useState<string[]>([]);
const [draft, setDraft] = React.useState<string[]>([]);
const [draftRootPath, setDraftRootPath] = React.useState<string>('');
const filepickerRef = React.useRef<HTMLInputElement>(null);
React.useEffect(() => {
if (filepaths) {
setDraft([...filepaths]);
}
}, [filepaths]);
React.useEffect(() => {
if (rootPath) {
setDraftRootPath(rootPath ?? '');
}
}, [rootPath]);
if (!collection) return null;
function handleFileInput(files: FileList | null): void {
if (!files) return;
dispatch(resetProtofileStatus(collectionName));
const filepaths: string[] = [];
for (let i = 0; i < files.length; i++) {
const file = files.item(i);
if (file) {
filepaths.push(file.path);
}
}
if (filepickerRef.current) {
filepickerRef.current.value = '';
}
setDraft(Array.from(new Set([...draft, ...filepaths])).sort());
}
function handleFileDelete(): void {
setDraft(
Array.from(
selected.reduce((s, path) => {
s.delete(path);
return s;
}, new Set(draft)),
),
);
setSelected([]);
}
function tryBuilding(): void {
dispatch(buildProtofiles(collectionName, draft, draftRootPath || undefined));
}
const triggerFileDialog = (): void => filepickerRef.current?.click();
function handleToggle(filepath: string, checked: boolean): void {
if (checked) {
setSelected([...selected, filepath]);
} else {
const filtered = selected.filter(s => s !== filepath);
setSelected([...filtered]);
}
}
function handleGlobalToggle(checked: boolean): void {
if (checked) {
setSelected([...draft]);
} else {
setSelected([]);
}
}
function handleCloseFM(): void {
dispatch(closeFM());
}
return (
<Wrapper>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<Typography.Title level={4}>.proto files for {collectionName}</Typography.Title>
<Button shape="circle" danger size="small" onClick={handleCloseFM}>
<CloseOutlined />
</Button>
</div>
<div style={{ marginBottom: 8 }}>
<Input
addonBefore="proto_path"
value={draftRootPath}
onChange={(e): void => setDraftRootPath(e.target.value)}
/>
</div>
{draft.length > 0 ? (
<>
<Checkbox
indeterminate={0 < selected.length && selected.length < draft.length}
checked={selected.length === draft.length}
onChange={(b): void => handleGlobalToggle(b.target.checked)}
/>
<span style={{ marginLeft: 8 }}>Check All</span>
<Divider style={{ margin: '4px 0px', backgroundColor: 'darkgray' }} />
</>
) : null}
<Scrollable>
<List
dataSource={draft} // won't update by itself
renderItem={(filepath): React.ReactNode => (
<List.Item style={{ padding: '4px 0px', width: '100%' }}>
<Row align="middle" style={{ width: '100%' }}>
<Col span={1}>
<Checkbox
checked={selected.includes(filepath)}
onChange={(b): void => handleToggle(filepath, b.target.checked)}
/>
</Col>
<Col span={23}>
<p style={{ width: '100%', marginLeft: 8, marginBottom: 0 }}>{filepath}</p>
</Col>
</Row>
</List.Item>
)}
/>
</Scrollable>
<input
type="file"
accept=".proto"
multiple
hidden
ref={filepickerRef}
onChange={(e): void => handleFileInput(e.target.files)}
/>
{buildStatus === 'failure' ? (
<Alert message={buildError?.toString() || ' '} type="error" closeText="Close" />
) : null}
{buildStatus === 'success' ? <Alert message="Build success!" type="success" closeText="Close" /> : null}
<div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8 }}>
<div>
<Button onClick={triggerFileDialog}>
<PlusOutlined />
</Button>
<Button onClick={handleFileDelete} danger style={{ marginLeft: 8 }} disabled={selected.length === 0}>
Delete
</Button>
</div>
<div>
<Button
onClick={tryBuilding}
type="primary"
style={{ marginLeft: 8 }}
loading={buildStatus === 'building'}
ghost
>
<BuildOutlined />
Build and Save
</Button>
</div>
</div>
</Wrapper>
);
}
