Storybook

Icons

How to use

Import the required icons from the '@apitable/icons' library.


import { TitleFavoriteFilled } from '@apitable/icons';

Basic Examples

Color

Size

Inherit Parent Color

Canvas Support

The icon is formatted by the 'toString' method and becomes a graph drawn by Path. The icon is drawn in canvas.


import React, { useEffect } from 'react';
import { TitleFavoriteFilled } from '@apitable/icons';

export const Icon2Canvas = () => {
  useEffect(()=>{
    const canvas = document.getElementById('canvas') as HTMLCanvasElement;
    if (canvas){
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = 'red';
      const p = new Path2D(TitleFavoriteFilled.toString());
      ctx.fill(p);
    }
  },[])
  return (
    <div>
      <TitleFavoriteFilled />
      <canvas id="canvas" height="50" style={{ backgroundColor: '#eee' }}/>
    </div>
  )
}

The effect is as follows:

API Interface

Name	Type	Required	Description	Default
size	number \| string	true	icon size	16px
color	string	false	color	16px
currentColor	boolean	false	display the same color as the parent element
className	string	false	override style passed in className

All Icons

ChevronDownOutlined
ArrowDownOutlined
ArrowUpOutlined
ArrowLeftOutlined
ArrowRightOutlined
DeleteOutlined
FolderNormalFilled
FavoriteOutlined
UnfavoriteOutlined
AddfileOutlined
AddfolderOutlined
ImportOutlined
ExportOutlined
CsvOutlined
ExcelOutlined
DescriptionOutlined
ColumnTextFilled
ColumnLongtextFilled
ColumnMultipleFilled
ColumnFigureFilled
ColumnLinktableFilled
ColumnRatingFilled
ColumnPhoneFilled
ColumnAttachmentFilled
ColumnUrlOutlined
ColumnCurrencyFilled
ColumnPercentFilled
CalenderLeftOutlined
CalenderRightOutlined
CalendarYearminusOutlined
CalendarYearplusOutlined
ZoomInOutlined
ZoomOutOutlined
RotateOutlined
DownloadOutlined
UndoFilled
RedoFilled
FilterFilled
RankFilled
RowhightShortFilled
RowhightMediumFilled
RowhightHighFilled
RowhightExtremhighFilled
SettingFilled
ListOutlined
TilingFilled
CoverOutlined
CoverDisOutlined
NotificationSmallOutlined
DragOutlined
ColumnAutonumberFilled
ColumnCreatedbyFilled
ColumnCreatedtimeFilled
ColumnLastmodifiedbyFilled
ColumnLastmodifiedtimeFilled
RecoverOutlined
RankUpOutlined
RankDownOutlined
WidgetOutlined
ViewContactOutlined
TemplateSmallOutlined
ActivityRecordOutlined
CommentBjFilled
ShareQrcodeOutlined
FormOutlined
AttachmentPasteOutlined
ShareStarFilled
AttachmentLocalOutlined
ProsecuteOutlined
AddformOutlined
FilterOutlined
GroupOutlined
ShareOutlined
CopyOutlined
EditOutlined
NarrowRecordOutlined
ExpandRecordOutlined
AddOutlined
MoreOutlined
FeedbackOutlined
RefreshOutlined
ReloadOutlined
SearchOutlined
ShareFilled
SelectOutlined
EditDescribeOutlined
PicLogoFilled
UploadOutlined
LockFilled
InformationSmallOutlined
LoadingFilled
ActivityOutlined
EmailSmallOutlined
FixedOutlined
SlideOutlined
LockOutlined
HistoryOutlined
PowerOutlined
LogoutOutlined
DashboardOutlined
ManageAddressOutlined
WorkbenchSmallOutlined
ManagePowerOutlined
HornOutlined
NotificationReadOutlined
WidgetExpandOutlined
WidgetExportOutlined
SettingOutlined
ManageApplicationOutlined
PasteOutlined
PreviousOutlined
NextOutlined
TitleWorkFilled
TitleRecycleClosedFilled
TokenOutlined
AdviseOutlined
WebsiteOutlined
CourseOutlined
BookOutlined
KeyboardShortcutsOutlined
TitleTemplateFilled
DesktopOutlined
GuideOutlined
PhoneOutlined
EmailLargeOutlined
RelationOutlined
MobileDingdingFilled
MobileFeishuFilled
MobileQqFilled
EyeCloseOutlined
EyeNormalOutlined
PhonenumberFilled
EmailSigninFilled
InvitecodeFilled
MobilePhoneOutlined
JoinOutlined
TriangleDown16Filled
TriangleRight16Filled
PulldownFilled
RetractFilled
TriangleDown10Filled
TriangleRight10Filled
CloseMiddleOutlined
CloseLargeOutlined
HidefieldOffFilled
ManageOutlined
InformationLargeOutlined
NotificationLargeOutlined
NavDescriptionOutlined
NavDrawerOutlined
NavShareOutlined
TemplateLargeOutlined
AddressOutlined
ChevronLeftOutlined
ChevronRightOutlined
ChevronUpOutlined
CloseSmallOutlined
ApiOutlined
FileOutlined
PackupOutlined
OpenupOutlined
VikabyOutlined
TaskOutlined
GotoLargeOutlined
GotoSmallOutlined
FolderEmptyFilled
DatasheetOutlined
MenuOutlined
HidefieldOffLargeFilled
FavoriteFilled
UpgradeFilled
NewtabOutlined
MultiplemembersFilled
DemoOutlined
RoadmapOutlined
ClassroomOutlined
GanttLeftFilled
GanttRightFilled
AccountFilled
AdministratorsFilled
InviteOutlined
AccountOutlined
QuitspaceOutlined
VisitorOutlined
DepartmentOutlined
ShareJoinOutlined
GroupFilled
BrokenlinkOutlined
Brokenlink1Outlined
OperationOutlined
Headline1Filled
HighlightFilled
BoldFilled
QuoteFilled
CodeFilled
UnorderedFilled
OrderedFilled
GanttPackupOutlined
GanttOpenupOutlined
VerificationCodeFilled
DividingLineFilled
TaskListFilled
TextMiddleFilled
TextRightFilled
TextLeftFilled
StrikethroughFilled
ItalicsFilled
Headline3Filled
Headline2Filled
BodyFilled
UnderlineFilled
ColumnCalendarNonzeroFilled
ColumnTextNonzeroFilled
ColumnEmailNonzeroFilled
WarningTriangleNonzeroFilled
EditGanttDescribeFilled
CommentBjSmallFilled
CommentBjEntireFilled
TitleFavoriteFilled
LogoWhiteFilled
ColumnSingleNonzeroFilled
ColumnLookupNonzeroFilled
OrgZoomOutOutlined
MirrorGalleryFilled
MirrorOutlined
LockNonzeroOutlined
LabelSmallOutlined
SyncOffOutlined
SyncOnOutlined
CommonClearOutlined
MobileWecomFilled
QqFilled
DingdingFilled
WechatFilled
MobileWechatFilled
SolutionOutlined
PercentOutlined
DepartmentNonzeroOutlined
HandoverOutlined
UnpublishOutlined
CommunityOutlined
RobotOutlined
ExpandOutlined
GoldFilled
AutosaveOutlined
MirrorArchitectureFilled
FitviewOutlined
CollapseOutlined
TestOutlined
EnterpriseFilled
CommentOutlined
EmojiOutlined
LogoPurpleFilled
OrgAddFilled
AlipayFilled
BankFilled
WechatpayFilled
SelectMarkFilled
ZanOutlined
ServeOutlined
BugOutlined
AdviseSmallOutlined
SolutionSmallOutlined
AttentionOutlined
ClockFilled
DuplicateOutlined
FreezeOutlined
RocketOutlined
WidgetNarrowOutlined
VerifyFilled
LogotextFilled
SidescreenOutlined
MiddlescreenOutlined
AuditOutlined
DebugOutlined
LogoTextFilled
LogoTextEnFilled
ColumnCascadeOutlined
ApilogoFilled
ApilogotextFilled
WebOutlined
PositionOutlined
FullscreenOutlined
UnfullscreenOutlined
ClearOutlined
PauseFilled
ConnectOutlined
RestoreOutlined
MovefileOutlined
ChartColumnNormalFilled
ChartColumnStackFilled
ChartColumnPercentFilled
ChartBarPercentFilled
ChartBarStackFilled
ChartBarNormalFilled
ChartLinePercentFilled
ChartPieFilled
ChartLineNormalFilled
ChartLineStackFilled
ChartDountFilled
ChartScatterplotNormalFilled
UncheckedOutlined
CheckedFilled
CheckOutlined
ColumnSingleFilled
ColumnCheckboxFilled
ColumnCalendarFilled
ColumnEmailFilled
ColumnLookupFilled
ColumnFormulaFilled
RelationReduceFilled
CancelFilled
FolderUnfoldFilled
HideFilled
ViewFormFilled
ViewCalendarFilled
ViewKanbanFilled
ViewGalleryFilled
ViewGridFilled
EditDescribeFilled
MoreStandOutlined
WarningTriangleFilled
AddFilled
LogoFilled
SuccessFilled
ErrorFilled
WarnFilled
DefaultFilled
NetworkFilled
HeadBackgroundFilled
EmailBackgroundFilled
HidefieldOnFilled
WorkbenchLargeOutlined
LeftFilled
RightFilled
RestingOutlined
SelectFilled
HidefieldOnLargeFilled
DescriptionFilled
BronzeFilled
SilverFilled
InfoFilled
AttachmentImgPlaceholderFilled
PreviewCancelFilled
NextFilled
PreviousFilled
CountdownFilled
ViewGanttOutlined
ViewGanttGreyOutlined
InviteBoxFilled
PlayFilled
MirrorGridFilled
MirrorGanttFilled
MirrorKanbanFilled
MirrorCalendarFilled
FeishuFilled
WecomFilled
LogoLargeFilled
RunFilled
UpgradeColorfulFilled
WebhookFilled
InviteSmallFilled
ViewArchitectureFilled

No Preview

Icons

How to use

Basic Examples

Color

Size

Inherit Parent Color

Canvas Support

API Interface

All Icons