@ant-design/icons#TwitterOutlined TypeScript Examples
The following examples show how to use
@ant-design/icons#TwitterOutlined.
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: 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 #2
| Source File: index.tsx From nanolooker with MIT License | 4 votes |
|
StatisticsSocialPage: React.FC = () => {
const { t } = useTranslation();
const { statistics, isLoading } = useStatisticsSocial();
const [filter, setFilter] = React.useState(Filter.REDDIT);
React.useEffect(() => {
if (isLoading || !statistics.length) return;
const data = orderBy(
statistics.filter(
statistic => !!statistic[filterPerBillionToKeyMap[filter]],
),
[filterPerBillionToKeyMap[filter]],
["desc"],
).map((statistic, index) => {
statistic.rank = index + 1;
return statistic;
});
const config = {
data,
xField: filterPerBillionToKeyMap[filter],
yField: "name",
seriesField: "name",
height: data.length * 40,
legend: {
visible: false,
},
label: {
content: (data: CryptoCurrency) => {
const group = new G.Group({});
group.addShape({
type: "image",
attrs: {
x: 0,
y: 0,
width: 20,
height: 20,
img: `/cryptocurrencies/logo/${data.symbol}.png`,
},
});
group.addShape({
type: "text",
attrs: {
x: 25,
y: 5,
text: data[filterPerBillionToKeyMap[filter]],
textAlign: "left",
textBaseline: "top",
fill: "#595959",
},
});
return group;
},
position: "right",
offset: 4,
},
tooltip: {
// @ts-ignore
title: (text, data) => `#${data.rank} ${text}`,
customItems: (originalItems: any) => {
const items = [
{
color: originalItems[0].color,
name: t("pages.statistics.social.engagementPerBillion"),
value: originalItems[0].value,
},
{
name: t("pages.statistics.social.marketCap"),
value: `$${new BigNumber(originalItems[0].data.marketCap)
.dividedBy(1_000_000_000)
.toFixed(2)}B`,
},
{
name: t("pages.statistics.social.totalEngagement"),
value: originalItems[0].data[filterTotalToKeyMap[filter]],
},
];
return items;
},
},
};
if (!socialChart) {
socialChart = new Bar(
document.getElementById("social-chart") as HTMLElement,
// @ts-ignore
config,
);
socialChart.render();
} else {
socialChart.update(config);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isLoading, statistics, filter]);
React.useEffect(() => {
return () => {
socialChart?.destroy();
socialChart = null;
};
}, []);
return (
<>
<Helmet>
<title>{t("pages.statistics.social.title")}</title>
</Helmet>
<Title level={3}>
{t("pages.statistics.social.title")}
<Tooltip placement="right" title={t("tooltips.socialStatistics")}>
<QuestionCircle />
</Tooltip>
</Title>
<Card size="small" bordered={false} className="detail-layout">
<Row>
<Col xs={24}>
<Radio.Group
value={filter}
onChange={({ target: { value } }) => {
setFilter(value);
}}
>
<Radio.Button value={Filter.REDDIT}>
<RedditOutlined /> Reddit
</Radio.Button>
<Radio.Button value={Filter.TWITTER}>
<TwitterOutlined /> Twitter
</Radio.Button>
<Radio.Button value={Filter.GITHUB}>
<GithubOutlined /> Github
</Radio.Button>
</Radio.Group>
<br />
<br />
<Text>
{t(`pages.statistics.social.${filterTotalToKeyMap[filter]}`)}
</Text>
</Col>
</Row>
<Row>
<Col xs={24}>
<Skeleton loading={isLoading || !statistics.length} active>
<div id="social-chart" />
</Skeleton>
</Col>
</Row>
</Card>
</>
);
}
Example #3
| Source File: Participants.tsx From nanolooker with MIT License | 4 votes |
|
Participants: React.FC = () => {
const { account } = useParams<PageParams>();
const [currentPage, setCurrentPage] = React.useState<number>(1);
const {
participants,
meta: { total, perPage },
isLoading: isParticipantsLoading,
} = useParticipants({
account,
page: currentPage,
});
const history = useHistory();
const isLargeAndLower = !useMediaQuery("(min-width: 992px)");
const onChange = (e: React.ChangeEventHandler<HTMLInputElement>) => {
// @ts-ignore
const { value } = e.currentTarget;
if (value && isValidAccountAddress(value)) {
history.push(`/treasure-hunt/${value}`);
} else if (!value && history.location.pathname !== "/treasure-hunt") {
history.push("/treasure-hunt");
}
};
return (
<>
<Rules />
<Title level={3} id="treasure-hunt-title">
{total} Participant{participants.length === 1 ? "" : "s"}
</Title>
<Input
defaultValue={account}
// @ts-ignore
onChange={onChange}
placeholder="Search for participant address"
style={{ maxWidth: isLargeAndLower ? "100%" : "60%", marginBottom: 12 }}
allowClear
></Input>
<Card size="small" bordered={false} className="detail-layout">
{!isLargeAndLower ? (
<Row gutter={6}>
<Col md={8}>Participant{participants.length === 1 ? "" : "s"}</Col>
<Col md={3} style={{ textAlign: "center" }}>
<TwitterOutlined /> Twitter
</Col>
<Col md={3} style={{ textAlign: "center" }}>
NanoCafe.cc
</Col>
<Col md={3} style={{ textAlign: "center" }}>
Representative
</Col>
<Col md={3} style={{ textAlign: "center" }}>
NanoBrowserQuest
</Col>
<Col md={4} style={{ textAlign: "center" }}>
Payout
</Col>
</Row>
) : null}
{isParticipantsLoading
? Array.from(Array(5).keys()).map(index => (
<Row gutter={6} key={index}>
<Col md={8}>
<Skeleton loading={true} paragraph={false} active />
</Col>
<Col md={3}>
<Skeleton loading={true} paragraph={false} active />
</Col>
<Col md={3}>
<Skeleton loading={true} paragraph={false} active />
</Col>
<Col md={3}>
<Skeleton loading={true} paragraph={false} active />
</Col>
<Col md={3}>
<Skeleton loading={true} paragraph={false} active />
</Col>
<Col md={4}>
<Skeleton loading={true} paragraph={false} active />
</Col>
</Row>
))
: null}
{!isParticipantsLoading && !participants.length ? (
<Row>
<Col xs={24} style={{ textAlign: "center" }}>
<Empty
image={Empty.PRESENTED_IMAGE_SIMPLE}
description={
account
? "Participant not found, if you posted your account on the twitter thread, wait a few seconds."
: "No participants found"
}
style={{ padding: "12px" }}
/>
</Col>
</Row>
) : null}
{!isParticipantsLoading && participants.length ? (
<>
{participants.map(
({
account,
twitter,
nanoCafe,
representative,
nanoBrowserQuest,
payout,
}) => (
<Row gutter={6} key={account}>
<Col xs={24} lg={8}>
<Link
to={`/account/${account}`}
style={{ fontSize: "14px" }}
className="break-word"
>
{account}
</Link>
</Col>
<Col xs={12} md={6} lg={3} style={{ textAlign: "center" }}>
<Space size={[6, 12]}>
{isLargeAndLower ? (
<>
<TwitterOutlined /> Twitter
</>
) : null}
<Progress isCompleted={twitter !== "0"} />
</Space>
</Col>
<Col xs={12} md={6} lg={3} style={{ textAlign: "center" }}>
<Space size={6}>
{isLargeAndLower ? <Text>NanoCafe.cc</Text> : null}
<Progress hash={nanoCafe} />
</Space>
</Col>
<Col xs={12} md={6} lg={3} style={{ textAlign: "center" }}>
<Space size={6}>
{isLargeAndLower ? <Text>Representative</Text> : null}
<Progress hash={representative} />
</Space>
</Col>
<Col xs={12} md={6} lg={3} style={{ textAlign: "center" }}>
<Space size={6}>
{isLargeAndLower ? <Text>NanoBrowserQuest</Text> : null}
<Progress hash={nanoBrowserQuest} />
</Space>
</Col>
<Col xs={24} md={6} lg={4} style={{ textAlign: "center" }}>
{payout && payout !== "0" ? (
<Link to={`block/${payout}`} className="truncate">
{payout}
</Link>
) : (
"Waiting for completion"
)}
</Col>
</Row>
),
)}
{!account && perPage ? (
<Row className="row-pagination">
<Col xs={24} style={{ textAlign: "right" }}>
<Pagination
size="small"
{...{
total,
pageSize: perPage,
current: currentPage,
disabled: false,
onChange: (page: number) => {
const element = document.getElementById(
"treasure-hunt-title",
);
element?.scrollIntoView();
setCurrentPage?.(page);
},
showSizeChanger: false,
}}
/>
</Col>
</Row>
) : null}
</>
) : null}
</Card>
</>
);
}
Example #4
| Source File: index.tsx From amiya with MIT License | 4 votes |
|
export default function Demo() {
return (
<AySearchTable
api={listApi}
rowKey="id"
title="员工列表"
dialogFormExtend={{ addApi, updateApi }}
deleteApi={deleteApi}
ctrl={ctrl}
>
<AyFields>
<AyField
title="头像"
key="avatar"
width={70}
renderType="image"
props={{
width: 60,
height: 60
}}
dialog={{
title: '选择头像',
type: 'card-group',
tooltip: '选择一个喜欢的头像',
required: true,
cardStyle: {
padding: 2
},
options: [
require('../images/avatar1.jpg'),
require('../images/avatar2.jpg'),
require('../images/avatar3.jpg'),
require('../images/avatar4.jpg'),
require('../images/avatar5.jpg')
].map(src => {
return {
label: <img src={src} width="50" height="50" />,
value: src
}
})
}}
/>
<AyField title="用户名称" key="nickname" search dialog={{ required: true }} />
<AyField title="登录账号" key="username" search dialog={{ required: true }} />
<AyField
title="所属角色"
key="character"
type="select"
search
renderType="group"
split="\"
size={0}
tooltip="当前绑定的角色"
after={
<AyButton tooltip="编辑角色" type="link" icon={<EditOutlined />} onClick={() => message.info('未实现')} />
}
options={[
{ label: '超级管理员', value: 1 },
{ label: '财务', value: 2 },
{ label: '运营', value: 3 }
]}
/>
<AyField title="邮箱地址" key="email" dialog />
<AyField
title="第三方绑定"
key="linkAccount"
renderType="group"
after={
<div>
<a onClick={() => message.info('未实现')}>添加绑定</a>
</div>
}
options={[
{ label: <WeiboCircleOutlined style={{ color: '#d52c2b', fontSize: 20 }} />, value: 'weibo' },
{ label: <QqOutlined style={{ color: '#333', fontSize: 20 }} />, value: 'qq' },
{ label: <WechatOutlined style={{ color: '#03dc6c', fontSize: 20 }} />, value: 'wechat' },
{ label: <TwitterOutlined style={{ color: '#1d9bf0', fontSize: 20 }} />, value: 'twitter' }
]}
/>
<AyField
title="在职状态"
key="status"
type="select"
search
renderType="status"
dialog={{
type: 'radio-group',
required: true,
defaultValue: 1,
optionType: 'button'
}}
options={[
{ label: '在职', value: 1, color: 'green' },
{ label: '离职', value: 2, color: 'red' },
{ label: '退休', value: 3, color: 'cyan' },
{ label: '停薪', value: 4, color: 'purple' }
]}
/>
</AyFields>
<Space size="large">
<Text type="secondary">初始登录密码：111111</Text>
<AyAction action="add">新增员工</AyAction>
</Space>
</AySearchTable>
)
}
