diff --git a/docs/documentation/docs/assets/IconPickerOverview.png b/docs/documentation/docs/assets/IconPickerOverview.png new file mode 100644 index 000000000..ee6478841 Binary files /dev/null and b/docs/documentation/docs/assets/IconPickerOverview.png differ diff --git a/docs/documentation/docs/assets/IconPickerPanel.gif b/docs/documentation/docs/assets/IconPickerPanel.gif new file mode 100644 index 000000000..f1c5ef14c Binary files /dev/null and b/docs/documentation/docs/assets/IconPickerPanel.gif differ diff --git a/docs/documentation/docs/controls/IconPicker.md b/docs/documentation/docs/controls/IconPicker.md new file mode 100644 index 000000000..f409f15c5 --- /dev/null +++ b/docs/documentation/docs/controls/IconPicker.md @@ -0,0 +1,48 @@ +# IconPicker control + +Control that allows to search and select an icon from office-ui-fabric-react icons. + +## Overview +The control allows selecting an icon from the list of icons available in the office-ui-fabric-react library. Icon list is a static copy of available icons. Currently, only one icon selection is supported. +![Icon Picker overview](../assets/IconPickerOverview.png) + + +## Displayed in the panel +Icon picker always opens a new panel where you can pick an icon. The panel displays all the icons and maintains readability. Picker does not displays selected icon outside the panel. +![Icon Picker panel](../assets/IconPickerPanel.gif) + + +## How to use this control + +- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../../#getting-started) page for more information about installing the dependency. +- Import the following module to your component: + +```TypeScript +import { IconPicker } from '@pnp/spfx-controls-react/lib/IconPicker'; +``` + +- Use the `IconPicker` control in your code as follows: + +```TypeScript + { this.setState({icon: iconName}); }} + onSave={(iconName: string) => { this.setState({icon: iconName}); }} +/> +``` + +## Implementation + +The IconPicker component can be configured with the following properties: + +| Property | Type | Required | Description | +| ---- | ---- | ---- | ---- | +| buttonLabel | string | no | Specifies the label of the icon picker button. | +| onSave | (iconName: string) => void | yes | Handler when the icon has been selected and picker has been closed. | +| onChange | (iconName: string) => void | no | Handler when the icon selection has been changed. | +| disabled | boolean | no | Specifies if the picker button is disabled | +| buttonClassName | boolean | no | If provided, additional class name will be added to the picker button | +| panelClassName | boolean | no | If provided, additional class name will be added to the picker panel | +| currentIcon | boolean | no | Specifies default selected icon | + +![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/IconPicker) diff --git a/docs/documentation/docs/index.md b/docs/documentation/docs/index.md index b735e98da..e75a450b0 100644 --- a/docs/documentation/docs/index.md +++ b/docs/documentation/docs/index.md @@ -40,6 +40,7 @@ The following controls are currently available: - [FilePicker](./controls/FilePicker) (control that allows to browse and select a file from various places) - [FileTypeIcon](./controls/FileTypeIcon) (Control that shows the icon of a specified file path or application) - [GridLayout](./controls/GridLayout) (control that renders a responsive grid layout for your web parts) +- [IconPicker](./controls/IconPicker) (control that allows to search and select an icon from office-ui-fabric icons) - [IFrameDialog](./controls/IFrameDialog) (renders a Dialog with an iframe as a content) - [ListItemPicker](./controls/ListItemPicker) (allows to select one or more items from a list) - [ListPicker](./controls/ListPicker) (allows to select one or multiple available lists/libraries of the current site) diff --git a/docs/documentation/mkdocs.yml b/docs/documentation/mkdocs.yml index 939be2871..4ba6f7fb0 100644 --- a/docs/documentation/mkdocs.yml +++ b/docs/documentation/mkdocs.yml @@ -17,6 +17,7 @@ nav: - FilePicker: 'controls/FilePicker.md' - FileTypeIcon: 'controls/FileTypeIcon.md' - GridLayout: 'controls/GridLayout.md' + - IconPicker: 'controls/IconPicker.md' - IFrameDialog: 'controls/IFrameDialog.md' - IFramePanel: 'controls/IFramePanel.md' - ListItemAttachments: 'controls/ListItemAttachments.md' diff --git a/src/IconPicker.ts b/src/IconPicker.ts new file mode 100644 index 000000000..3851b4236 --- /dev/null +++ b/src/IconPicker.ts @@ -0,0 +1 @@ +export * from './controls/iconPicker/index'; diff --git a/src/controls/iconPicker/IIconPickerProps.ts b/src/controls/iconPicker/IIconPickerProps.ts new file mode 100644 index 000000000..8db8b7e6b --- /dev/null +++ b/src/controls/iconPicker/IIconPickerProps.ts @@ -0,0 +1,30 @@ +export interface IIconPickerProps { + /** + * call-back function when icon selection has been confirmed + */ + onSave(iconName: string): void; + /** + * call-back function when icon has changed + */ + onChange?(iconName: string): void; + /** + * Specifies the label of the icon picker button + */ + buttonLabel?: string; + /** + * Specifies if the picker button is disabled + */ + disabled?: boolean; + /** + * Specifies a custom className for the picker button + */ + buttonClassName?: string; + /** + * Specifies a custom className for the panel element + */ + panelClassName?: string; + /** + * initially selected icon + */ + currentIcon?: string; +} \ No newline at end of file diff --git a/src/controls/iconPicker/IIconPickerState.ts b/src/controls/iconPicker/IIconPickerState.ts new file mode 100644 index 000000000..3029d6904 --- /dev/null +++ b/src/controls/iconPicker/IIconPickerState.ts @@ -0,0 +1,5 @@ +export interface IIconPickerState { + items: string[]; + currentIcon?: string; + isPanelOpen: boolean; +} \ No newline at end of file diff --git a/src/controls/iconPicker/IconNames.ts b/src/controls/iconPicker/IconNames.ts new file mode 100644 index 000000000..e3519e3a0 --- /dev/null +++ b/src/controls/iconPicker/IconNames.ts @@ -0,0 +1,1722 @@ +export class IconNames { + public static Icons = [ + 'InternetSharing', + 'Brightness', + 'MapPin', + 'Airplane', + 'Tablet', + 'QuickNote', + 'Video', + 'People', + 'Phone', + 'Pin', + 'Shop', + 'Stop', + 'Link', + 'AllApps', + 'Zoom', + 'ZoomOut', + 'Microphone', + 'Camera', + 'Attach', + 'Send', + 'FavoriteList', + 'PageSolid', + 'Forward', + 'Back', + 'Refresh', + 'Lock', + 'ReportHacked', + 'EMI', + 'MiniLink', + 'Blocked', + 'ReadingMode', + 'Favicon', + 'Remove', + 'Checkbox', + 'CheckboxComposite', + 'CheckboxFill', + 'CheckboxIndeterminate', + 'CheckboxCompositeReversed', + 'BackToWindow', + 'FullScreen', + 'Print', + 'Up', + 'Down', + 'OEM', + 'Save', + 'ReturnKey', + 'Cloud', + 'Flashlight', + 'CommandPrompt', + 'Sad', + 'RealEstate', + 'SIPMove', + 'EraseTool', + 'GripperTool', + 'Dialpad', + 'PageLeft', + 'PageRight', + 'MultiSelect', + 'KeyboardClassic', + 'Play', + 'Pause', + 'InkingTool', + 'Emoji2', + 'GripperBarHorizontal', + 'System', + 'Personalize', + 'SearchAndApps', + 'Globe', + 'EaseOfAccess', + 'ContactInfo', + 'Unpin', + 'Contact', + 'Memo', + 'IncomingCall', + 'Paste', + 'WindowsLogo', + 'Error', + 'GripperBarVertical', + 'Unlock', + 'Slideshow', + 'AutoEnhanceOn', + 'AutoEnhanceOff', + 'Color', + 'SaveAs', + 'Light', + 'Filters', + 'AspectRatio', + 'Contrast', + 'Redo', + 'Crop', + 'PhotoCollection', + 'Album', + 'Rotate', + 'PanoIndicator', + 'Translate', + 'RedEye', + 'ThumbnailView', + 'Package', + 'Telemarketer', + 'Warning', + 'Financial', + 'Education', + 'ShoppingCart', + 'Train', + 'Move', + 'TouchPointer', + 'Merge', + 'TurnRight', + 'Ferry', + 'Highlight', + 'PowerButton', + 'Tab', + 'Admin', + 'TVMonitor', + 'Speakers', + 'Game', + 'UnstackSelected', + 'StackIndicator', + 'Nav2DMapView', + 'StreetsideSplitMinimize', + 'Car', + 'Bus', + 'EatDrink', + 'SeeDo', + 'LocationCircle', + 'Home', + 'SwitcherStartEnd', + 'ParkingLocation', + 'IncidentTriangle', + 'Touch', + 'MapDirections', + 'CaretHollow', + 'CaretSolid', + 'History', + 'Location', + 'MapLayers', + 'SearchNearby', + 'Work', + 'Recent', + 'Hotel', + 'Bank', + 'LocationDot', + 'Dictionary', + 'ChromeBack', + 'FolderOpen', + 'PinnedFill', + 'RevToggleKey', + 'USB', + 'Previous', + 'Next', + 'Sync', + 'Help', + 'Emoji', + 'MailForward', + 'ClosePane', + 'OpenPane', + 'PreviewLink', + 'ZoomIn', + 'Bookmarks', + 'Document', + 'ProtectedDocument', + 'OpenInNewWindow', + 'MailFill', + 'ViewAll', + 'Switch', + 'Rename', + 'Go', + 'Remote', + 'SelectAll', + 'Orientation', + 'Import', + 'Picture', + 'ChromeClose', + 'ShowResults', + 'Message', + 'CalendarDay', + 'CalendarWeek', + 'MailReplyAll', + 'Read', + 'Cut', + 'PaymentCard', + 'Copy', + 'Important', + 'MailReply', + 'GotoToday', + 'Font', + 'FontColor', + 'FolderFill', + 'Permissions', + 'DisableUpdates', + 'Unfavorite', + 'Italic', + 'Underline', + 'Bold', + 'MoveToFolder', + 'Dislike', + 'Like', + 'AlignCenter', + 'OpenFile', + 'FontDecrease', + 'HighlightMappedShapes', + 'TextCallout', + 'IconSetsFlag', + 'VisioLogo', + 'VisioLogoFill', + 'VisioDocument', + 'TimelineProgress', + 'TimelineDelivery', + 'Backlog', + 'TeamFavorite', + 'TaskGroup', + 'TaskGroupMirrored', + 'ScopeTemplate', + 'AssessmentGroupTemplate', + 'NewTeamProject', + 'CommentAdd', + 'CommentNext', + 'CommentPrevious', + 'ShopServer', + 'LocaleLanguage', + 'QueryList', + 'UserSync', + 'UserPause', + 'StreamingOff', + 'ArrowTallUpLeft', + 'ArrowTallUpRight', + 'ArrowTallDownLeft', + 'ArrowTallDownRight', + 'FieldEmpty', + 'FieldFilled', + 'FieldChanged', + 'FieldNotChanged', + 'RingerOff', + 'PlayResume', + 'BulletedList2', + 'BulletedList2Mirrored', + 'ImageCrosshair', + 'GitGraph', + 'Repo', + 'RepoSolid', + 'FolderQuery', + 'FolderList', + 'FolderListMirrored', + 'LocationOutline', + 'POISolid', + 'CalculatorNotEqualTo', + 'BoxSubtractSolid', + 'BoxAdditionSolid', + 'BoxMultiplySolid', + 'BoxPlaySolid', + 'BoxCheckmarkSolid', + 'CirclePauseSolid', + 'CirclePause', + 'MSNVideosSolid', + 'CircleStopSolid', + 'CircleStop', + 'NavigateBack', + 'NavigateBackMirrored', + 'NavigateForward', + 'NavigateForwardMirrored', + 'UnknownSolid', + 'UnknownMirroredSolid', + 'CircleAddition', + 'CircleAdditionSolid', + 'FilePDB', + 'FileTemplate', + 'FileSQL', + 'FileJAVA', + 'FileASPX', + 'FileCSS', + 'FileSass', + 'FileLess', + 'FileHTML', + 'JavaScriptLanguage', + 'CSharpLanguage', + 'CSharp', + 'VisualBasicLanguage', + 'VB', + 'CPlusPlusLanguage', + 'CPlusPlus', + 'FSharpLanguage', + 'FSharp', + 'TypeScriptLanguage', + 'PythonLanguage', + 'PY', + 'CoffeeScript', + 'MarkDownLanguage', + 'FullWidth', + 'FullWidthEdit', + 'Plug', + 'PlugSolid', + 'PlugConnected', + 'PlugDisconnected', + 'UnlockSolid', + 'Variable', + 'Parameter', + 'CommentUrgent', + 'Storyboard', + 'DiffInline', + 'DiffSideBySide', + 'ImageDiff', + 'ImagePixel', + 'FileBug', + 'FileCode', + 'FileComment', + 'BusinessHoursSign', + 'FileImage', + 'FileSymlink', + 'AutoFillTemplate', + 'WorkItem', + 'WorkItemBug', + 'LogRemove', + 'ColumnOptions', + 'Packages', + 'BuildIssue', + 'AssessmentGroup', + 'VariableGroup', + 'FullHistory', + 'SingleColumnEdit', + 'DoubleColumnEdit', + 'TripleColumnEdit', + 'ColumnLeftTwoThirdsEdit', + 'ColumnRightTwoThirdsEdit', + 'StreamLogo', + 'PassiveAuthentication', + 'AlertSolid', + 'MegaphoneSolid', + 'TaskSolid', + 'ConfigurationSolid', + 'BugSolid', + 'CrownSolid', + 'Trophy2Solid', + 'QuickNoteSolid', + 'ConstructionConeSolid', + 'PageListSolid', + 'PageListMirroredSolid', + 'StarburstSolid', + 'ReadingModeSolid', + 'SadSolid', + 'HealthSolid', + 'ShieldSolid', + 'GiftBoxSolid', + 'ShoppingCartSolid', + 'MailSolid', + 'ChatSolid', + 'RibbonSolid', + 'FinancialSolid', + 'FinancialMirroredSolid', + 'HeadsetSolid', + 'PermissionsSolid', + 'ParkingSolid', + 'ParkingMirroredSolid', + 'DiamondSolid', + 'AsteriskSolid', + 'OfflineStorageSolid', + 'BankSolid', + 'DecisionSolid', + 'Parachute', + 'ParachuteSolid', + 'FiltersSolid', + 'ColorSolid', + 'ReviewSolid', + 'ReviewRequestSolid', + 'ReviewRequestMirroredSolid', + 'ReviewResponseSolid', + 'FeedbackRequestSolid', + 'FeedbackRequestMirroredSolid', + 'FeedbackResponseSolid', + 'WorkItemBar', + 'WorkItemBarSolid', + 'Separator', + 'NavigateExternalInline', + 'PlanView', + 'TimelineMatrixView', + 'EngineeringGroup', + 'ProjectCollection', + 'CaretBottomRightCenter8', + 'CaretBottomLeftCenter8', + 'CaretTopRightCenter8', + 'CaretTopLeftCenter8', + 'DonutChart', + 'ChevronUnfold10', + 'ChevronFold10', + 'DoubleChevronDown8', + 'DoubleChevronUp8', + 'DoubleChevronLeft8', + 'DoubleChevronRight8', + 'ChevronDownEnd6', + 'ChevronUpEnd6', + 'ChevronLeftEnd6', + 'ChevronRightEnd6', + 'ContextMenu', + 'AzureAPIManagement', + 'AzureServiceEndpoint', + 'VSTSLogo', + 'VSTSAltLogo1', + 'VSTSAltLogo2', + 'FileTypeSolution', + 'WordLogoInverse16', + 'WordLogo16', + 'WordLogoFill16', + 'PowerPointLogoInverse16', + 'PowerPointLogo16', + 'PowerPointLogoFill16', + 'ExcelLogoInverse16', + 'ExcelLogo16', + 'ExcelLogoFill16', + 'OneNoteLogoInverse16', + 'OneNoteLogo16', + 'OneNoteLogoFill16', + 'OutlookLogoInverse16', + 'OutlookLogo16', + 'OutlookLogoFill16', + 'PublisherLogoInverse16', + 'PublisherLogo16', + 'PublisherLogoFill16', + 'VisioLogoInverse16', + 'VisioLogo16', + 'VisioLogoFill16', + 'TestBeaker', + 'TestBeakerSolid', + 'TestExploreSolid', + 'TestAutoSolid', + 'TestUserSolid', + 'TestImpactSolid', + 'TestPlan', + 'TestStep', + 'TestParameter', + 'TestSuite', + 'TestCase', + 'Sprint', + 'SignOut', + 'TriggerApproval', + 'Rocket', + 'AzureKeyVault', + 'Onboarding', + 'Transition', + 'LikeSolid', + 'DislikeSolid', + 'CRMCustomerInsightsApp', + 'EditCreate', + 'UnSetColor', + 'DeclineCall', + 'RectangularClipping', + 'TeamsLogo16', + 'TeamsLogoFill16', + 'Spacer', + 'SkypeLogo16', + 'SkypeForBusinessLogo16', + 'SkypeForBusinessLogoFill16', + 'FilterSolid', + 'MailUndelivered', + 'MailTentative', + 'MailTentativeMirrored', + 'MailReminder', + 'ReceiptUndelivered', + 'ReceiptTentative', + 'ReceiptTentativeMirrored', + 'Inbox', + 'IRMReply', + 'IRMReplyMirrored', + 'IRMForward', + 'IRMForwardMirrored', + 'VoicemailIRM', + 'EventAccepted', + 'EventTentative', + 'EventTentativeMirrored', + 'EventDeclined', + 'IDBadge', + 'BackgroundColor', + 'OfficeFormsLogoInverse16', + 'OfficeFormsLogo', + 'OfficeFormsLogoFill', + 'OfficeFormsLogo16', + 'OfficeFormsLogoFill16', + 'OfficeFormsLogoInverse24', + 'OfficeFormsLogo24', + 'OfficeFormsLogoFill24', + 'PageLock', + 'NotExecuted', + 'NotImpactedSolid', + 'FieldReadOnly', + 'FieldRequired', + 'BacklogBoard', + 'ExternalBuild', + 'ExternalTFVC', + 'ExternalXAML', + 'IssueSolid', + 'DefectSolid', + 'LadybugSolid', + 'NugetLogo', + 'TFVCLogo', + 'ProjectLogo32', + 'ProjectLogoFill32', + 'ProjectLogo16', + 'ProjectLogoFill16', + 'SwayLogo32', + 'SwayLogoFill32', + 'SwayLogo16', + 'SwayLogoFill16', + 'ClassNotebookLogo32', + 'ClassNotebookLogoFill32', + 'ClassNotebookLogo16', + 'ClassNotebookLogoFill16', + 'ClassNotebookLogoInverse32', + 'ClassNotebookLogoInverse16', + 'StaffNotebookLogo32', + 'StaffNotebookLogoFill32', + 'StaffNotebookLogo16', + 'StaffNotebookLogoFill16', + 'StaffNotebookLogoInverted32', + 'StaffNotebookLogoInverted16', + 'KaizalaLogo', + 'TaskLogo', + 'ProtectionCenterLogo32', + 'GallatinLogo', + 'Globe2', + 'Guitar', + 'Breakfast', + 'Brunch', + 'BeerMug', + 'Vacation', + 'Teeth', + 'Taxi', + 'Chopsticks', + 'SyncOccurence', + 'UnsyncOccurence', + 'GIF', + 'PrimaryCalendar', + 'SearchCalendar', + 'VideoOff', + 'MicrosoftFlowLogo', + 'BusinessCenterLogo', + 'ToDoLogoBottom', + 'ToDoLogoTop', + 'EditSolid12', + 'EditSolidMirrored12', + 'UneditableSolid12', + 'UneditableSolidMirrored12', + 'UneditableMirrored', + 'AdminALogo32', + 'AdminALogoFill32', + 'ToDoLogoInverse', + 'Snooze', + 'WaffleOffice365', + 'ImageSearch', + 'NewsSearch', + 'VideoSearch', + 'R', + 'FontColorA', + 'FontColorSwatch', + 'LightWeight', + 'NormalWeight', + 'SemiboldWeight', + 'GroupObject', + 'UngroupObject', + 'AlignHorizontalLeft', + 'AlignHorizontalCenter', + 'AlignHorizontalRight', + 'AlignVerticalTop', + 'AlignVerticalCenter', + 'AlignVerticalBottom', + 'HorizontalDistributeCenter', + 'VerticalDistributeCenter', + 'Ellipse', + 'Line', + 'Octagon', + 'Hexagon', + 'Pentagon', + 'RightTriangle', + 'HalfCircle', + 'QuarterCircle', + 'ThreeQuarterCircle', + '6PointStar', + '12PointStar', + 'ArrangeBringToFront', + 'ArrangeSendToBack', + 'ArrangeSendBackward', + 'ArrangeBringForward', + 'BorderDash', + 'BorderDot', + 'LineStyle', + 'LineThickness', + 'WindowEdit', + 'HintText', + 'MediaAdd', + 'AnchorLock', + 'AutoHeight', + 'ChartSeries', + 'ChartXAngle', + 'ChartYAngle', + 'Combobox', + 'LineSpacing', + 'Padding', + 'PaddingTop', + 'PaddingBottom', + 'PaddingLeft', + 'PaddingRight', + 'NavigationFlipper', + 'AlignJustify', + 'TextOverflow', + 'VisualsFolder', + 'VisualsStore', + 'PictureCenter', + 'PictureFill', + 'PicturePosition', + 'PictureStretch', + 'PictureTile', + 'Slider', + 'SliderHandleSize', + 'DefaultRatio', + 'NumberSequence', + 'GUID', + 'ReportAdd', + 'DashboardAdd', + 'MapPinSolid', + 'WebPublish', + 'PieSingleSolid', + 'BlockedSolid', + 'DrillDown', + 'DrillDownSolid', + 'DrillExpand', + 'DrillShow', + 'SpecialEvent', + 'OneDriveFolder16', + 'FunctionalManagerDashboard', + 'BIDashboard', + 'CodeEdit', + 'RenewalCurrent', + 'RenewalFuture', + 'SplitObject', + 'BulkUpload', + 'DownloadDocument', + 'Flower', + 'WaitlistConfirm', + 'WaitlistConfirmMirrored', + 'LaptopSecure', + 'DragObject', + 'EntryView', + 'EntryDecline', + 'ContactCardSettings', + 'ContactCardSettingsMirrored', + 'CalendarSettings', + 'CalendarSettingsMirrored', + 'HardDriveLock', + 'HardDriveUnlock', + 'AccountManagement', + 'TransitionPop', + 'TransitionPush', + 'TransitionEffect', + 'LookupEntities', + 'ExploreData', + 'AddBookmark', + 'SearchBookmark', + 'DrillThrough', + 'MasterDatabase', + 'CertifiedDatabase', + 'MaximumValue', + 'MinimumValue', + 'VisualStudioIDELogo32', + 'PasteAsText', + 'PasteAsCode', + 'BrowserTab', + 'BrowserTabScreenshot', + 'DesktopScreenshot', + 'FileYML', + 'ClipboardSolid', + 'FabricUserFolder', + 'FabricNetworkFolder', + 'AnalyticsView', + 'Video360Generic', + 'Leave', + 'Trending12', + 'Blocked12', + 'Warning12', + 'CheckedOutByOther12', + 'CheckedOutByYou12', + 'CircleShapeSolid', + 'SquareShapeSolid', + 'TriangleShapeSolid', + 'DropShapeSolid', + 'RectangleShapeSolid', + 'ZoomToFit', + 'InsertColumnsLeft', + 'InsertColumnsRight', + 'InsertRowsAbove', + 'InsertRowsBelow', + 'DeleteColumns', + 'DeleteRows', + 'DeleteRowsMirrored', + 'DeleteTable', + 'AccountBrowser', + 'VersionControlPush', + 'StackedColumnChart2', + 'TripleColumnWide', + 'QuadColumn', + 'WhiteBoardApp16', + 'WhiteBoardApp32', + 'InsertSignatureLine', + 'ArrangeByFrom', + 'Phishing', + 'CreateMailRule', + 'PublishCourse', + 'DictionaryRemove', + 'UserRemove', + 'UserEvent', + 'Encryption', + 'PasswordField', + 'OpenInNewTab', + 'Hide3', + 'VerifiedBrandSolid', + 'MarkAsProtected', + 'AuthenticatorApp', + 'WebTemplate', + 'DefenderTVM', + 'MedalSolid', + 'D365TalentLearn', + 'D365TalentInsight', + 'D365TalentHRCore', + 'BacklogList', + 'ButtonControl', + 'TableGroup', + 'MountainClimbing', + 'TagUnknown', + 'TagUnknownMirror', + 'TagUnknown12', + 'TagUnknown12Mirror', + 'Link12', + 'Presentation', + 'Presentation12', + 'Lock12', + 'BuildDefinition', + 'ReleaseDefinition', + 'SaveTemplate', + 'UserGauge', + 'BlockedSiteSolid12', + 'TagSolid', + 'OfficeChat', + 'OfficeChatSolid', + 'MailSchedule', + 'WarningSolid', + 'Blocked2Solid', + 'SkypeCircleArrow', + 'SkypeArrow', + 'SyncStatus', + 'SyncStatusSolid', + 'ProjectDocument', + 'ToDoLogoOutline', + 'VisioOnlineLogoFill32', + 'VisioOnlineLogo32', + 'VisioOnlineLogoCloud32', + 'VisioDiagramSync', + 'Event12', + 'EventDateMissed12', + 'UserOptional', + 'ResponsesMenu', + 'DoubleDownArrow', + 'DistributeDown', + 'BookmarkReport', + 'FilterSettings', + 'GripperDotsVertical', + 'MailAttached', + 'AddIn', + 'LinkedDatabase', + 'PromotedDatabase', + 'BarChartVerticalFilter', + 'BarChartVerticalFilterSolid', + 'MicrosoftTranslatorLogo', + 'ShowTimeAs', + 'FileRequest', + 'WorkItemAlert', + 'PowerBILogo16', + 'PowerBILogoBackplate16', + 'BulletedListText', + 'BulletedListBullet', + 'BulletedListTextMirrored', + 'BulletedListBulletMirrored', + 'NumberedListText', + 'NumberedListNumber', + 'NumberedListTextMirrored', + 'NumberedListNumberMirrored', + 'RemoveLinkChain', + 'RemoveLinkX', + 'FabricTextHighlight', + 'ClearFormattingA', + 'ClearFormattingEraser', + 'Photo2Fill', + 'IncreaseIndentText', + 'IncreaseIndentArrow', + 'DecreaseIndentText', + 'DecreaseIndentArrow', + 'IncreaseIndentTextMirrored', + 'IncreaseIndentArrowMirrored', + 'DecreaseIndentTextMirrored', + 'DecreaseIndentArrowMirrored', + 'CheckListText', + 'CheckListCheck', + 'CheckListTextMirrored', + 'CheckListCheckMirrored', + 'NumberSymbol', + 'Coupon', + 'VerifiedBrand', + 'ReleaseGate', + 'ReleaseGateCheck', + 'ReleaseGateError', + 'M365InvoicingLogo', + 'FabricTextHighlightComposite', + 'Dataflows', + 'GenericScanFilled', + 'DiagnosticDataBarTooltip', + 'SaveToMobile', + 'Orientation2', + 'ScreenCast', + 'ShowGrid', + 'SnapToGrid', + 'ContactList', + 'NewMail', + 'EyeShadow', + 'FabricFolderConfirm', + 'InformationBarriers', + 'CommentActive', + 'ColumnVerticalSectionEdit', + 'WavingHand', + 'ShakeDevice', + 'SmartGlassRemote', + 'Rotate90Clockwise', + 'Rotate90CounterClockwise', + 'CampaignTemplate', + 'ChartTemplate', + 'PageListFilter', + 'SecondaryNav', + 'ColumnVerticalSection', + 'SkypeCircleSlash', + 'SkypeSlash', + 'CustomizeToolbar', + 'DuplicateRow', + 'RemoveFromTrash', + 'MailOptions', + 'Childof', + 'Footer', + 'Header', + 'BarChartVerticalFill', + 'StackedColumnChart2Fill', + 'PlainText', + 'AccessibiltyChecker', + 'DatabaseSync', + 'ReservationOrders', + 'TabOneColumn', + 'TabTwoColumn', + 'TabThreeColumn', + 'MicrosoftTranslatorLogoGreen', + 'MicrosoftTranslatorLogoBlue', + 'InternalInvestigation', + 'AppleTVPlay', + 'AppleTVMonitor', + 'AppleTVMicrophone', + 'AppleTVMenu', + 'AddReaction', + 'DecreaseIndentLegacy', + 'IncreaseIndentLegacy', + 'SizeLegacy', + 'FontIncrease', + 'FontSize', + 'CellPhone', + 'RepeatOne', + 'RepeatAll', + 'Calculator', + 'Library', + 'PostUpdate', + 'NewFolder', + 'CalendarReply', + 'UnsyncFolder', + 'SyncFolder', + 'BlockContact', + 'Accept', + 'BulletedList', + 'Preview', + 'News', + 'Chat', + 'Group', + 'World', + 'Comment', + 'DockLeft', + 'DockRight', + 'Repair', + 'Accounts', + 'Street', + 'RadioBullet', + 'Stopwatch', + 'Clock', + 'WorldClock', + 'AlarmClock', + 'Photo', + 'ActionCenter', + 'Hospital', + 'Timer', + 'FullCircleMask', + 'LocationFill', + 'ChromeMinimize', + 'ChromeRestore', + 'Annotation', + 'Fingerprint', + 'Handwriting', + 'ChromeFullScreen', + 'Completed', + 'Label', + 'FlickDown', + 'FlickUp', + 'FlickLeft', + 'FlickRight', + 'MiniExpand', + 'MiniContract', + 'Streaming', + 'MusicInCollection', + 'OneDriveLogo', + 'CompassNW', + 'Code', + 'LightningBolt', + 'CalculatorMultiply', + 'CalculatorAddition', + 'CalculatorSubtract', + 'CalculatorPercentage', + 'CalculatorEqualTo', + 'PrintfaxPrinterFile', + 'StorageOptical', + 'Communications', + 'Headset', + 'Health', + 'FrontCamera', + 'ChevronUpSmall', + 'ChevronDownSmall', + 'ChevronLeftSmall', + 'ChevronRightSmall', + 'ChevronUpMed', + 'ChevronDownMed', + 'ChevronLeftMed', + 'ChevronRightMed', + 'Devices2', + 'PC1', + 'PresenceChickletVideo', + 'Reply', + 'HalfAlpha', + 'ConstructionCone', + 'DoubleChevronLeftMed', + 'Volume0', + 'Volume1', + 'Volume2', + 'Volume3', + 'Chart', + 'Robot', + 'Manufacturing', + 'LockSolid', + 'FitPage', + 'FitWidth', + 'BidiLtr', + 'BidiRtl', + 'RightDoubleQuote', + 'Sunny', + 'CloudWeather', + 'Cloudy', + 'PartlyCloudyDay', + 'PartlyCloudyNight', + 'ClearNight', + 'RainShowersDay', + 'Rain', + 'Thunderstorms', + 'RainSnow', + 'Snow', + 'BlowingSnow', + 'Frigid', + 'Fog', + 'Squalls', + 'Duststorm', + 'Unknown', + 'Precipitation', + 'Ribbon', + 'AreaChart', + 'Assign', + 'FlowChart', + 'CheckList', + 'Diagnostic', + 'Generate', + 'LineChart', + 'Equalizer', + 'BarChartHorizontal', + 'BarChartVertical', + 'Freezing', + 'FunnelChart', + 'Processing', + 'Quantity', + 'ReportDocument', + 'StackColumnChart', + 'SnowShowerDay', + 'HailDay', + 'WorkFlow', + 'HourGlass', + 'StoreLogoMed20', + 'TimeSheet', + 'TriangleSolid', + 'UpgradeAnalysis', + 'VideoSolid', + 'RainShowersNight', + 'SnowShowerNight', + 'Teamwork', + 'HailNight', + 'PeopleAdd', + 'Glasses', + 'DateTime2', + 'Shield', + 'Header1', + 'PageAdd', + 'NumberedList', + 'PowerBILogo', + 'Info2', + 'MusicInCollectionFill', + 'Asterisk', + 'ErrorBadge', + 'CircleFill', + 'Record2', + 'AllAppsMirrored', + 'BookmarksMirrored', + 'BulletedListMirrored', + 'CaretHollowMirrored', + 'CaretSolidMirrored', + 'ChromeBackMirrored', + 'ClosePaneMirrored', + 'DockLeftMirrored', + 'DoubleChevronLeftMedMirrored', + 'GoMirrored', + 'HelpMirrored', + 'ImportMirrored', + 'ImportAllMirrored', + 'ListMirrored', + 'MailForwardMirrored', + 'MailReplyMirrored', + 'MailReplyAllMirrored', + 'MiniContractMirrored', + 'MiniExpandMirrored', + 'OpenPaneMirrored', + 'ParkingLocationMirrored', + 'SendMirrored', + 'ShowResultsMirrored', + 'ThumbnailViewMirrored', + 'Media', + 'Devices3', + 'Focus', + 'VideoLightOff', + 'Lightbulb', + 'StatusTriangle', + 'VolumeDisabled', + 'Puzzle', + 'EmojiNeutral', + 'EmojiDisappointed', + 'HomeSolid', + 'Ringer', + 'PDF', + 'HeartBroken', + 'StoreLogo16', + 'MultiSelectMirrored', + 'Broom', + 'Cocktails', + 'Wines', + 'Articles', + 'Cycling', + 'DietPlanNotebook', + 'Pill', + 'ExerciseTracker', + 'HandsFree', + 'Medical', + 'Running', + 'Weights', + 'Trackers', + 'AddNotes', + 'AllCurrency', + 'BarChart4', + 'CirclePlus', + 'Coffee', + 'Cotton', + 'Market', + 'Money', + 'PieDouble', + 'PieSingle', + 'RemoveFilter', + 'Savings', + 'Sell', + 'StockDown', + 'StockUp', + 'Lamp', + 'Source', + 'MSNVideos', + 'Cricket', + 'Golf', + 'Baseball', + 'Soccer', + 'MoreSports', + 'AutoRacing', + 'CollegeHoops', + 'CollegeFootball', + 'ProFootball', + 'ProHockey', + 'Rugby', + 'SubstitutionsIn', + 'Tennis', + 'Arrivals', + 'Design', + 'Website', + 'Drop', + 'HistoricalWeather', + 'SkiResorts', + 'Snowflake', + 'BusSolid', + 'FerrySolid', + 'AirplaneSolid', + 'TrainSolid', + 'Ticket', + 'WifiWarning4', + 'Devices4', + 'AzureLogo', + 'BingLogo', + 'MSNLogo', + 'OutlookLogoInverse', + 'OfficeLogo', + 'SkypeLogo', + 'Door', + 'EditMirrored', + 'GiftCard', + 'DoubleBookmark', + 'StatusErrorFull', + 'Certificate', + 'FastForward', + 'Rewind', + 'Photo2', + 'OpenSource', + 'Movers', + 'CloudDownload', + 'Family', + 'WindDirection', + 'Bug', + 'SiteScan', + 'BrowserScreenShot', + 'F12DevTools', + 'CSS', + 'JS', + 'DeliveryTruck', + 'ReminderPerson', + 'ReminderGroup', + 'TabletMode', + 'Umbrella', + 'NetworkTower', + 'CityNext', + 'CityNext2', + 'Section', + 'OneNoteLogoInverse', + 'ToggleFilled', + 'ToggleBorder', + 'SliderThumb', + 'ToggleThumb', + 'Documentation', + 'Badge', + 'Giftbox', + 'VisualStudioLogo', + 'HomeGroup', + 'ExcelLogoInverse', + 'WordLogoInverse', + 'PowerPointLogoInverse', + 'Cafe', + 'SpeedHigh', + 'Commitments', + 'ThisPC', + 'MusicNote', + 'MicOff', + 'EdgeLogo', + 'CompletedSolid', + 'AlbumRemove', + 'MessageFill', + 'TabletSelected', + 'MobileSelected', + 'LaptopSelected', + 'TVMonitorSelected', + 'DeveloperTools', + 'Shapes', + 'InsertTextBox', + 'LowerBrightness', + 'WebComponents', + 'OfflineStorage', + 'DOM', + 'CloudUpload', + 'ScrollUpDown', + 'DateTime', + 'Event', + 'Cake', + 'Org', + 'PartyLeader', + 'DRM', + 'CloudAdd', + 'AppIconDefault', + 'Photo2Add', + 'Photo2Remove', + 'POI', + 'AddTo', + 'RadioBtnOff', + 'RadioBtnOn', + 'ExploreContent', + 'Product', + 'ProgressLoopInner', + 'ProgressLoopOuter', + 'Blocked2', + 'FangBody', + 'PageHeader', + 'ChatInviteFriend', + 'Brush', + 'Shirt', + 'Crown', + 'Diamond', + 'ScaleUp', + 'QRCode', + 'Feedback', + 'SharepointLogoInverse', + 'YammerLogo', + 'Hide', + 'Uneditable', + 'ReturnToSession', + 'OpenFolderHorizontal', + 'CalendarMirrored', + 'SwayLogoInverse', + 'OutOfOffice', + 'Trophy', + 'ReopenPages', + 'EmojiTabSymbols', + 'AADLogo', + 'AccessLogo', + 'AdminALogoInverse32', + 'AdminCLogoInverse32', + 'AdminDLogoInverse32', + 'AdminELogoInverse32', + 'AdminLLogoInverse32', + 'AdminMLogoInverse32', + 'AdminOLogoInverse32', + 'AdminPLogoInverse32', + 'AdminSLogoInverse32', + 'AdminYLogoInverse32', + 'DelveLogoInverse', + 'ExchangeLogoInverse', + 'LyncLogo', + 'OfficeVideoLogoInverse', + 'SocialListeningLogo', + 'VisioLogoInverse', + 'Balloons', + 'Cat', + 'MailAlert', + 'MailCheck', + 'MailLowImportance', + 'MailPause', + 'MailRepeat', + 'SecurityGroup', + 'Table', + 'VoicemailForward', + 'VoicemailReply', + 'Waffle', + 'RemoveEvent', + 'EventInfo', + 'ForwardEvent', + 'WipePhone', + 'AddOnlineMeeting', + 'JoinOnlineMeeting', + 'RemoveLink', + 'PeopleBlock', + 'PeopleRepeat', + 'PeopleAlert', + 'PeoplePause', + 'TransferCall', + 'AddPhone', + 'UnknownCall', + 'NoteReply', + 'NoteForward', + 'NotePinned', + 'RemoveOccurrence', + 'Timeline', + 'EditNote', + 'CircleHalfFull', + 'Room', + 'Unsubscribe', + 'Subscribe', + 'HardDrive', + 'RecurringTask', + 'TaskManager', + 'TaskManagerMirrored', + 'Combine', + 'Split', + 'DoubleChevronUp', + 'DoubleChevronLeft', + 'DoubleChevronRight', + 'TextBox', + 'TextField', + 'NumberField', + 'Dropdown', + 'PenWorkspace', + 'BookingsLogo', + 'ClassNotebookLogoInverse', + 'DelveAnalyticsLogo', + 'DocsLogoInverse', + 'Dynamics365Logo', + 'DynamicSMBLogo', + 'OfficeAssistantLogo', + 'OfficeStoreLogo', + 'OneNoteEduLogoInverse', + 'PlannerLogo', + 'PowerApps', + 'Suitcase', + 'ProjectLogoInverse', + 'CaretLeft8', + 'CaretRight8', + 'CaretUp8', + 'CaretDown8', + 'CaretLeftSolid8', + 'CaretRightSolid8', + 'CaretUpSolid8', + 'CaretDownSolid8', + 'ClearFormatting', + 'Superscript', + 'Subscript', + 'Strikethrough', + 'Export', + 'ExportMirrored', + 'SingleBookmark', + 'SingleBookmarkSolid', + 'DoubleChevronDown', + 'FollowUser', + 'ReplyAll', + 'WorkforceManagement', + 'RecruitmentManagement', + 'Questionnaire', + 'ManagerSelfService', + 'ProductRelease', + 'ReplyMirrored', + 'ReplyAllMirrored', + 'Medal', + 'AddGroup', + 'QuestionnaireMirrored', + 'TemporaryUser', + 'CaretSolid16', + 'GroupedDescending', + 'GroupedAscending', + 'AwayStatus', + 'MyMoviesTV', + 'GenericScan', + 'AustralianRules', + 'WifiEthernet', + 'TrackersMirrored', + 'DateTimeMirrored', + 'StopSolid', + 'DoubleChevronUp12', + 'DoubleChevronDown12', + 'DoubleChevronLeft12', + 'DoubleChevronRight12', + 'CalendarAgenda', + 'AddEvent', + 'AssetLibrary', + 'DataConnectionLibrary', + 'DocLibrary', + 'FormLibrary', + 'FormLibraryMirrored', + 'ReportLibrary', + 'ReportLibraryMirrored', + 'ContactCard', + 'CustomList', + 'CustomListMirrored', + 'IssueTracking', + 'IssueTrackingMirrored', + 'PictureLibrary', + 'OfficeAddinsLogo', + 'OfflineOneDriveParachute', + 'OfflineOneDriveParachuteDisabled', + 'TriangleSolidUp12', + 'TriangleSolidDown12', + 'TriangleSolidLeft12', + 'TriangleSolidRight12', + 'TriangleUp12', + 'TriangleDown12', + 'TriangleLeft12', + 'TriangleRight12', + 'ArrowUpRight8', + 'ArrowDownRight8', + 'DocumentSet', + 'DelveAnalytics', + 'ArrowUpRightMirrored8', + 'ArrowDownRightMirrored8', + 'CompanyDirectory', + 'OpenEnrollment', + 'CompanyDirectoryMirrored', + 'OneDriveAdd', + 'ProfileSearch', + 'Header2', + 'Header3', + 'Header4', + 'RingerSolid', + 'Eyedropper', + 'MarketDown', + 'CalendarWorkWeek', + 'SidePanel', + 'GlobeFavorite', + 'CaretTopLeftSolid8', + 'CaretTopRightSolid8', + 'ViewAll2', + 'DocumentReply', + 'PlayerSettings', + 'ReceiptForward', + 'ReceiptReply', + 'ReceiptCheck', + 'Fax', + 'RecurringEvent', + 'ReplyAlt', + 'ReplyAllAlt', + 'EditStyle', + 'EditMail', + 'Lifesaver', + 'LifesaverLock', + 'InboxCheck', + 'FolderSearch', + 'CollapseMenu', + 'ExpandMenu', + 'Boards', + 'SunAdd', + 'SunQuestionMark', + 'LandscapeOrientation', + 'DocumentSearch', + 'PublicCalendar', + 'PublicContactCard', + 'PublicEmail', + 'PublicFolder', + 'WordDocument', + 'PowerPointDocument', + 'ExcelDocument', + 'GroupedList', + 'ClassroomLogo', + 'Sections', + 'EditPhoto', + 'Starburst', + 'ShareiOS', + 'AirTickets', + 'PencilReply', + 'Tiles2', + 'SkypeCircleCheck', + 'SkypeCircleClock', + 'SkypeCircleMinus', + 'SkypeMessage', + 'ClosedCaption', + 'ATPLogo', + 'OfficeFormsLogoInverse', + 'RecycleBin', + 'EmptyRecycleBin', + 'Hide2', + 'Breadcrumb', + 'BirthdayCake', + 'TimeEntry', + 'CRMProcesses', + 'PageEdit', + 'PageArrowRight', + 'PageRemove', + 'Database', + 'DataManagementSettings', + 'CRMServices', + 'EditContact', + 'ConnectContacts', + 'AppIconDefaultAdd', + 'AppIconDefaultList', + 'ActivateOrders', + 'DeactivateOrders', + 'DocumentManagement', + 'CRMReport', + 'KnowledgeArticle', + 'Relationship', + 'HomeVerify', + 'ZipFolder', + 'SurveyQuestions', + 'TextDocument', + 'TextDocumentShared', + 'PageCheckedOut', + 'SaveAndClose', + 'Script', + 'Archive', + 'ActivityFeed', + 'Compare', + 'EventDate', + 'ArrowUpRight', + 'CaretRight', + 'SetAction', + 'CaretSolidLeft', + 'CaretSolidDown', + 'CaretSolidRight', + 'CaretSolidUp', + 'PowerAppsLogo', + 'PowerApps2Logo', + 'SearchIssue', + 'SearchIssueMirrored', + 'FabricAssetLibrary', + 'FabricDataConnectionLibrary', + 'FabricDocLibrary', + 'FabricFormLibrary', + 'FabricFormLibraryMirrored', + 'FabricReportLibrary', + 'FabricReportLibraryMirrored', + 'FabricPublicFolder', + 'FabricFolderSearch', + 'FabricMovetoFolder', + 'FabricUnsyncFolder', + 'FabricSyncFolder', + 'FabricOpenFolderHorizontal', + 'FabricFolder', + 'FabricFolderFill', + 'FabricNewFolder', + 'FabricPictureLibrary', + 'AddFavorite', + 'AddFavoriteFill', + 'BufferTimeBefore', + 'BufferTimeAfter', + 'BufferTimeBoth', + 'PublishContent', + 'ClipboardList', + 'ClipboardListMirrored', + 'CannedChat', + 'SkypeForBusinessLogo', + 'TabCenter', + 'PageCheckedin', + 'PageList', + 'ReadOutLoud', + 'CaretBottomLeftSolid8', + 'CaretBottomRightSolid8', + 'FolderHorizontal', + 'MicrosoftStaffhubLogo', + 'GiftboxOpen', + 'StatusCircleOuter', + 'StatusCircleInner', + 'StatusCircleRing', + 'StatusTriangleOuter', + 'StatusTriangleInner', + 'StatusTriangleExclamation', + 'StatusCircleExclamation', + 'StatusCircleErrorX', + 'StatusCircleInfo', + 'StatusCircleBlock', + 'StatusCircleBlock2', + 'StatusCircleQuestionMark', + 'StatusCircleSync', + 'Toll', + 'ExploreContentSingle', + 'CollapseContent', + 'CollapseContentSingle', + 'InfoSolid', + 'ProgressRingDots', + 'CaloriesAdd', + 'BranchFork', + 'AddHome', + 'MobileReport', + 'ScaleVolume', + 'HardDriveGroup', + 'FastMode', + 'ToggleLeft', + 'ToggleRight', + 'TriangleShape', + 'RectangleShape', + 'Trophy2', + 'BucketColor', + 'BucketColorFill', + 'Taskboard', + 'SingleColumn', + 'DoubleColumn', + 'TripleColumn', + 'ColumnLeftTwoThirds', + 'ColumnRightTwoThirds', + 'AccessLogoFill', + 'AnalyticsLogo', + 'AnalyticsQuery', + 'NewAnalyticsQuery', + 'AnalyticsReport', + 'WordLogo', + 'WordLogoFill', + 'ExcelLogo', + 'ExcelLogoFill', + 'OneNoteLogo', + 'OneNoteLogoFill', + 'OutlookLogo', + 'OutlookLogoFill', + 'PowerPointLogo', + 'PowerPointLogoFill', + 'PublisherLogo', + 'PublisherLogoFill', + 'ScheduleEventAction', + 'FlameSolid', + 'ServerProcesses', + 'Server', + 'SaveAll', + 'LinkedInLogo', + 'Decimals', + 'SidePanelMirrored', + 'ProtectRestrict', + 'Blog', + 'UnknownMirrored', + 'PublicContactCardMirrored', + 'GridViewSmall', + 'GridViewMedium', + 'GridViewLarge', + 'Step', + 'StepInsert', + 'StepShared', + 'StepSharedAdd', + 'StepSharedInsert', + 'ViewDashboard', + 'ViewList', + 'ViewListGroup', + 'ViewListTree', + 'TriggerAuto', + 'TriggerUser', + 'PivotChart', + 'StackedBarChart', + 'StackedLineChart', + 'BuildQueue', + 'BuildQueueNew', + 'UserFollowed', + 'ContactLink', + 'Stack', + 'Bullseye', + 'VennDiagram', + 'FiveTileGrid', + 'FocalPoint', + 'RingerRemove', + 'TeamsLogoInverse', + 'TeamsLogo', + 'TeamsLogoFill', + 'SkypeForBusinessLogoFill', + 'SharepointLogo', + 'SharepointLogoFill', + 'DelveLogo', + 'DelveLogoFill', + 'OfficeVideoLogo', + 'OfficeVideoLogoFill', + 'ExchangeLogo', + 'ExchangeLogoFill', + 'Signin', + 'DocumentApproval', + 'CloneToDesktop', + 'InstallToDrive', + 'Blur', + 'Build', + 'ProcessMetaTask', + 'BranchFork2', + 'BranchLocked', + 'BranchCommit', + 'BranchCompare', + 'BranchMerge', + 'BranchPullRequest', + 'BranchSearch', + 'BranchShelveset', + 'RawSource', + 'MergeDuplicate', + 'RowsGroup', + 'RowsChild', + 'Deploy', + 'Redeploy', + 'ServerEnviroment', + 'VisioDiagram', + 'GlobalNavButton', + 'ChevronDown', + 'ChevronUp', + 'Edit', + 'Add', + 'Cancel', + 'More', + 'Settings', + 'Mail', + 'Filter', + 'Search', + 'Share', + 'BlockedSite', + 'FavoriteStar', + 'FavoriteStarFill', + 'CheckMark', + 'Delete', + 'ChevronLeft', + 'ChevronRight', + 'Calendar', + 'Megaphone', + 'Undo', + 'Flag', + 'Page', + 'Pinned', + 'View', + 'Clear', + 'Download', + 'Upload', + 'Folder', + 'Sort', + 'AlignRight', + 'AlignLeft', + 'Tag', + 'AddFriend', + 'Info', + 'SortLines', + 'List', + 'CircleRing', + 'Heart', + 'HeartFill', + 'Tiles', + 'Embed', + 'Glimmer', + 'Ascending', + 'Descending', + 'SortUp', + 'SortDown', + 'SyncToPC', + 'LargeGrid', + 'SkypeCheck', + 'SkypeClock', + 'SkypeMinus', + 'ClearFilter', + 'Flow', + 'StatusCircleCheckmark', + 'MoreVertical' + ]; +} \ No newline at end of file diff --git a/src/controls/iconPicker/IconPicker.module.scss b/src/controls/iconPicker/IconPicker.module.scss new file mode 100644 index 000000000..569b1ac04 --- /dev/null +++ b/src/controls/iconPicker/IconPicker.module.scss @@ -0,0 +1,138 @@ +@import '~office-ui-fabric-react/dist/sass/References.scss'; + +.navArea { + display: flex; + width: 100%; + padding-left: 11px; +} +.headTitle { + display: inline-block; + flex-grow: 1; + flex-shrink: 2; + font-size: 28px; + font-weight: 300; + margin: auto 8px 5px 0; + white-space: nowrap; +} +.searchBox { + flex-grow: 5; + flex-shrink: 1; + margin: 5px 0; +} +.closeBtnContainer { + flex: 0 0 54px; + display: flex; + justify-content: flex-end; +} + +.iconList { + list-style-type: none; + display: flex; + flex-wrap: wrap; + padding: 0; + margin: 10px -5px; +} +.iconItem { + display: inline-block; + padding: 0; + margin: 0 2px 4px; + list-style-type: none; + position: relative; + overflow: hidden; +} +.iconRadio { + position: absolute; + left: -1000px; + opacity: 0; +} +.iconLabel { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-evenly; + width: 78px; + padding: 5px; + height: 70px; + border-radius: 3px; + background-color: "[theme:neutralLighterAlt, default:#f8f8f8]"; + + &:after { + content: ""; + display: block; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 2px solid transparent; + border-color: "[theme:neutralQuarternary, default:#d0d0d0]"; + border-radius: 3px; + opacity: 0; + will-change: opacity, border-color; + transition: opacity ease-out .05s; + } + &:hover { + &:after { + opacity: 1; + } + } +} +.iconRadio:checked + .iconLabel { + &:after { + opacity: 1; + border-color: "[theme: themePrimary, default: #0078d7]"; + } + color: "[theme: themePrimary, default: #0078d7]"; +} +.iconRadio:focus + .iconLabel { + outline: 1px dashed; + outline-color: "[theme: themePrimary, default: #0078d7]"; + outline-offset: -5px; +} +.iconGlyph { + font-size: 24px; + width: 24px; + height: 24px; + margin-bottom: 5px; + color: inherit; +} +.iconName { + display: inline-block; + max-width: 100%; + text-align: left; + font-size: 12px; +} + +.footer { + display: flex; + width: 100%; +} +.selectionDisplay { + order: 2; + display: flex; + flex: 1 0 32px; + margin: 0 auto; + align-items: center; + justify-content: center; + &:global { + &.noSelection { + opacity: .3; + } + } +} +.selectionLabel { + display: inline-block; +} +.selectionIcon { + display: flex; + align-items: center; + justify-content: center; + font-size: 24px; + min-width: 32px; +} +.btnCancel { + order: 1; +} +.btnSave { + order: 3; +} \ No newline at end of file diff --git a/src/controls/iconPicker/IconPicker.tsx b/src/controls/iconPicker/IconPicker.tsx new file mode 100644 index 000000000..90b85e177 --- /dev/null +++ b/src/controls/iconPicker/IconPicker.tsx @@ -0,0 +1,142 @@ +import * as React from 'react'; +import { IIconPickerProps } from '.'; +import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button'; +import { Icon } from 'office-ui-fabric-react/lib/Icon'; +import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox'; +import { IRenderFunction, getId } from 'office-ui-fabric-react/lib/Utilities'; +import styles from './IconPicker.module.scss'; +import * as strings from 'ControlStrings'; +import { IconNames } from './IconNames'; +import { Panel, PanelType, IPanelProps } from 'office-ui-fabric-react/lib/Panel'; +import { debounce } from 'lodash'; +import { IIconPickerState } from './IIconPickerState'; + +export class IconPicker extends React.Component { + private radioIdBase: string = getId("radio"); + + constructor(props: IIconPickerProps) { + super(props); + this.state = { + items: IconNames.Icons, + isPanelOpen: false, + currentIcon: this.props.currentIcon || null + }; + } + + public render(): React.ReactElement { + return
+ + + {this.renderPanelContent()} + +
; + } + + private closePanel = (): void => { + this.setState({ + currentIcon: null, + isPanelOpen: false + }); + } + + private iconPickerOnClick = (): void => { + this.setState({ + isPanelOpen: true + }); + } + + private iconOnClick = (iconName: string): void => { + if (this.props.onChange) this.props.onChange(iconName); + this.setState({ + currentIcon: iconName, + }); + } + + private onAbort = (): void => { + this.setState({ items: IconNames.Icons }); + } + + private onChange = (_event?: React.ChangeEvent, newValue?: string): void => { + let items: string[]; + if (newValue.length > 2) { + items = IconNames.Icons.filter(item => { + return item.toLocaleLowerCase().indexOf(newValue.toLocaleLowerCase()) !== -1; + }); + } else { + items = IconNames.Icons; + } + this.setState({ + items: items + }); + } + + private confirmSelection = (): void => { + if (this.props.onSave) this.props.onSave(this.state.currentIcon); + this.setState({ + isPanelOpen: false, + }); + } + + private renderPanelNav: IRenderFunction = (props: IPanelProps, defaultRender: IRenderFunction) => { + return
+

{strings.SelectIcon}

+ +
{defaultRender!(props)}
+
; + } + + private renderPanelContent = () => { + return
+ {this.renderIcons()} +
; + } + + private renderPanelFooter: IRenderFunction = () => { + return
+ +
+ {strings.SelectedLabel}: + +
+ +
; + } + + private renderIcons = (): React.ReactElement => { + return (
    + {this.state.items.map(this.renderIcon)} +
); + } + + private renderIcon = (item: string): JSX.Element => { + const radioId: string = `${this.radioIdBase}-${item}`; + return
  • + this.iconOnClick(item)} /> + +
    • ; + } +} \ No newline at end of file diff --git a/src/controls/iconPicker/index.ts b/src/controls/iconPicker/index.ts new file mode 100644 index 000000000..7bfd51b39 --- /dev/null +++ b/src/controls/iconPicker/index.ts @@ -0,0 +1,2 @@ +export * from './IIconPickerProps'; +export * from './IconPicker'; \ No newline at end of file diff --git a/src/index.ts b/src/index.ts index 8f48c6a43..fb81dc704 100644 --- a/src/index.ts +++ b/src/index.ts @@ -11,6 +11,7 @@ export * from './ChartControl'; export * from './Progress'; export * from './DateTimePicker'; export * from './FilePicker'; +export * from './IconPicker'; export * from './IFrameDialog'; export * from './IFramePanel'; diff --git a/src/loc/bg-bg.ts b/src/loc/bg-bg.ts index f7e4231f2..360da32ea 100644 --- a/src/loc/bg-bg.ts +++ b/src/loc/bg-bg.ts @@ -310,6 +310,8 @@ define([], () => { "UploadImageHeader": "Качване на изображение", "UploadLinkLabel": "Качите", "WebSearchLinkLabel": "Търсене в уеб", - "Yes": "Да" + "Yes": "Да", + "SelectedLabel": "Избрани", + "SelectIcon": "Избор на икона" }; }); \ No newline at end of file diff --git a/src/loc/ca-es.ts b/src/loc/ca-es.ts index ea65be2f5..4795cd218 100644 --- a/src/loc/ca-es.ts +++ b/src/loc/ca-es.ts @@ -310,6 +310,8 @@ define([], () => { "UploadImageHeader": "Carrega la imatge", "UploadLinkLabel": "Carregar", "WebSearchLinkLabel": "Web Search", - "Yes": "Sí" + "Yes": "Sí", + "SelectedLabel": "Seleccionat", + "SelectIcon": "Seleccionar icona" }; }); \ No newline at end of file diff --git a/src/loc/da-dk.ts b/src/loc/da-dk.ts index 2e93bee26..9f70c62ed 100644 --- a/src/loc/da-dk.ts +++ b/src/loc/da-dk.ts @@ -310,6 +310,8 @@ define([], () => { "UploadImageHeader": "Upload billede", "UploadLinkLabel": "Uploade", "WebSearchLinkLabel": "Websøgning", - "Yes": "Ja" + "Yes": "Ja", + "SelectedLabel": "Valgt", + "SelectIcon": "Vælg ikon" }; }); \ No newline at end of file diff --git a/src/loc/de-de.ts b/src/loc/de-de.ts index e65f421be..388d706d6 100644 --- a/src/loc/de-de.ts +++ b/src/loc/de-de.ts @@ -310,6 +310,8 @@ define([], () => { "UploadImageHeader": "Bild hochladen", "UploadLinkLabel": "Hochladen", "WebSearchLinkLabel": "Websuche", - "Yes": "Ja" + "Yes": "Ja", + "SelectedLabel": "Ausgewählt", + "SelectIcon": "Icon auswählen" }; }); \ No newline at end of file diff --git a/src/loc/el-gr.ts b/src/loc/el-gr.ts index 5f7b9f0ee..0de673506 100644 --- a/src/loc/el-gr.ts +++ b/src/loc/el-gr.ts @@ -310,6 +310,8 @@ define([], () => { "UploadImageHeader": "Αποστολή εικόνας", "UploadLinkLabel": "Φορτώσετε", "WebSearchLinkLabel": "Αναζήτηση στο Web", - "Yes": "Ναι" + "Yes": "Ναι", + "SelectedLabel": "Επιλεγμένα", + "SelectIcon": "Επιλογή εικονιδίου" }; }); \ No newline at end of file diff --git a/src/loc/en-us.ts b/src/loc/en-us.ts index da75be715..c94f33fcc 100644 --- a/src/loc/en-us.ts +++ b/src/loc/en-us.ts @@ -322,6 +322,8 @@ define([], () => { UploadImageHeader: "Upload image", UploadLinkLabel: "Upload", WebSearchLinkLabel: "Web search", - Yes: "Yes" + Yes: "Yes", + SelectedLabel: "Selected", + SelectIcon: "Select icon" }; }); diff --git a/src/loc/es-es.ts b/src/loc/es-es.ts index 3c72465d9..1b209a1f7 100644 --- a/src/loc/es-es.ts +++ b/src/loc/es-es.ts @@ -310,6 +310,8 @@ define([], () => { "UploadImageHeader": "Subir imagen", "UploadLinkLabel": "Subir", "WebSearchLinkLabel": "Búsqueda web", - "Yes": "Sí" + "Yes": "Sí", + "SelectedLabel": "Seleccionado", + "SelectIcon": "Seleccionar icono" }; }); \ No newline at end of file diff --git a/src/loc/et-ee.ts b/src/loc/et-ee.ts index 6ea168504..cd691ad12 100644 --- a/src/loc/et-ee.ts +++ b/src/loc/et-ee.ts @@ -310,6 +310,8 @@ define([], () => { "UploadImageHeader": "Laadi pilt üles", "UploadLinkLabel": "Laadida", "WebSearchLinkLabel": "Veebi otsing", - "Yes": "Jah" + "Yes": "Jah", + "SelectedLabel": "Valitud", + "SelectIcon": "Vali ikoon" }; }); \ No newline at end of file diff --git a/src/loc/eu-es.ts b/src/loc/eu-es.ts index da75be715..f59081c29 100644 --- a/src/loc/eu-es.ts +++ b/src/loc/eu-es.ts @@ -322,6 +322,8 @@ define([], () => { UploadImageHeader: "Upload image", UploadLinkLabel: "Upload", WebSearchLinkLabel: "Web search", - Yes: "Yes" + Yes: "Yes", + SelectedLabel: "Hautatuta", + SelectIcon: "Hautatu ikonoa" }; }); diff --git a/src/loc/fi-fi.ts b/src/loc/fi-fi.ts index bf3e846c4..771a758af 100644 --- a/src/loc/fi-fi.ts +++ b/src/loc/fi-fi.ts @@ -310,6 +310,8 @@ define([], () => { "UploadImageHeader": "Lataa kuva", "UploadLinkLabel": "Ladata", "WebSearchLinkLabel": "Www-haku", - "Yes": "Kyllä" + "Yes": "Kyllä", + "SelectedLabel": "Valittu", + "SelectIcon": "Valitse kuvake" }; }); \ No newline at end of file diff --git a/src/loc/fr-fr.ts b/src/loc/fr-fr.ts index 0c83a1787..dbb031da0 100644 --- a/src/loc/fr-fr.ts +++ b/src/loc/fr-fr.ts @@ -310,6 +310,8 @@ define([], () => { "UploadImageHeader": "Importer une image", "UploadLinkLabel": "Importer", "WebSearchLinkLabel": "Recherche Internet", - "Yes": "Oui" + "Yes": "Oui", + "SelectedLabel": "Sélectionné", + "SelectIcon": "Sélectionner une icône" }; }); diff --git a/src/loc/it-it.ts b/src/loc/it-it.ts index 04ff1c5e4..693958145 100644 --- a/src/loc/it-it.ts +++ b/src/loc/it-it.ts @@ -310,6 +310,8 @@ define([], () => { "UploadImageHeader": "Carica immagine", "UploadLinkLabel": "Caricare", "WebSearchLinkLabel": "Ricerca sul Web", - "Yes": "Sì" + "Yes": "Sì", + "SelectedLabel": "Selezionato", + "SelectIcon": "Seleziona icona" }; }); \ No newline at end of file diff --git a/src/loc/ja-jp.ts b/src/loc/ja-jp.ts index b6e72a8af..1bf564b79 100644 --- a/src/loc/ja-jp.ts +++ b/src/loc/ja-jp.ts @@ -310,6 +310,8 @@ define([], () => { "UploadImageHeader": "画像のアップロード", "UploadLinkLabel": "アップロード", "WebSearchLinkLabel": "ウェブ検索", - "Yes": "はい" + "Yes": "はい", + "SelectedLabel": "選択された", + "SelectIcon": "アイコンの選択" }; }); \ No newline at end of file diff --git a/src/loc/lt-lt.ts b/src/loc/lt-lt.ts index 4283bc27e..7b30ca751 100644 --- a/src/loc/lt-lt.ts +++ b/src/loc/lt-lt.ts @@ -310,6 +310,8 @@ define([], () => { "UploadImageHeader": "Įkelti vaizdą", "UploadLinkLabel": "Įkelti", "WebSearchLinkLabel": "Paieška žiniatinklyje", - "Yes": "taip" + "Yes": "taip", + "SelectedLabel": "Pasirinkta", + "SelectIcon": "Rinktis piktogramą" }; }); \ No newline at end of file diff --git a/src/loc/lv-lv.ts b/src/loc/lv-lv.ts index a71ef6c92..89e4ce514 100644 --- a/src/loc/lv-lv.ts +++ b/src/loc/lv-lv.ts @@ -310,6 +310,8 @@ define([], () => { "UploadImageHeader": "Augšupielādēt attēlu", "UploadLinkLabel": "Augšupielādēt", "WebSearchLinkLabel": "Web meklēšana", - "Yes": "jā" + "Yes": "jā", + "SelectedLabel": "Atlasīts", + "SelectIcon": "Atlasīt ikonu" }; }); \ No newline at end of file diff --git a/src/loc/mystrings.d.ts b/src/loc/mystrings.d.ts index 263322548..10179b1ef 100644 --- a/src/loc/mystrings.d.ts +++ b/src/loc/mystrings.d.ts @@ -288,6 +288,10 @@ declare interface IControlStrings { UploadLinkLabel: string; WebSearchLinkLabel: string; Yes: string; + + //Icon picker + SelectedLabel: string; + SelectIcon: string; } declare interface IDateTimeStrings { diff --git a/src/loc/nb-no.ts b/src/loc/nb-no.ts index 68ebf151f..61cf9859f 100644 --- a/src/loc/nb-no.ts +++ b/src/loc/nb-no.ts @@ -310,6 +310,8 @@ define([], () => { "UploadImageHeader": "Last opp bilde", "UploadLinkLabel": "Laste opp", "WebSearchLinkLabel": "Søk på weben", - "Yes": "ja" + "Yes": "ja", + "SelectedLabel": "Valgt", + "SelectIcon": "Velg ikon" }; }); \ No newline at end of file diff --git a/src/loc/nl-nl.ts b/src/loc/nl-nl.ts index 3a14443e5..c6ef4bcc7 100644 --- a/src/loc/nl-nl.ts +++ b/src/loc/nl-nl.ts @@ -310,6 +310,8 @@ define([], () => { "UploadImageHeader": "Afbeelding uploaden", "UploadLinkLabel": "Uploaden", "WebSearchLinkLabel": "Zoeken op het web", - "Yes": "Ja" + "Yes": "Ja", + "SelectedLabel": "Geselecteerd", + "SelectIcon": "Selecteer pictogram" }; }); \ No newline at end of file diff --git a/src/loc/pl-pl.ts b/src/loc/pl-pl.ts index f7fd9e1f9..a1876f863 100644 --- a/src/loc/pl-pl.ts +++ b/src/loc/pl-pl.ts @@ -310,6 +310,8 @@ define([], () => { "UploadImageHeader": "Prześlij obraz", "UploadLinkLabel": "Przesłać", "WebSearchLinkLabel": "Wyszukiwanie w Internecie", - "Yes": "Tak" + "Yes": "Tak", + "SelectedLabel": "Wybrany", + "SelectIcon": "Wybierz ikonę" }; }); \ No newline at end of file diff --git a/src/loc/pt-pt.ts b/src/loc/pt-pt.ts index 99a6f6dbf..5e0dd80fc 100644 --- a/src/loc/pt-pt.ts +++ b/src/loc/pt-pt.ts @@ -310,6 +310,8 @@ define([], () => { "UploadImageHeader": "Upload de imagem", "UploadLinkLabel": "Carregar", "WebSearchLinkLabel": "Pesquisa na Web", - "Yes": "Sim" + "Yes": "Sim", + "SelectedLabel": "Selecionado", + "SelectIcon": "Selecionar ícone" }; }); \ No newline at end of file diff --git a/src/loc/ro-ro.ts b/src/loc/ro-ro.ts index f39b54b5f..3d9f98189 100644 --- a/src/loc/ro-ro.ts +++ b/src/loc/ro-ro.ts @@ -310,6 +310,8 @@ define([], () => { "UploadImageHeader": "Încărcați imaginea", "UploadLinkLabel": "Încărcaţi", "WebSearchLinkLabel": "Căutare pe web", - "Yes": "da" + "Yes": "da", + "SelectedLabel": "Selectat", + "SelectIcon": "Selectare pictogramă" }; }); \ No newline at end of file diff --git a/src/loc/ru-ru.ts b/src/loc/ru-ru.ts index ae179c9e8..cee73e140 100644 --- a/src/loc/ru-ru.ts +++ b/src/loc/ru-ru.ts @@ -310,6 +310,8 @@ define([], () => { "UploadImageHeader": "Загрузить изображение", "UploadLinkLabel": "Загрузить", "WebSearchLinkLabel": "Поиск по Веб", - "Yes": "Да" + "Yes": "Да", + "SelectedLabel": "Выбранный", + "SelectIcon": "Выбрать значок" }; }); \ No newline at end of file diff --git a/src/loc/sk-sk.ts b/src/loc/sk-sk.ts index 86417fdc6..7d81628fd 100644 --- a/src/loc/sk-sk.ts +++ b/src/loc/sk-sk.ts @@ -310,6 +310,8 @@ define([], () => { "UploadImageHeader": "Nahrať obrázok", "UploadLinkLabel": "Nahrať", "WebSearchLinkLabel": "Vyhľadávanie na webe", - "Yes": "áno" + "Yes": "áno", + "SelectedLabel": "Zvolené", + "SelectIcon": "Vybrať ikonu" }; }); \ No newline at end of file diff --git a/src/loc/sr-latn-rs.ts b/src/loc/sr-latn-rs.ts index ea2ab3ecd..4e10dbdca 100644 --- a/src/loc/sr-latn-rs.ts +++ b/src/loc/sr-latn-rs.ts @@ -310,6 +310,8 @@ define([], () => { "UploadImageHeader": "Otpremi sliku", "UploadLinkLabel": "Otpremanje", "WebSearchLinkLabel": "Pretraživanje Weba", - "Yes": "Da" + "Yes": "Da", + "SelectedLabel": "Izabrano", + "SelectIcon": "Izaberite ikonu" }; }); \ No newline at end of file diff --git a/src/loc/sv-se.ts b/src/loc/sv-se.ts index 67ebc325d..8d5ec9109 100644 --- a/src/loc/sv-se.ts +++ b/src/loc/sv-se.ts @@ -310,6 +310,8 @@ define([], () => { "UploadImageHeader": "Ladda upp bild", "UploadLinkLabel": "Uppladdning", "WebSearchLinkLabel": "Webbsökning", - "Yes": "Ja" + "Yes": "Ja", + "SelectedLabel": "Vald", + "SelectIcon": "Välj ikon" }; }); \ No newline at end of file diff --git a/src/loc/tr-tr.ts b/src/loc/tr-tr.ts index bc7279324..e6c699064 100644 --- a/src/loc/tr-tr.ts +++ b/src/loc/tr-tr.ts @@ -310,6 +310,8 @@ define([], () => { "UploadImageHeader": "Resim yükle", "UploadLinkLabel": "Yüklemek", "WebSearchLinkLabel": "Web arama", - "Yes": "Evet" + "Yes": "Evet", + "SelectedLabel": "Seçili", + "SelectIcon": "Simge seç" }; }); \ No newline at end of file diff --git a/src/loc/vi-vn.ts b/src/loc/vi-vn.ts index 065eaf6a1..16433b435 100644 --- a/src/loc/vi-vn.ts +++ b/src/loc/vi-vn.ts @@ -310,6 +310,8 @@ define([], () => { "UploadImageHeader": "Tải lên hình ảnh", "UploadLinkLabel": "Tải lên", "WebSearchLinkLabel": "Tìm kiếm trên web", - "Yes": "Có" + "Yes": "Có", + "SelectedLabel": "Đã chọn", + "SelectIcon": "Chọn biểu tượng" }; }); \ No newline at end of file diff --git a/src/loc/zh-cn.ts b/src/loc/zh-cn.ts index 28a913945..8cec60ee1 100644 --- a/src/loc/zh-cn.ts +++ b/src/loc/zh-cn.ts @@ -310,6 +310,8 @@ define([], () => { "UploadImageHeader": "上传图片", "UploadLinkLabel": "上传", "WebSearchLinkLabel": "网络搜索", - "Yes": "是的" + "Yes": "是的", + "SelectedLabel": "所选", + "SelectIcon": "选择图标" }; }); \ No newline at end of file diff --git a/src/loc/zh-tw.ts b/src/loc/zh-tw.ts index 42cf23ff6..0210867de 100644 --- a/src/loc/zh-tw.ts +++ b/src/loc/zh-tw.ts @@ -310,6 +310,8 @@ define([], () => { "UploadImageHeader": "上傳圖片", "UploadLinkLabel": "上傳", "WebSearchLinkLabel": "網路搜索", - "Yes": "是的" + "Yes": "是的", + "SelectedLabel": "已選取", + "SelectIcon": "選取圖示" }; }); \ No newline at end of file