diff --git a/docs/getting-started/Tachyons.stories.mdx b/docs/getting-started/Tachyons.stories.mdx index e5e0672f9..5af2cca9f 100644 --- a/docs/getting-started/Tachyons.stories.mdx +++ b/docs/getting-started/Tachyons.stories.mdx @@ -169,7 +169,7 @@ Here's a few common use cases to get you started. ```jsx Check - + ``` diff --git a/packages/icons/docs/icons.stories.mdx b/packages/icons/docs/icons.stories.mdx index 64ac50466..cd414d92f 100644 --- a/packages/icons/docs/icons.stories.mdx +++ b/packages/icons/docs/icons.stories.mdx @@ -1,158 +1,141 @@ import { - AddGuestIcon, - AddGuestIcon32, AddIcon, + AddIcon24, AddIcon32, - AddUserIcon, - AddUserIcon32, - ArrowDownIcon, - ArrowDownIcon32, - ArrowDownLeftIcon, - ArrowDownLeftIcon32, - ArrowDownRightIcon, - ArrowDownRightIcon32, ArrowIcon, + ArrowIcon24, ArrowIcon32, - ArrowLeftIcon, - ArrowLeftIcon32, - ArrowLineUpIcon, - ArrowLineUpIcon32, - ArrowRightIcon, - ArrowRightIcon32, - ArrowUpIcon, - ArrowUpIcon32, - ArrowUpLeftIcon, - ArrowUpLeftIcon32, - ArrowUpRightIcon, - ArrowUpRightIcon32, - ArrowsUpDownIcon, - ArrowsUpDownIcon32, CalendarIcon, + CalendarIcon24, CalendarIcon32, - CalendarPresetIcon, - CalendarPresetIcon32, - CaretDownIcon, - CaretDownIcon32, CaretIcon, + CaretIcon24, CaretIcon32, - CaretLeftIcon, - CaretLeftIcon32, - CaretRightIcon, - CaretRightIcon32, - CaretUpDownIcon, - CaretUpDownIcon32, - CaretUpIcon, - CaretUpIcon32, CheckCircleIcon, + CheckCircleIcon24, CheckCircleIcon32, - CheckmarkIcon, - CheckmarkIcon32, - ChevronDownIcon, - ChevronDownIcon32, + CheckIcon, + CheckIcon24, + CheckIcon32, ChevronIcon, + ChevronIcon24, ChevronIcon32, - ChevronLeftIcon, - ChevronLeftIcon32, - ChevronRightIcon, - ChevronRightIcon32, - ChevronUpDownIcon, - ChevronUpDownIcon32, - ChevronUpIcon, - ChevronUpIcon32, ClearFilterIcon, + ClearFilterIcon24, ClearFilterIcon32, - CloseIcon, - CloseIcon32, CrossIcon, + CrossIcon24, CrossIcon32, - CsvFileIcon, - CsvFileIcon32, - DeleteLinkIcon, - DeleteLinkIcon32, - DoNotDisturbIcon, - DoNotDisturbIcon32, + CsvIcon, + CsvIcon24, + CsvIcon32, + DashIcon, + DashIcon24, + DashIcon32, DownloadIcon, + DownloadIcon24, DownloadIcon32, EditIcon, + EditIcon24, EditIcon32, + EmailIcon, + EmailIcon24, + EmailIcon32, + EmailReminderIcon, + EmailReminderIcon24, + EmailReminderIcon32, + EyeIcon, + EyeIcon24, + EyeIcon32, FileIcon, + FileIcon24, FileIcon32, FilterIcon, + FilterIcon24, FilterIcon32, FlagIcon, + FlagIcon24, FlagIcon32, FolderIcon, + FolderIcon24, FolderIcon32, GearIcon, + GearIcon24, GearIcon32, GroupIcon, + GroupIcon24, GroupIcon32, - GroupSettingIcon, - GroupSettingIcon32, - GuestIcon, - GuestIcon32, + GuestAddIcon, + GuestAddIcon24, + GuestAddIcon32, + GuestRemoveIcon, + GuestRemoveIcon24, + GuestRemoveIcon32, HelpIcon, + HelpIcon24, HelpIcon32, HorizontalDotsIcon, HorizontalDotsIcon32, + ImageIcon, + ImageIcon24, + ImageIcon32, InfoIcon, + InfoIcon24, InfoIcon32, - KeyIcon, - KeyIcon32, LightbulbIcon, + LightbulbIcon24, LightbulbIcon32, - LinkIcon, - LinkIcon32, MagnifierIcon, + MagnifierIcon24, MagnifierIcon32, - MailIcon, - MailIcon32, - MusicFileIcon, - MusicFileIcon32, - NoGuestIcon, - NoGuestIcon32, + MusicIcon, + MusicIcon24, + MusicIcon32, NotificationIcon, + NotificationIcon24, NotificationIcon32, - PdfFileIcon, - PdfFileIcon32, - PictureIcon, - PictureIcon32, + NotificationOffIcon, + NotificationOffIcon24, + NotificationOffIcon32, + PdfIcon, + PdfIcon24, + PdfIcon32, PrinterIcon, + PrinterIcon24, PrinterIcon32, PrivacyIcon, + PrivacyIcon24, PrivacyIcon32, - PrivateGroupIcon, - PrivateGroupIcon32, - PublicGroupIcon, - PublicGroupIcon32, - RemoveGuestIcon, - RemoveGuestIcon32, - RemoveUserIcon, - RemoveUserIcon32, - SecurityIcon, - SecurityIcon32, - SettingsIcon, - SettingsIcon32, - ShareIcon, - ShareIcon32, - SigninIcon, - SigninIcon32, SignoutIcon, + SignoutIcon24, SignoutIcon32, - TrashboxIcon, - TrashboxIcon32, - UploadIcon, - UploadIcon32, - UserIcon, - UserIcon32, + SlashIcon, + SlashIcon24, + SlashIcon32, + SortIcon, + SortIcon24, + SortIcon32, + TrashIcon, + TrashIcon24, + TrashIcon32, + UserAddIcon, + UserAddIcon24, + UserAddIcon32, + UserRemoveIcon, + UserRemoveIcon24, + UserRemoveIcon32, VerticalDotsIcon, + VerticalDotsIcon24, VerticalDotsIcon32, - VideoFileIcon, - VideoFileIcon32, - ViewIcon, - ViewIcon32, + VideoIcon, + VideoIcon24, + VideoIcon32, WarningIcon, - WarningIcon32 + WarningIcon24, + WarningIcon32, + ZipIcon, + ZipIcon24, + ZipIcon32 } from "@react-components/icons"; import { CheckeredBackground, ExternalLink, Preview, Tagline } from "@stories/components"; import { IconGallery, createMultiVariant, createVariant, renderItem } from "./icon-gallery"; @@ -168,7 +151,7 @@ import { Meta } from "@storybook/addon-docs/blocks"; Orbit Design provide a set of SVG icons built specifically for ShareGate products. -All official icons **includes their padding** and are available in `32px`. +All official icons **includes their padding** and are generally available in two variants, `24px` and `32px`. If an icon is only available in `32px`, he is considered universal. Orbit UI make those icons available for products in two ways, *React components* and *static files*. @@ -177,83 +160,52 @@ If you are looking for documentation about custom SVG icons (e.g. Azure specific ## Gallery - {renderItem("Add", createMultiVariant(), [createVariant("32x32", , "icon-add-32.svg")])} - {renderItem("AddGuest", createMultiVariant(), [createVariant("32x32", , "icon-add-guest-32.svg")])} - {renderItem("AddUser", createMultiVariant(), [createVariant("32x32", , "icon-add-user-32.svg")])} - {renderItem("Arrow", createMultiVariant(), [createVariant("32x32", , "icon-arrow-32.svg")])} - {renderItem("ArrowDown", createMultiVariant(), [createVariant("32x32", , "icon-arrow-down-32.svg")])} - {renderItem("ArrowDownLeft", createMultiVariant(), [createVariant("32x32", , "icon-arrow-down-left-32.svg")])} - {renderItem("ArrowDownRight", createMultiVariant(), [createVariant("32x32", , "icon-arrow-down-right-32.svg")])} - {renderItem("ArrowUpLeft", createMultiVariant(), [createVariant("32x32", , "icon-arrow-up-left-32.svg")])} - {renderItem("ArrowUpRight", createMultiVariant(), [createVariant("32x32", , "icon-arrow-up-right-32.svg")])} - {renderItem("ArrowLeft", createMultiVariant(), [createVariant("32x32", , "icon-arrow-left-32.svg")])} - {renderItem("ArrowRight", createMultiVariant(), [createVariant("32x32", , "icon-arrow-right-32.svg")])} - {renderItem("ArrowLineUp", createMultiVariant(), [createVariant("32x32", , "icon-arrow-line-up-32.svg")])} - {renderItem("ArrowUp", createMultiVariant(), [createVariant("32x32", , "icon-arrow-up-32.svg")])} - {renderItem("ArrowsUpDown", createMultiVariant(), [createVariant("32x32", , "icon-arrows-up-down-32.svg")])} - {renderItem("Calendar", createMultiVariant(), [createVariant("32x32", , "icon-calendar-32.svg")])} - {renderItem("CalendarPreset", createMultiVariant(), [createVariant("32x32", , "icon-calendar-preset-32.svg")])} - {renderItem("Caret", createMultiVariant(), [createVariant("32x32", , "icon-caret-32.svg")])} - {renderItem("CaretDown", createMultiVariant(), [createVariant("32x32", , "icon-caret-down-32.svg")])} - {renderItem("CaretUp", createMultiVariant(), [createVariant("32x32", , "icon-caret-up-32.svg")])} - {renderItem("CaretLeft", createMultiVariant(), [createVariant("32x32", , "icon-caret-left-32.svg")])} - {renderItem("CaretRight", createMultiVariant(), [createVariant("32x32", , "icon-caret-right-32.svg")])} - {renderItem("CaretUpDown", createMultiVariant(), [createVariant("32x32", , "icon-caret-up-down-32.svg")])} - {renderItem("CheckCircle", createMultiVariant(), [createVariant("32x32", , "icon-check-circle-32.svg")])} - {renderItem("Checkmark", createMultiVariant(), [createVariant("32x32", , "icon-checkmark-32.svg")])} - {renderItem("Chevron", createMultiVariant(), [createVariant("32x32", , "icon-chevron-32.svg")])} - {renderItem("ChevronUp", createMultiVariant(), [createVariant("32x32", , "icon-chevron-up-32.svg")])} - {renderItem("ChevronDown", createMultiVariant(), [createVariant("32x32", , "icon-chevron-down-32.svg")])} - {renderItem("ChevronLeft", createMultiVariant(), [createVariant("32x32", , "icon-chevron-left-32.svg")])} - {renderItem("ChevronRight", createMultiVariant(), [createVariant("32x32", , "icon-chevron-right-32.svg")])} - {renderItem("ChevronUpDown", createMultiVariant(), [createVariant("32x32", , "icon-chevron-up-down-32.svg")])} - {renderItem("ClearFilter", createMultiVariant(), [createVariant("32x32", , "icon-clear-filter-32.svg")])} - {renderItem("Close", createMultiVariant(), [createVariant("32x32", , "icon-close-32.svg")])} - {renderItem("Cross", createMultiVariant(), [createVariant("32x32", , "icon-cross-32.svg")])} - {renderItem("CsvFile", createMultiVariant(), [createVariant("32x32", , "icon-csv-file-32.svg")])} - {renderItem("DeleteLink", createMultiVariant(), [createVariant("32x32", , "icon-delete-link-32.svg")])} - {renderItem("DoNotDisturb", createMultiVariant(), [createVariant("32x32", , "icon-do-not-disturb-32.svg")])} - {renderItem("Download", createMultiVariant(), [createVariant("32x32", , "icon-download-32.svg")])} - {renderItem("Edit", createMultiVariant(), [createVariant("32x32", , "icon-edit-32.svg")])} - {renderItem("File", createMultiVariant(), [createVariant("32x32", , "icon-file-32.svg")])} - {renderItem("Filter", createMultiVariant(), [createVariant("32x32", , "icon-filter-32.svg")])} - {renderItem("Flag", createMultiVariant(), [createVariant("32x32", , "icon-flag-32.svg")])} - {renderItem("Folder", createMultiVariant(), [createVariant("32x32", , "icon-folder-32.svg")])} - {renderItem("Gear", createMultiVariant(), [createVariant("32x32", , "icon-gear-32.svg")])} - {renderItem("Group", createMultiVariant(), [createVariant("32x32", , "icon-group-32.svg")])} - {renderItem("GroupSetting", createMultiVariant(), [createVariant("32x32", , "icon-group-setting-32.svg")])} - {renderItem("Guest", createMultiVariant(), [createVariant("32x32", , "icon-guest-32.svg")])} - {renderItem("Help", createMultiVariant(), [createVariant("32x32", , "icon-help-32.svg")])} - {renderItem("HorizontalDots", createMultiVariant(), [createVariant("32x32", , "icon-horizontal-dots-32.svg")])} - {renderItem("Info", createMultiVariant(), [createVariant("32x32", , "icon-info-32.svg")])} - {renderItem("Key", createMultiVariant(), [createVariant("32x32", , "icon-key-32.svg")])} - {renderItem("Lightbulb", createMultiVariant(), [createVariant("32x32", , "icon-lightbulb-32.svg")])} - {renderItem("Link", createMultiVariant(), [createVariant("32x32", , "icon-link-32.svg")])} - {renderItem("Magnifier", createMultiVariant(), [createVariant("32x32", , "icon-magnifier-32.svg")])} - {renderItem("Mail", createMultiVariant(), [createVariant("32x32", , "icon-mail-32.svg")])} - {renderItem("MusicFile", createMultiVariant(), [createVariant("32x32", , "icon-music-file-32.svg")])} - {renderItem("NoGuest", createMultiVariant(), [createVariant("32x32", , "icon-no-guest-32.svg")])} - {renderItem("Notification", createMultiVariant(), [createVariant("32x32", , "icon-notification-32.svg")])} - {renderItem("PdfFile", createMultiVariant(), [createVariant("32x32", , "icon-pdf-file-32.svg")])} - {renderItem("Picture", createMultiVariant(), [createVariant("32x32", , "icon-picture-32.svg")])} - {renderItem("Printer", createMultiVariant(), [createVariant("32x32", , "icon-printer-32.svg")])} - {renderItem("Privacy", createMultiVariant(), [createVariant("32x32", , "icon-privacy-32.svg")])} - {renderItem("PrivateGroup", createMultiVariant(), [createVariant("32x32", , "icon-private-group-32.svg")])} - {renderItem("PublicGroup", createMultiVariant(), [createVariant("32x32", , "icon-public-group-32.svg")])} - {renderItem("RemoveGuest", createMultiVariant(), [createVariant("32x32", , "icon-remove-guest-32.svg")])} - {renderItem("RemoveUser", createMultiVariant(), [createVariant("32x32", , "icon-remove-user-32.svg")])} - {renderItem("Security", createMultiVariant(), [createVariant("32x32", , "icon-security-32.svg")])} - {renderItem("Settings", createMultiVariant(), [createVariant("32x32", , "icon-settings-32.svg")])} - {renderItem("Share", createMultiVariant(), [createVariant("32x32", , "icon-share-32.svg")])} - {renderItem("Signin", createMultiVariant(), [createVariant("32x32", , "icon-signin-32.svg")])} - {renderItem("Signout", createMultiVariant(), [createVariant("32x32", , "icon-signout-32.svg")])} - {renderItem("Trashbox", createMultiVariant(), [createVariant("32x32", , "icon-trashbox-32.svg")])} - {renderItem("Upload", createMultiVariant(), [createVariant("32x32", , "icon-upload-32.svg")])} - {renderItem("User", createMultiVariant(), [createVariant("32x32", , "icon-user-32.svg")])} - {renderItem("VerticalDots", createMultiVariant(), [createVariant("32x32", , "icon-vertical-dots-32.svg")])} - {renderItem("VideoFile", createMultiVariant(), [createVariant("32x32", , "icon-video-file-32.svg")])} - {renderItem("View", createMultiVariant(), [createVariant("32x32", , "icon-view-32.svg")])} - {renderItem("Warning", createMultiVariant(), [createVariant("32x32", , "icon-warning-32.svg")])} + {renderItem("Add", createMultiVariant(), [createVariant("24x24", , "icon-add-24.svg"), createVariant("32x32", , "icon-add-32.svg")])} + {renderItem("Arrow", createMultiVariant(), [createVariant("24x24", , "icon-arrow-24.svg"), createVariant("32x32", , "icon-arrow-32.svg")])} + {renderItem("Calendar", createMultiVariant(), [createVariant("24x24", , "icon-calendar-24.svg"), createVariant("32x32", , "icon-calendar-32.svg")])} + {renderItem("Caret", createMultiVariant(), [createVariant("24x24", , "icon-caret-24.svg"), createVariant("32x32", , "icon-caret-32.svg")])} + {renderItem("Check", createMultiVariant(), [createVariant("24x24", , "icon-check-24.svg"), createVariant("32x32", , "icon-check-32.svg")])} + {renderItem("Check Circle", createMultiVariant(), [createVariant("24x24", , "icon-check-circle-24.svg"), createVariant("32x32", , "icon-check-circle-32.svg")])} + {renderItem("Chevron", createMultiVariant(), [createVariant("24x24", , "icon-chevron-24.svg"), createVariant("32x32", , "icon-chevron-32.svg")])} + {renderItem("ClearFilter", createMultiVariant(), [createVariant("24x24", , "icon-clearfilter-24.svg"), createVariant("32x32", , "icon-clearfilter-32.svg")])} + {renderItem("Cross", createMultiVariant(), [createVariant("24x24", , "icon-cross-24.svg"), createVariant("32x32", , "icon-cross-32.svg")])} + {renderItem("Csv", createMultiVariant(), [createVariant("24x24", , "icon-csv-24.svg"), createVariant("32x32", , "icon-csv-32.svg")])} + {renderItem("Dash", createMultiVariant(), [createVariant("24x24", , "icon-dash-24.svg"), createVariant("32x32", , "icon-dash-32.svg")])} + {renderItem("Download", createMultiVariant(), [createVariant("24x24", , "icon-download-24.svg"), createVariant("32x32", , "icon-download-32.svg")])} + {renderItem("Edit", createMultiVariant(), [createVariant("24x24", , "icon-edit-24.svg"), createVariant("32x32", , "icon-edit-32.svg")])} + {renderItem("Email", createMultiVariant(), [createVariant("24x24", , "icon-email-24.svg"), createVariant("32x32", , "icon-email-32.svg")])} + {renderItem("EmailReminder", createMultiVariant(), [createVariant("24x24", , "icon-email-reminder-24.svg"), createVariant("32x32", , "icon-email-reminder-32.svg")])} + {renderItem("Eye", createMultiVariant(), [createVariant("24x24", , "icon-eye-24.svg"), createVariant("32x32", , "icon-eye-32.svg")])} + {renderItem("File", createMultiVariant(), [createVariant("24x24", , "icon-file-24.svg"), createVariant("32x32", , "icon-file-32.svg")])} + {renderItem("Filter", createMultiVariant(), [createVariant("24x24", , "icon-filter-24.svg"), createVariant("32x32", , "icon-filter-32.svg")])} + {renderItem("Flag", createMultiVariant(), [createVariant("24x24", , "icon-flag-24.svg"), createVariant("32x32", , "icon-flag-32.svg")])} + {renderItem("Folder", createMultiVariant(), [createVariant("24x24", , "icon-folder-24.svg"), createVariant("32x32", , "icon-folder-32.svg")])} + {renderItem("Trash", createMultiVariant(), [createVariant("24x24", , "icon-trash-24.svg"), createVariant("32x32", , "icon-trash-32.svg")])} + {renderItem("Gear", createMultiVariant(), [createVariant("24x24", , "icon-gear-24.svg"), createVariant("32x32", , "icon-gear-32.svg")])} + {renderItem("Group", createMultiVariant(), [createVariant("24x24", , "icon-group-24.svg"), createVariant("32x32", , "icon-group-32.svg")])} + {renderItem("GuestAdd", createMultiVariant(), [createVariant("24x24", , "icon-guest-add-24.svg"), createVariant("32x32", , "icon-guest-add-32.svg")])} + {renderItem("GuestRemove", createMultiVariant(), [createVariant("24x24", , "icon-guest-remove-24.svg"), createVariant("32x32", , "icon-guest-remove-32.svg")])} + {renderItem("Help", createMultiVariant(), [createVariant("24x24", , "icon-help-24.svg"), createVariant("32x32", , "icon-help-32.svg")])} + {renderItem("HorizontalDots", createMultiVariant(), [createVariant("32x32", , "icon-horizontaldots-32.svg")])} + {renderItem("Image", createMultiVariant(), [createVariant("24x24", , "icon-image-24.svg"), createVariant("32x32", , "icon-image-32.svg")])} + {renderItem("Info", createMultiVariant(), [createVariant("24x24", , "icon-info-24.svg"), createVariant("32x32", , "icon-info-32.svg")])} + {renderItem("Lightbulb", createMultiVariant(), [createVariant("24x24", , "icon-lightbulb-24.svg"), createVariant("32x32", , "icon-lightbulb-32.svg")])} + {renderItem("Magnifier", createMultiVariant(), [createVariant("24x24", , "icon-magnifier-24.svg"), createVariant("32x32", , "icon-magnifier-32.svg")])} + {renderItem("Music", createMultiVariant(), [createVariant("24x24", , "icon-music-24.svg"), createVariant("32x32", , "icon-music-32.svg")])} + {renderItem("Notification", createMultiVariant(), [createVariant("24x24", , "icon-notification-24.svg"), createVariant("32x32", , "icon-notification-32.svg")])} + {renderItem("NotificationOff", createMultiVariant(), [createVariant("24x24", , "icon-notification-off-24.svg"), createVariant("32x32", , "icon-notification-off-32.svg")])} + {renderItem("Pdf", createMultiVariant(), [createVariant("24x24", , "icon-pdf-24.svg"), createVariant("32x32", , "icon-pdf-32.svg")])} + {renderItem("Printer", createMultiVariant(), [createVariant("24x24", , "icon-printer-24.svg"), createVariant("32x32", , "icon-printer-32.svg")])} + {renderItem("Privacy", createMultiVariant(), [createVariant("24x24", , "icon-privacy-24.svg"), createVariant("32x32", , "icon-privacy-32.svg")])} + {renderItem("Signout", createMultiVariant(), [createVariant("24x24", , "icon-signout-24.svg"), createVariant("32x32", , "icon-signout-32.svg")])} + {renderItem("Slash", createMultiVariant(), [createVariant("24x24", , "icon-slash-24.svg"), createVariant("32x32", , "icon-slash-32.svg")])} + {renderItem("Sort", createMultiVariant(), [createVariant("24x24", , "icon-sort-24.svg"), createVariant("32x32", , "icon-sort-32.svg")])} + {renderItem("UserAdd", createMultiVariant(), [createVariant("24x24", , "icon-user-add-24.svg"), createVariant("32x32", , "icon-user-add-32.svg")])} + {renderItem("UserRemove", createMultiVariant(), [createVariant("24x24", , "icon-user-remove-24.svg"), createVariant("32x32", , "icon-user-remove-32.svg")])} + {renderItem("VerticalDots", createMultiVariant(), [createVariant("24x24", , "icon-vertical-dots-24.svg"), createVariant("32x32", , "icon-vertical-dots-32.svg")])} + {renderItem("Video", createMultiVariant(), [createVariant("24x24", , "icon-video-24.svg"), createVariant("32x32", , "icon-video-32.svg")])} + {renderItem("Warning", createMultiVariant(), [createVariant("24x24", , "icon-warning-24.svg"), createVariant("32x32", , "icon-warning-32.svg")])} + {renderItem("Zip", createMultiVariant(), [createVariant("24x24", , "icon-zip-24.svg"), createVariant("32x32", , "icon-zip-32.svg")])} ## Dimensions @@ -280,13 +232,13 @@ function render() { #### Variants -Variants components let you decide at import time which variant of an icon to use, if a variant exist. Use a variant component, where available, to pair an icon variant with any dimensions. +Variants components let you decide at import time which variant of an icon to use. Use a variant component to pair an icon variant with any dimensions. ```jsx -import { CalendarIcon32 } from "@orbit-ui/react-components"; +import { CalendarIcon24 } from "@orbit-ui/react-components"; function render() { - return ; + return ; } ``` @@ -313,49 +265,49 @@ To alter the dimensions of an icon, you can specify any of the following sizes: ### Static files -Icons SVG files are available from the root of `@orbit-ui/icons` package. These files are useful for non React apps or any use cases which cannot be done using a component. Whenever you can, you should prefer React components to static files. +Icons SVG files are available from the root of `@orbit-ui/icons` package. These files are usefull for non React apps or any use cases which cannot be done using a component. Whenever you can, you should prefer React components to static files. -Orbit Design provide icons with default dimensions, e.g. a `32px` variant will have a default viewport of 32x32 and a viewbox of `0 0 32 32`. +Orbit Design provide icons with default dimensions, e.g. a `24px` variant will have a default viewport of 24x24 and a viewbox of `0 0 24 24`. You can customize an icon dimensions with either [Tachyons dimensions classes](?path=/docs/spacing--page#tachyons) (e.g. `w6 h6` for a `24px` variant icon or `w7 h7` for a `32px` variant icon) or CSS and Orbit UI [CSS spacing variables](?path=/docs/materials-spacing--page#values). #### Image source ```jsx -import CalendarIcon32 from "@orbit-ui/icons/icon-calendar-32.svg"; +import CalendarIcon24 from "@orbit-ui/icons/icon-calendar-24.svg"; function render() { - return Calendar; + return Calendar; } ``` #### CSS background ```css -.calendar-32 { - background: url("~@orbit-ui/icons/icon-calendar-32.svg"); - width: var(--o-ui-global-scale-golf); - height: var(--o-ui-global-scale-golf); +.calendar-24 { + background: url("~@orbit-ui/icons/icon-calendar-24.svg"); + width: var(--o-ui-global-scale-foxtrot); + height: var(--o-ui-global-scale-foxtrot); } ``` ## Color -An SVG object get it's color from the [stroke attribute](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes). When an SVG object doesn't define a `stroke` attribute on his elements, CSS can be use to style the internal color of the elements of the objects with the `stroke` property. +An SVG object get it's color from the [fill attribute](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes). When an SVG object doesn't define a `fill` attribute on his elements, CSS can be use to style the internal color of the elements of the objects with the `fill` property. -This means that you can alter the color of an icon by specifying a new `stroke` value with either [Tachyons stroke classes](?path=/docs/colors--page#tachyons) or with CSS and [Orbit UI color variables](?path=/docs/foundation--page#colors). +This means that you can alter the color of an icon by specifying a new `fill` value with either [Tachyons fill classes](?path=/docs/colors--page#tachyons) or with CSS and [Orbit UI color variables](?path=/docs/foundation--page#colors). -stroke attribute. If the SVG contains a stroke attribute, please fill an issue. +fill attribute. If the SVG contains a fill attribute, please fill an issue. ### React components -To set the color of an icon component, you can add [Tachyons stroke classes](?path=/docs/colors--page#tachyons) directly on the component with the `className` prop: +To set the color of an icon component, you can add [Tachyons fill classes](?path=/docs/colors--page#tachyons) directly on the component with the `className` prop: ```jsx import { CalendarIcon } from "@orbit-ui/react-components"; function render() { - return + return } ``` @@ -365,19 +317,19 @@ If your color is dynamic, you can use the `style` prop and [Orbit UI color varia import { CalendarIcon } from "@orbit-ui/react-components"; function render() { - return ; + return ; } ``` ### Image source -To set the color of an image icon you can add [Tachyons stroke classes](?path=/docs/colors--page#tachyons) directly on the component with the `className` prop or use the `style` prop and [Orbit UI color variables](?path=/docs/colors--page#colors) to set a dynamic color: +To set the color of an image icon you can add [Tachyons fill classes](?path=/docs/colors--page#tachyons) directly on the component with the `className` prop or use the `style` prop and [Orbit UI color variables](?path=/docs/colors--page#colors) to set a dynamic color: ```jsx -import CalendarIcon32 from "@orbit-ui/icons/icon-calendar-32.svg"; +import CalendarIcon24 from "@orbit-ui/icons/icon-calendar-24.svg"; function render() { - return calendar; + return calendar; } ``` diff --git a/packages/icons/src/icon-add-24.svg b/packages/icons/src/icon-add-24.svg new file mode 100644 index 000000000..b37a83920 --- /dev/null +++ b/packages/icons/src/icon-add-24.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/src/icon-add-32.svg b/packages/icons/src/icon-add-32.svg index 5373e7743..a301307ff 100644 --- a/packages/icons/src/icon-add-32.svg +++ b/packages/icons/src/icon-add-32.svg @@ -1 +1,3 @@ - + + + diff --git a/packages/icons/src/icon-add-guest-32.svg b/packages/icons/src/icon-add-guest-32.svg deleted file mode 100644 index 1b2b5a663..000000000 --- a/packages/icons/src/icon-add-guest-32.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/icons/src/icon-add-user-32.svg b/packages/icons/src/icon-add-user-32.svg deleted file mode 100644 index b332250e4..000000000 --- a/packages/icons/src/icon-add-user-32.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/icons/src/icon-arrow-24.svg b/packages/icons/src/icon-arrow-24.svg new file mode 100644 index 000000000..5666a7038 --- /dev/null +++ b/packages/icons/src/icon-arrow-24.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/src/icon-arrow-32.svg b/packages/icons/src/icon-arrow-32.svg index b73f62fa4..d7c0c16a0 100644 --- a/packages/icons/src/icon-arrow-32.svg +++ b/packages/icons/src/icon-arrow-32.svg @@ -1 +1,3 @@ - \ No newline at end of file + + + diff --git a/packages/icons/src/icon-arrow-down-32.svg b/packages/icons/src/icon-arrow-down-32.svg deleted file mode 100644 index db7abd8eb..000000000 --- a/packages/icons/src/icon-arrow-down-32.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/icons/src/icon-arrow-down-left-32.svg b/packages/icons/src/icon-arrow-down-left-32.svg deleted file mode 100644 index d81f3e443..000000000 --- a/packages/icons/src/icon-arrow-down-left-32.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/icons/src/icon-arrow-down-right-32.svg b/packages/icons/src/icon-arrow-down-right-32.svg deleted file mode 100644 index ab234150d..000000000 --- a/packages/icons/src/icon-arrow-down-right-32.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/icons/src/icon-arrow-left-32.svg b/packages/icons/src/icon-arrow-left-32.svg deleted file mode 100644 index 0d911cbdf..000000000 --- a/packages/icons/src/icon-arrow-left-32.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/icons/src/icon-arrow-line-up-32.svg b/packages/icons/src/icon-arrow-line-up-32.svg deleted file mode 100644 index 5f1b7a971..000000000 --- a/packages/icons/src/icon-arrow-line-up-32.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/icons/src/icon-arrow-right-32.svg b/packages/icons/src/icon-arrow-right-32.svg deleted file mode 100644 index b73f62fa4..000000000 --- a/packages/icons/src/icon-arrow-right-32.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/icons/src/icon-arrow-up-32.svg b/packages/icons/src/icon-arrow-up-32.svg deleted file mode 100644 index 2fb1d58ba..000000000 --- a/packages/icons/src/icon-arrow-up-32.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/icons/src/icon-arrow-up-left-32.svg b/packages/icons/src/icon-arrow-up-left-32.svg deleted file mode 100644 index 6e90e13e7..000000000 --- a/packages/icons/src/icon-arrow-up-left-32.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/icons/src/icon-arrow-up-right-32.svg b/packages/icons/src/icon-arrow-up-right-32.svg deleted file mode 100644 index ba4a8970d..000000000 --- a/packages/icons/src/icon-arrow-up-right-32.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/icons/src/icon-arrows-up-down-32.svg b/packages/icons/src/icon-arrows-up-down-32.svg deleted file mode 100644 index 743cb2712..000000000 --- a/packages/icons/src/icon-arrows-up-down-32.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/icons/src/icon-calendar-24.svg b/packages/icons/src/icon-calendar-24.svg new file mode 100644 index 000000000..ed286b6b0 --- /dev/null +++ b/packages/icons/src/icon-calendar-24.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/icons/src/icon-calendar-32.svg b/packages/icons/src/icon-calendar-32.svg index 658ba670a..391526e4d 100644 --- a/packages/icons/src/icon-calendar-32.svg +++ b/packages/icons/src/icon-calendar-32.svg @@ -1 +1,5 @@ - + + + + + diff --git a/packages/icons/src/icon-calendar-preset-32.svg b/packages/icons/src/icon-calendar-preset-32.svg deleted file mode 100644 index 122ead1e4..000000000 --- a/packages/icons/src/icon-calendar-preset-32.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/icons/src/icon-caret-24.svg b/packages/icons/src/icon-caret-24.svg new file mode 100644 index 000000000..2df1ae9cf --- /dev/null +++ b/packages/icons/src/icon-caret-24.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/src/icon-caret-32.svg b/packages/icons/src/icon-caret-32.svg index b02c97449..407e0425a 100644 --- a/packages/icons/src/icon-caret-32.svg +++ b/packages/icons/src/icon-caret-32.svg @@ -1 +1,3 @@ - + + + diff --git a/packages/icons/src/icon-caret-down-32.svg b/packages/icons/src/icon-caret-down-32.svg deleted file mode 100644 index 7470f86ef..000000000 --- a/packages/icons/src/icon-caret-down-32.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/icons/src/icon-caret-left-32.svg b/packages/icons/src/icon-caret-left-32.svg deleted file mode 100644 index bd4b1256e..000000000 --- a/packages/icons/src/icon-caret-left-32.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/icons/src/icon-caret-right-32.svg b/packages/icons/src/icon-caret-right-32.svg deleted file mode 100644 index 78e80c299..000000000 --- a/packages/icons/src/icon-caret-right-32.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/icons/src/icon-caret-up-32.svg b/packages/icons/src/icon-caret-up-32.svg deleted file mode 100644 index b02c97449..000000000 --- a/packages/icons/src/icon-caret-up-32.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/icons/src/icon-caret-up-down-32.svg b/packages/icons/src/icon-caret-up-down-32.svg deleted file mode 100644 index f5ca61e95..000000000 --- a/packages/icons/src/icon-caret-up-down-32.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/icons/src/icon-check-24.svg b/packages/icons/src/icon-check-24.svg new file mode 100644 index 000000000..2b55cc5fe --- /dev/null +++ b/packages/icons/src/icon-check-24.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/src/icon-check-32.svg b/packages/icons/src/icon-check-32.svg new file mode 100644 index 000000000..c2e400eab --- /dev/null +++ b/packages/icons/src/icon-check-32.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/src/icon-check-circle-24.svg b/packages/icons/src/icon-check-circle-24.svg new file mode 100644 index 000000000..b2a7f0e7e --- /dev/null +++ b/packages/icons/src/icon-check-circle-24.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/src/icon-check-circle-32.svg b/packages/icons/src/icon-check-circle-32.svg index 0fa33ed3a..ad6891e33 100644 --- a/packages/icons/src/icon-check-circle-32.svg +++ b/packages/icons/src/icon-check-circle-32.svg @@ -1 +1,3 @@ - \ No newline at end of file + + + diff --git a/packages/icons/src/icon-checkmark-32.svg b/packages/icons/src/icon-checkmark-32.svg deleted file mode 100644 index 7c9f1d5a8..000000000 --- a/packages/icons/src/icon-checkmark-32.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/icons/src/icon-checkmark-fill-24.svg b/packages/icons/src/icon-checkmark-fill-24.svg deleted file mode 100644 index 14309066b..000000000 --- a/packages/icons/src/icon-checkmark-fill-24.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/icons/src/icon-chevron-24.svg b/packages/icons/src/icon-chevron-24.svg new file mode 100644 index 000000000..328d08ce3 --- /dev/null +++ b/packages/icons/src/icon-chevron-24.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/src/icon-chevron-32.svg b/packages/icons/src/icon-chevron-32.svg index a7a66b6e8..07f830248 100644 --- a/packages/icons/src/icon-chevron-32.svg +++ b/packages/icons/src/icon-chevron-32.svg @@ -1 +1,3 @@ - + + + diff --git a/packages/icons/src/icon-chevron-down-32.svg b/packages/icons/src/icon-chevron-down-32.svg deleted file mode 100644 index bfa932eba..000000000 --- a/packages/icons/src/icon-chevron-down-32.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/icons/src/icon-chevron-left-32.svg b/packages/icons/src/icon-chevron-left-32.svg deleted file mode 100644 index b3e247567..000000000 --- a/packages/icons/src/icon-chevron-left-32.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/icons/src/icon-chevron-right-32.svg b/packages/icons/src/icon-chevron-right-32.svg deleted file mode 100644 index 3ebf7d29f..000000000 --- a/packages/icons/src/icon-chevron-right-32.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/icons/src/icon-chevron-up-32.svg b/packages/icons/src/icon-chevron-up-32.svg deleted file mode 100644 index d6cce03f1..000000000 --- a/packages/icons/src/icon-chevron-up-32.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/icons/src/icon-chevron-up-down-32.svg b/packages/icons/src/icon-chevron-up-down-32.svg deleted file mode 100644 index 041556b85..000000000 --- a/packages/icons/src/icon-chevron-up-down-32.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/icons/src/icon-clear-filter-24.svg b/packages/icons/src/icon-clear-filter-24.svg new file mode 100644 index 000000000..c37f2489c --- /dev/null +++ b/packages/icons/src/icon-clear-filter-24.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/src/icon-clear-filter-32.svg b/packages/icons/src/icon-clear-filter-32.svg index c9f26b0c4..8be0617c1 100644 --- a/packages/icons/src/icon-clear-filter-32.svg +++ b/packages/icons/src/icon-clear-filter-32.svg @@ -1 +1,3 @@ - \ No newline at end of file + + + diff --git a/packages/icons/src/icon-close-32.svg b/packages/icons/src/icon-close-32.svg deleted file mode 100644 index a963d5d8a..000000000 --- a/packages/icons/src/icon-close-32.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/icons/src/icon-cross-24.svg b/packages/icons/src/icon-cross-24.svg new file mode 100644 index 000000000..d8d14586c --- /dev/null +++ b/packages/icons/src/icon-cross-24.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/src/icon-cross-32.svg b/packages/icons/src/icon-cross-32.svg index a963d5d8a..58cab8951 100644 --- a/packages/icons/src/icon-cross-32.svg +++ b/packages/icons/src/icon-cross-32.svg @@ -1 +1,3 @@ - \ No newline at end of file + + + diff --git a/packages/icons/src/icon-csv-24.svg b/packages/icons/src/icon-csv-24.svg new file mode 100644 index 000000000..6f992f3ac --- /dev/null +++ b/packages/icons/src/icon-csv-24.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/icons/src/icon-csv-32.svg b/packages/icons/src/icon-csv-32.svg new file mode 100644 index 000000000..be8b0c577 --- /dev/null +++ b/packages/icons/src/icon-csv-32.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/icons/src/icon-csv-file-32.svg b/packages/icons/src/icon-csv-file-32.svg deleted file mode 100644 index d6bc882e3..000000000 --- a/packages/icons/src/icon-csv-file-32.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/icons/src/icon-dash-24.svg b/packages/icons/src/icon-dash-24.svg new file mode 100644 index 000000000..32b3bb41f --- /dev/null +++ b/packages/icons/src/icon-dash-24.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/src/icon-dash-32.svg b/packages/icons/src/icon-dash-32.svg index bab644559..ec6d39515 100644 --- a/packages/icons/src/icon-dash-32.svg +++ b/packages/icons/src/icon-dash-32.svg @@ -1 +1,3 @@ - + + + diff --git a/packages/icons/src/icon-delete-link-32.svg b/packages/icons/src/icon-delete-link-32.svg deleted file mode 100644 index e1f44be1d..000000000 --- a/packages/icons/src/icon-delete-link-32.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/icons/src/icon-do-not-disturb-32.svg b/packages/icons/src/icon-do-not-disturb-32.svg deleted file mode 100644 index 3b4c0e4f6..000000000 --- a/packages/icons/src/icon-do-not-disturb-32.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/icons/src/icon-dot-24.svg b/packages/icons/src/icon-dot-24.svg new file mode 100644 index 000000000..077e5b6bb --- /dev/null +++ b/packages/icons/src/icon-dot-24.svg @@ -0,0 +1 @@ + diff --git a/packages/icons/src/icon-dot-32.svg b/packages/icons/src/icon-dot-32.svg new file mode 100644 index 000000000..64db279d2 --- /dev/null +++ b/packages/icons/src/icon-dot-32.svg @@ -0,0 +1 @@ + diff --git a/packages/icons/src/icon-download-24.svg b/packages/icons/src/icon-download-24.svg new file mode 100644 index 000000000..dc52c73da --- /dev/null +++ b/packages/icons/src/icon-download-24.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/src/icon-download-32.svg b/packages/icons/src/icon-download-32.svg index 28a98cd76..5d0d88efd 100644 --- a/packages/icons/src/icon-download-32.svg +++ b/packages/icons/src/icon-download-32.svg @@ -1 +1,3 @@ - \ No newline at end of file + + + diff --git a/packages/icons/src/icon-edit-24.svg b/packages/icons/src/icon-edit-24.svg new file mode 100644 index 000000000..ccc94aada --- /dev/null +++ b/packages/icons/src/icon-edit-24.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/src/icon-edit-32.svg b/packages/icons/src/icon-edit-32.svg index 29f185745..739626ddf 100644 --- a/packages/icons/src/icon-edit-32.svg +++ b/packages/icons/src/icon-edit-32.svg @@ -1 +1,3 @@ - + + + diff --git a/packages/icons/src/icon-email-24.svg b/packages/icons/src/icon-email-24.svg new file mode 100644 index 000000000..8da0eb5f5 --- /dev/null +++ b/packages/icons/src/icon-email-24.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/icons/src/icon-email-32.svg b/packages/icons/src/icon-email-32.svg new file mode 100644 index 000000000..66b3f5b9e --- /dev/null +++ b/packages/icons/src/icon-email-32.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/src/icon-email-reminder-24.svg b/packages/icons/src/icon-email-reminder-24.svg new file mode 100644 index 000000000..06b062c90 --- /dev/null +++ b/packages/icons/src/icon-email-reminder-24.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/icons/src/icon-email-reminder-32.svg b/packages/icons/src/icon-email-reminder-32.svg new file mode 100644 index 000000000..8f5f340c6 --- /dev/null +++ b/packages/icons/src/icon-email-reminder-32.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/src/icon-eye-24.svg b/packages/icons/src/icon-eye-24.svg new file mode 100644 index 000000000..b2ebac56e --- /dev/null +++ b/packages/icons/src/icon-eye-24.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/src/icon-eye-32.svg b/packages/icons/src/icon-eye-32.svg new file mode 100644 index 000000000..072882d64 --- /dev/null +++ b/packages/icons/src/icon-eye-32.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/icons/src/icon-file-24.svg b/packages/icons/src/icon-file-24.svg new file mode 100644 index 000000000..c091881f7 --- /dev/null +++ b/packages/icons/src/icon-file-24.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/src/icon-file-32.svg b/packages/icons/src/icon-file-32.svg index c23eb9ab2..1ed2cec2a 100644 --- a/packages/icons/src/icon-file-32.svg +++ b/packages/icons/src/icon-file-32.svg @@ -1 +1,3 @@ - \ No newline at end of file + + + diff --git a/packages/icons/src/icon-filter-24.svg b/packages/icons/src/icon-filter-24.svg new file mode 100644 index 000000000..379739c4f --- /dev/null +++ b/packages/icons/src/icon-filter-24.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/src/icon-filter-32.svg b/packages/icons/src/icon-filter-32.svg index e900971b7..8f0b3df5a 100644 --- a/packages/icons/src/icon-filter-32.svg +++ b/packages/icons/src/icon-filter-32.svg @@ -1 +1,3 @@ - + + + diff --git a/packages/icons/src/icon-flag-24.svg b/packages/icons/src/icon-flag-24.svg new file mode 100644 index 000000000..47e2db167 --- /dev/null +++ b/packages/icons/src/icon-flag-24.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/src/icon-flag-32.svg b/packages/icons/src/icon-flag-32.svg index 8d06b7724..1bdb831c3 100644 --- a/packages/icons/src/icon-flag-32.svg +++ b/packages/icons/src/icon-flag-32.svg @@ -1 +1,3 @@ - \ No newline at end of file + + + diff --git a/packages/icons/src/icon-folder-24.svg b/packages/icons/src/icon-folder-24.svg new file mode 100644 index 000000000..e3f409b83 --- /dev/null +++ b/packages/icons/src/icon-folder-24.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/src/icon-folder-32.svg b/packages/icons/src/icon-folder-32.svg index 6df1df02a..61dbd0666 100644 --- a/packages/icons/src/icon-folder-32.svg +++ b/packages/icons/src/icon-folder-32.svg @@ -1 +1,3 @@ - + + + diff --git a/packages/icons/src/icon-gear-24.svg b/packages/icons/src/icon-gear-24.svg new file mode 100644 index 000000000..385064266 --- /dev/null +++ b/packages/icons/src/icon-gear-24.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/icons/src/icon-gear-32.svg b/packages/icons/src/icon-gear-32.svg index 2a4977784..220c632bf 100644 --- a/packages/icons/src/icon-gear-32.svg +++ b/packages/icons/src/icon-gear-32.svg @@ -1 +1,4 @@ - + + + + diff --git a/packages/icons/src/icon-group-24.svg b/packages/icons/src/icon-group-24.svg new file mode 100644 index 000000000..f50d994fa --- /dev/null +++ b/packages/icons/src/icon-group-24.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/src/icon-group-32.svg b/packages/icons/src/icon-group-32.svg index 96f6b4288..c5bda80d9 100644 --- a/packages/icons/src/icon-group-32.svg +++ b/packages/icons/src/icon-group-32.svg @@ -1 +1,4 @@ - \ No newline at end of file + + + + diff --git a/packages/icons/src/icon-group-setting-32.svg b/packages/icons/src/icon-group-setting-32.svg deleted file mode 100644 index 0e03f66a1..000000000 --- a/packages/icons/src/icon-group-setting-32.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/icons/src/icon-guest-32.svg b/packages/icons/src/icon-guest-32.svg deleted file mode 100644 index 42dfb6f9b..000000000 --- a/packages/icons/src/icon-guest-32.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/icons/src/icon-guest-add-24.svg b/packages/icons/src/icon-guest-add-24.svg new file mode 100644 index 000000000..2a32060ef --- /dev/null +++ b/packages/icons/src/icon-guest-add-24.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/icons/src/icon-guest-add-32.svg b/packages/icons/src/icon-guest-add-32.svg new file mode 100644 index 000000000..f2ef650dc --- /dev/null +++ b/packages/icons/src/icon-guest-add-32.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/icons/src/icon-guest-remove-24.svg b/packages/icons/src/icon-guest-remove-24.svg new file mode 100644 index 000000000..c13067ed9 --- /dev/null +++ b/packages/icons/src/icon-guest-remove-24.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/packages/icons/src/icon-guest-remove-32.svg b/packages/icons/src/icon-guest-remove-32.svg new file mode 100644 index 000000000..946e179bb --- /dev/null +++ b/packages/icons/src/icon-guest-remove-32.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/packages/icons/src/icon-help-24.svg b/packages/icons/src/icon-help-24.svg new file mode 100644 index 000000000..31ee8f069 --- /dev/null +++ b/packages/icons/src/icon-help-24.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/icons/src/icon-help-32.svg b/packages/icons/src/icon-help-32.svg index e148b8318..81c23cc85 100644 --- a/packages/icons/src/icon-help-32.svg +++ b/packages/icons/src/icon-help-32.svg @@ -1 +1,4 @@ - \ No newline at end of file + + + + diff --git a/packages/icons/src/icon-horizontal-dots-24.svg b/packages/icons/src/icon-horizontal-dots-24.svg new file mode 100644 index 000000000..d86dc7b8c --- /dev/null +++ b/packages/icons/src/icon-horizontal-dots-24.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/src/icon-horizontal-dots-32.svg b/packages/icons/src/icon-horizontal-dots-32.svg index 28085f55c..6743d773a 100644 --- a/packages/icons/src/icon-horizontal-dots-32.svg +++ b/packages/icons/src/icon-horizontal-dots-32.svg @@ -1 +1,3 @@ - + + + diff --git a/packages/icons/src/icon-image-24.svg b/packages/icons/src/icon-image-24.svg new file mode 100644 index 000000000..4c57834f0 --- /dev/null +++ b/packages/icons/src/icon-image-24.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/icons/src/icon-image-32.svg b/packages/icons/src/icon-image-32.svg new file mode 100644 index 000000000..8c10aa13d --- /dev/null +++ b/packages/icons/src/icon-image-32.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/icons/src/icon-info-24.svg b/packages/icons/src/icon-info-24.svg new file mode 100644 index 000000000..45a03073c --- /dev/null +++ b/packages/icons/src/icon-info-24.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/icons/src/icon-info-32.svg b/packages/icons/src/icon-info-32.svg index 3ffdaecfd..602e2f61f 100644 --- a/packages/icons/src/icon-info-32.svg +++ b/packages/icons/src/icon-info-32.svg @@ -1 +1,4 @@ - \ No newline at end of file + + + + diff --git a/packages/icons/src/icon-key-32.svg b/packages/icons/src/icon-key-32.svg deleted file mode 100644 index 3b137ec4f..000000000 --- a/packages/icons/src/icon-key-32.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/icons/src/icon-lightbulb-24.svg b/packages/icons/src/icon-lightbulb-24.svg new file mode 100644 index 000000000..60dd41a8e --- /dev/null +++ b/packages/icons/src/icon-lightbulb-24.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/src/icon-lightbulb-32.svg b/packages/icons/src/icon-lightbulb-32.svg index 4a92b47f6..ce164dd81 100644 --- a/packages/icons/src/icon-lightbulb-32.svg +++ b/packages/icons/src/icon-lightbulb-32.svg @@ -1 +1,3 @@ - + + + diff --git a/packages/icons/src/icon-link-32.svg b/packages/icons/src/icon-link-32.svg deleted file mode 100644 index 3591366c3..000000000 --- a/packages/icons/src/icon-link-32.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/icons/src/icon-magnifier-24.svg b/packages/icons/src/icon-magnifier-24.svg new file mode 100644 index 000000000..9cb798ba8 --- /dev/null +++ b/packages/icons/src/icon-magnifier-24.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/src/icon-magnifier-32.svg b/packages/icons/src/icon-magnifier-32.svg index af4bde594..3299ec5d6 100644 --- a/packages/icons/src/icon-magnifier-32.svg +++ b/packages/icons/src/icon-magnifier-32.svg @@ -1 +1,3 @@ - \ No newline at end of file + + + diff --git a/packages/icons/src/icon-mail-32.svg b/packages/icons/src/icon-mail-32.svg deleted file mode 100644 index 3f57b523b..000000000 --- a/packages/icons/src/icon-mail-32.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/icons/src/icon-music-24.svg b/packages/icons/src/icon-music-24.svg new file mode 100644 index 000000000..5a1407c95 --- /dev/null +++ b/packages/icons/src/icon-music-24.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/icons/src/icon-music-32.svg b/packages/icons/src/icon-music-32.svg new file mode 100644 index 000000000..d2e08275f --- /dev/null +++ b/packages/icons/src/icon-music-32.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/icons/src/icon-music-file-32.svg b/packages/icons/src/icon-music-file-32.svg deleted file mode 100644 index 336fef0c1..000000000 --- a/packages/icons/src/icon-music-file-32.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/icons/src/icon-no-guest-32.svg b/packages/icons/src/icon-no-guest-32.svg deleted file mode 100644 index da72d6f84..000000000 --- a/packages/icons/src/icon-no-guest-32.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/icons/src/icon-notification-24.svg b/packages/icons/src/icon-notification-24.svg new file mode 100644 index 000000000..049c3211f --- /dev/null +++ b/packages/icons/src/icon-notification-24.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/src/icon-notification-32.svg b/packages/icons/src/icon-notification-32.svg index 879384b8e..7c2f1932d 100644 --- a/packages/icons/src/icon-notification-32.svg +++ b/packages/icons/src/icon-notification-32.svg @@ -1 +1,3 @@ - + + + diff --git a/packages/icons/src/icon-notification-off-24.svg b/packages/icons/src/icon-notification-off-24.svg new file mode 100644 index 000000000..03c49969a --- /dev/null +++ b/packages/icons/src/icon-notification-off-24.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/icons/src/icon-notification-off-32.svg b/packages/icons/src/icon-notification-off-32.svg new file mode 100644 index 000000000..fd4a7481a --- /dev/null +++ b/packages/icons/src/icon-notification-off-32.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/icons/src/icon-pdf-24.svg b/packages/icons/src/icon-pdf-24.svg new file mode 100644 index 000000000..04f5d3dd8 --- /dev/null +++ b/packages/icons/src/icon-pdf-24.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/icons/src/icon-pdf-32.svg b/packages/icons/src/icon-pdf-32.svg new file mode 100644 index 000000000..71f029739 --- /dev/null +++ b/packages/icons/src/icon-pdf-32.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/icons/src/icon-pdf-file-32.svg b/packages/icons/src/icon-pdf-file-32.svg deleted file mode 100644 index 0bf784422..000000000 --- a/packages/icons/src/icon-pdf-file-32.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/icons/src/icon-picture-32.svg b/packages/icons/src/icon-picture-32.svg deleted file mode 100644 index deb251699..000000000 --- a/packages/icons/src/icon-picture-32.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/icons/src/icon-printer-24.svg b/packages/icons/src/icon-printer-24.svg new file mode 100644 index 000000000..8acb404b0 --- /dev/null +++ b/packages/icons/src/icon-printer-24.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/icons/src/icon-printer-32.svg b/packages/icons/src/icon-printer-32.svg index 8c7378a53..d76e35b52 100644 --- a/packages/icons/src/icon-printer-32.svg +++ b/packages/icons/src/icon-printer-32.svg @@ -1 +1,4 @@ - + + + + diff --git a/packages/icons/src/icon-privacy-24.svg b/packages/icons/src/icon-privacy-24.svg new file mode 100644 index 000000000..b34bed992 --- /dev/null +++ b/packages/icons/src/icon-privacy-24.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/icons/src/icon-privacy-32.svg b/packages/icons/src/icon-privacy-32.svg index db30d780d..ea7a83aca 100644 --- a/packages/icons/src/icon-privacy-32.svg +++ b/packages/icons/src/icon-privacy-32.svg @@ -1 +1,4 @@ - + + + + diff --git a/packages/icons/src/icon-private-group-32.svg b/packages/icons/src/icon-private-group-32.svg deleted file mode 100644 index 73d9482da..000000000 --- a/packages/icons/src/icon-private-group-32.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/icons/src/icon-public-group-32.svg b/packages/icons/src/icon-public-group-32.svg deleted file mode 100644 index f5b59fdbc..000000000 --- a/packages/icons/src/icon-public-group-32.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/icons/src/icon-remove-guest-32.svg b/packages/icons/src/icon-remove-guest-32.svg deleted file mode 100644 index 20f1350b8..000000000 --- a/packages/icons/src/icon-remove-guest-32.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/icons/src/icon-remove-user-32.svg b/packages/icons/src/icon-remove-user-32.svg deleted file mode 100644 index eae081c35..000000000 --- a/packages/icons/src/icon-remove-user-32.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/icons/src/icon-review-not-available-32.svg b/packages/icons/src/icon-review-not-available-32.svg deleted file mode 100644 index b510c6f03..000000000 --- a/packages/icons/src/icon-review-not-available-32.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/icons/src/icon-security-32.svg b/packages/icons/src/icon-security-32.svg deleted file mode 100644 index 081205388..000000000 --- a/packages/icons/src/icon-security-32.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/icons/src/icon-settings-24.svg b/packages/icons/src/icon-settings-24.svg new file mode 100644 index 000000000..d50640e55 --- /dev/null +++ b/packages/icons/src/icon-settings-24.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/icons/src/icon-settings-32.svg b/packages/icons/src/icon-settings-32.svg index 54347a9e0..7d3ae1126 100644 --- a/packages/icons/src/icon-settings-32.svg +++ b/packages/icons/src/icon-settings-32.svg @@ -1 +1,4 @@ - + + + + diff --git a/packages/icons/src/icon-share-32.svg b/packages/icons/src/icon-share-32.svg deleted file mode 100644 index 928ebd364..000000000 --- a/packages/icons/src/icon-share-32.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/icons/src/icon-signin-32.svg b/packages/icons/src/icon-signin-32.svg deleted file mode 100644 index 5e4d57680..000000000 --- a/packages/icons/src/icon-signin-32.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/icons/src/icon-signout-24.svg b/packages/icons/src/icon-signout-24.svg new file mode 100644 index 000000000..efa84eb9c --- /dev/null +++ b/packages/icons/src/icon-signout-24.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/icons/src/icon-signout-32.svg b/packages/icons/src/icon-signout-32.svg index 2460191af..b63147119 100644 --- a/packages/icons/src/icon-signout-32.svg +++ b/packages/icons/src/icon-signout-32.svg @@ -1 +1,4 @@ - \ No newline at end of file + + + + diff --git a/packages/icons/src/icon-slash-24.svg b/packages/icons/src/icon-slash-24.svg new file mode 100644 index 000000000..50830007e --- /dev/null +++ b/packages/icons/src/icon-slash-24.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/src/icon-slash-32.svg b/packages/icons/src/icon-slash-32.svg new file mode 100644 index 000000000..b0cb5892e --- /dev/null +++ b/packages/icons/src/icon-slash-32.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/src/icon-sort-24.svg b/packages/icons/src/icon-sort-24.svg new file mode 100644 index 000000000..60aebceef --- /dev/null +++ b/packages/icons/src/icon-sort-24.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/src/icon-sort-32.svg b/packages/icons/src/icon-sort-32.svg new file mode 100644 index 000000000..e9ba18477 --- /dev/null +++ b/packages/icons/src/icon-sort-32.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/src/icon-trash-24.svg b/packages/icons/src/icon-trash-24.svg new file mode 100644 index 000000000..64e684eae --- /dev/null +++ b/packages/icons/src/icon-trash-24.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/icons/src/icon-trash-32.svg b/packages/icons/src/icon-trash-32.svg new file mode 100644 index 000000000..73b1efe93 --- /dev/null +++ b/packages/icons/src/icon-trash-32.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/src/icon-trashbox-32.svg b/packages/icons/src/icon-trashbox-32.svg deleted file mode 100644 index 8b8ffd84e..000000000 --- a/packages/icons/src/icon-trashbox-32.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/icons/src/icon-upload-32.svg b/packages/icons/src/icon-upload-32.svg deleted file mode 100644 index c9546ef6e..000000000 --- a/packages/icons/src/icon-upload-32.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/icons/src/icon-user-32.svg b/packages/icons/src/icon-user-32.svg deleted file mode 100644 index cf2b9a899..000000000 --- a/packages/icons/src/icon-user-32.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/icons/src/icon-user-add-24.svg b/packages/icons/src/icon-user-add-24.svg new file mode 100644 index 000000000..eb408cf3f --- /dev/null +++ b/packages/icons/src/icon-user-add-24.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/src/icon-user-add-32.svg b/packages/icons/src/icon-user-add-32.svg new file mode 100644 index 000000000..932abfd81 --- /dev/null +++ b/packages/icons/src/icon-user-add-32.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/src/icon-user-remove-24.svg b/packages/icons/src/icon-user-remove-24.svg new file mode 100644 index 000000000..ffbd9d46f --- /dev/null +++ b/packages/icons/src/icon-user-remove-24.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/icons/src/icon-user-remove-32.svg b/packages/icons/src/icon-user-remove-32.svg new file mode 100644 index 000000000..50db6cb34 --- /dev/null +++ b/packages/icons/src/icon-user-remove-32.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/icons/src/icon-vertical-dots-24.svg b/packages/icons/src/icon-vertical-dots-24.svg new file mode 100644 index 000000000..13e00606c --- /dev/null +++ b/packages/icons/src/icon-vertical-dots-24.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/src/icon-vertical-dots-32.svg b/packages/icons/src/icon-vertical-dots-32.svg index 18da4532c..6a394834e 100644 --- a/packages/icons/src/icon-vertical-dots-32.svg +++ b/packages/icons/src/icon-vertical-dots-32.svg @@ -1 +1,3 @@ - + + + diff --git a/packages/icons/src/icon-video-24.svg b/packages/icons/src/icon-video-24.svg new file mode 100644 index 000000000..22ec7cc23 --- /dev/null +++ b/packages/icons/src/icon-video-24.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/icons/src/icon-video-32.svg b/packages/icons/src/icon-video-32.svg new file mode 100644 index 000000000..6817935c5 --- /dev/null +++ b/packages/icons/src/icon-video-32.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/icons/src/icon-video-file-32.svg b/packages/icons/src/icon-video-file-32.svg deleted file mode 100644 index 4fb3b9227..000000000 --- a/packages/icons/src/icon-video-file-32.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/icons/src/icon-view-32.svg b/packages/icons/src/icon-view-32.svg deleted file mode 100644 index d5f8ded38..000000000 --- a/packages/icons/src/icon-view-32.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/icons/src/icon-warning-24.svg b/packages/icons/src/icon-warning-24.svg new file mode 100644 index 000000000..a892ab000 --- /dev/null +++ b/packages/icons/src/icon-warning-24.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/icons/src/icon-warning-32.svg b/packages/icons/src/icon-warning-32.svg index 5e0b4edbf..ecfb2363d 100644 --- a/packages/icons/src/icon-warning-32.svg +++ b/packages/icons/src/icon-warning-32.svg @@ -1 +1,4 @@ - \ No newline at end of file + + + + diff --git a/packages/icons/src/icon-zip-24.svg b/packages/icons/src/icon-zip-24.svg new file mode 100644 index 000000000..7321c7ec8 --- /dev/null +++ b/packages/icons/src/icon-zip-24.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/icons/src/icon-zip-32.svg b/packages/icons/src/icon-zip-32.svg new file mode 100644 index 000000000..987f9ea96 --- /dev/null +++ b/packages/icons/src/icon-zip-32.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/icons/src/icon-zip-file-32.svg b/packages/icons/src/icon-zip-file-32.svg deleted file mode 100644 index 0f26e2a47..000000000 --- a/packages/icons/src/icon-zip-file-32.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/react-components/src/alert/docs/Alert.stories.mdx b/packages/react-components/src/alert/docs/Alert.stories.mdx index bfcddb847..65ae03771 100644 --- a/packages/react-components/src/alert/docs/Alert.stories.mdx +++ b/packages/react-components/src/alert/docs/Alert.stories.mdx @@ -3,7 +3,7 @@ import { ArgsTable, Meta, Story } from "@storybook/addon-docs/blocks"; import { Button } from "@react-components/button"; import { ComponentInfo, Preview, Tagline } from "@stories/components"; import { Content, InnerContent } from "@react-components/placeholders"; -import { MailIcon } from "@react-components/icons"; +import { EmailIcon } from "@react-components/icons"; import { Heading } from "@react-components/heading"; import { TextLink } from "@react-components/link"; @@ -41,7 +41,7 @@ An alert can have an [icon](?path=/docs/icon-gallery--page). - + Your email to booking@spacetravel.com has been sent! @@ -54,7 +54,7 @@ An alert can also accept rich content. - + booking@spacetravel.com Your email has been sent! Tracking info available here. @@ -70,7 +70,7 @@ An alert can accept an accept [button](?path=/docs/button--default-story). - + Your email to booking@spacetravel.com has been sent! @@ -84,7 +84,7 @@ An alert can be dismissible by specifying an `onDismiss` handler. {}}> - + Your email to booking@spacetravel.com has been sent! diff --git a/packages/react-components/src/alert/docs/ControlledAlert.sample.jsx b/packages/react-components/src/alert/docs/ControlledAlert.sample.jsx index d35ee821f..9e3eee94a 100644 --- a/packages/react-components/src/alert/docs/ControlledAlert.sample.jsx +++ b/packages/react-components/src/alert/docs/ControlledAlert.sample.jsx @@ -18,7 +18,7 @@ show={show} onDismiss={toggleAlert} > - + Your email to booking@spacetravel.com has been sent! diff --git a/packages/react-components/src/alert/src/Alert.css b/packages/react-components/src/alert/src/Alert.css index 8a1841136..4d359a38e 100644 --- a/packages/react-components/src/alert/src/Alert.css +++ b/packages/react-components/src/alert/src/Alert.css @@ -51,7 +51,7 @@ } .o-ui-alert-info .o-ui-alert-icon { - stroke: var(--o-ui-alias-icon-info-1); + fill: var(--o-ui-alias-icon-info-1); } /* TONE | POSITIVE */ @@ -61,7 +61,7 @@ } .o-ui-alert-positive .o-ui-alert-icon { - stroke: var(--o-ui-alias-icon-positive-2); + fill: var(--o-ui-alias-icon-positive-2); } /* TONE | WARNING */ @@ -71,7 +71,7 @@ } .o-ui-alert-warning .o-ui-alert-icon { - stroke: var(--o-ui-alias-icon-warning-2); + fill: var(--o-ui-alias-icon-warning-2); } /* TONE | CRITICAL */ @@ -81,5 +81,5 @@ } .o-ui-alert-critical .o-ui-alert-icon { - stroke: var(--o-ui-alias-icon-negative-2); + fill: var(--o-ui-alias-icon-negative-2); } diff --git a/packages/react-components/src/alert/src/Alert.tsx b/packages/react-components/src/alert/src/Alert.tsx index 59b1f7d41..bff2e60de 100644 --- a/packages/react-components/src/alert/src/Alert.tsx +++ b/packages/react-components/src/alert/src/Alert.tsx @@ -1,6 +1,6 @@ import "./Alert.css"; -import { CheckmarkIcon, InfoIcon, NotificationIcon, WarningIcon } from "../../icons"; +import { CheckIcon, InfoIcon, NotificationIcon, WarningIcon } from "../../icons"; import { ComponentProps, ElementType, ForwardedRef, ReactElement, ReactNode, SyntheticEvent, useMemo } from "react"; import { Content } from "../../placeholders"; import { CrossButton } from "../../button"; @@ -161,7 +161,7 @@ Alert.displayName = "Alert"; const variations: { tone: keyof typeof Role; icon: ReactElement }[] = [ { tone: "info", icon: }, - { tone: "positive", icon: }, + { tone: "positive", icon: }, { tone: "warning", icon: }, { tone: "critical", icon: } ]; diff --git a/packages/react-components/src/badge/docs/Badge.stories.mdx b/packages/react-components/src/badge/docs/Badge.stories.mdx index a2b43c92a..ea0157d29 100644 --- a/packages/react-components/src/badge/docs/Badge.stories.mdx +++ b/packages/react-components/src/badge/docs/Badge.stories.mdx @@ -1,6 +1,6 @@ import { ArgsTable, Meta, Story } from "@storybook/addon-docs/blocks"; import { Badge, InnerBadge } from "@react-components/badge"; -import { CheckCircleIcon, MailIcon } from "@react-components/icons"; +import { CheckCircleIcon, EmailIcon } from "@react-components/icons"; import { Circle } from "./Circle.jsx"; import { ComponentInfo, Preview, Tagline } from "@stories/components"; import { Inline } from "@react-components/layout"; @@ -61,7 +61,7 @@ A badge can be rendered as a dot. A single digit is supported. - + Notifications @@ -119,14 +119,14 @@ A badge can overlap over elements with different shape. 100 - + - + - + diff --git a/packages/react-components/src/badge/tests/chromatic/Badge.chroma.jsx b/packages/react-components/src/badge/tests/chromatic/Badge.chroma.jsx index 62cf63c49..534d28d24 100644 --- a/packages/react-components/src/badge/tests/chromatic/Badge.chroma.jsx +++ b/packages/react-components/src/badge/tests/chromatic/Badge.chroma.jsx @@ -1,5 +1,5 @@ import { Badge } from "@react-components/badge"; -import { CheckCircleIcon, MailIcon } from "@react-components/icons"; +import { CheckCircleIcon, EmailIcon } from "@react-components/icons"; import { Inline } from "@react-components/layout"; import { Text } from "@react-components/text"; import { storiesOfBuilder } from "@stories/utils"; @@ -38,7 +38,7 @@ function IconBadge({ children, ...rest }) { overlap="icon" > {children} - + ); } diff --git a/packages/react-components/src/button/docs/Button.stories.mdx b/packages/react-components/src/button/docs/Button.stories.mdx index ce8cbd461..79e63cc57 100644 --- a/packages/react-components/src/button/docs/Button.stories.mdx +++ b/packages/react-components/src/button/docs/Button.stories.mdx @@ -1,4 +1,4 @@ -import { AddIcon, CheckmarkIcon, LightbulbIcon } from "@react-components/icons"; +import { AddIcon, CheckIcon, LightbulbIcon } from "@react-components/icons"; import { ArgsTable, Meta, Story } from "@storybook/addon-docs/blocks"; import { Button, @@ -265,7 +265,7 @@ A toggle button content can be a single icon. An accessible name must be provide - + diff --git a/packages/react-components/src/button/src/Button.css b/packages/react-components/src/button/src/Button.css index 77210ceb0..c63bd2d75 100644 --- a/packages/react-components/src/button/src/Button.css +++ b/packages/react-components/src/button/src/Button.css @@ -561,7 +561,7 @@ a.o-ui-button { .o-ui-button-inherit-color.o-ui-button-solid .o-ui-button-start-icon, .o-ui-button-inherit-color.o-ui-button-solid .o-ui-button-end-icon { - stroke: var(--o-ui-global-white); + fill: var(--o-ui-global-white); opacity: .9; } diff --git a/packages/react-components/src/button/src/IconButton.css b/packages/react-components/src/button/src/IconButton.css index 824160878..df5d8edb2 100644 --- a/packages/react-components/src/button/src/IconButton.css +++ b/packages/react-components/src/button/src/IconButton.css @@ -62,12 +62,12 @@ /* INHERIT */ .o-ui-button-inherit.o-ui-button-solid .o-ui-button-icon { - stroke: var(--o-ui-global-white); + fill: var(--o-ui-global-white); opacity: .9; } .o-ui-icon-button .o-ui-button-icon, .o-ui-icon-button .o-ui-button-icon .o-ui-icon { color: inherit; - stroke: currentColor; + fill: currentColor; } diff --git a/packages/react-components/src/button/tests/chromatic/ToggleIconButton.chroma.jsx b/packages/react-components/src/button/tests/chromatic/ToggleIconButton.chroma.jsx index d870fe90f..86c9f3ec8 100644 --- a/packages/react-components/src/button/tests/chromatic/ToggleIconButton.chroma.jsx +++ b/packages/react-components/src/button/tests/chromatic/ToggleIconButton.chroma.jsx @@ -1,4 +1,4 @@ -import { CheckmarkIcon, CrossIcon } from "@react-components/icons"; +import { CheckIcon, CrossIcon } from "@react-components/icons"; import { Inline, Stack } from "@react-components/layout"; import { ToggleIconButton } from "@react-components/button"; import { storiesOfBuilder } from "@stories/utils"; @@ -13,75 +13,75 @@ stories() .add("default", () => - - + + - - - - - - + + + + + + ) .add("circular outline", () => - - + + - - - - - - + + + + + + ) .add("rounded outline", () => - - + + - - - - - - + + + + + + ) .add("checked", () => - - + + ) .add("render props", () => { - () => + () => } { - ({ isChecked }) => isChecked ? : + ({ isChecked }) => isChecked ? : } ) .add("styling", () => - - + + ); diff --git a/packages/react-components/src/checkbox/src/Checkbox.css b/packages/react-components/src/checkbox/src/Checkbox.css index 0664b6e55..8531793ae 100644 --- a/packages/react-components/src/checkbox/src/Checkbox.css +++ b/packages/react-components/src/checkbox/src/Checkbox.css @@ -53,7 +53,7 @@ left: 50%; width: var(--o-ui-global-scale-echo); height: var(--o-ui-global-scale-echo); - mask: url("~@orbit-ui/icons/dist/icon-checkmark-fill-24.svg") center center no-repeat; + mask: url("~@orbit-ui/icons/dist/icon-check-24.svg") center center no-repeat; mask-size: var(--o-ui-global-scale-echo) var(--o-ui-global-scale-echo); background-color: var(--o-ui-global-white); transform: translate(-50%, -50%) scale(0) rotate(2deg); @@ -62,7 +62,7 @@ } .o-ui-checkbox-checked .o-ui-checkbox-box:after { - mask: url("~@orbit-ui/icons/dist/icon-checkmark-fill-24.svg") center center no-repeat; + mask: url("~@orbit-ui/icons/dist/icon-check-24.svg") center center no-repeat; transform: translate(-50%, -50%) scale(1) rotate(2deg); } diff --git a/packages/react-components/src/checkbox/tests/chromatic/createCheckboxTestSuite.jsx b/packages/react-components/src/checkbox/tests/chromatic/createCheckboxTestSuite.jsx index 2c829a861..9e20419de 100644 --- a/packages/react-components/src/checkbox/tests/chromatic/createCheckboxTestSuite.jsx +++ b/packages/react-components/src/checkbox/tests/chromatic/createCheckboxTestSuite.jsx @@ -1,5 +1,5 @@ import { Counter } from "@react-components/counter"; -import { IconList, InfoIcon, MailIcon, WarningIcon } from "@react-components/icons"; +import { EmailIcon, IconList, InfoIcon, WarningIcon } from "@react-components/icons"; import { Inline, Stack } from "@react-components/layout"; import { Text } from "@react-components/text"; import { cloneElement } from "react"; @@ -19,24 +19,24 @@ export function createCheckboxTestSuite(element, stories) { Milky Way - + Milky Way - + Milky Way - + Milky Way - + @@ -53,12 +53,12 @@ export function createCheckboxTestSuite(element, stories) { Milky Way - + 60 Milky Way - + 60 @@ -72,24 +72,24 @@ export function createCheckboxTestSuite(element, stories) { - + - + - + - + - + @@ -103,11 +103,11 @@ export function createCheckboxTestSuite(element, stories) { - + 60 - + 60 @@ -122,12 +122,12 @@ export function createCheckboxTestSuite(element, stories) { Milky Way - + - + @@ -144,12 +144,12 @@ export function createCheckboxTestSuite(element, stories) { Milky Way - + 60 - + 60 @@ -164,7 +164,7 @@ export function createCheckboxTestSuite(element, stories) { Milky Way - + Milky Way @@ -206,7 +206,7 @@ export function createCheckboxTestSuite(element, stories) { PA-99-N2 event and possible exoplanet in galaxy - + diff --git a/packages/react-components/src/disclosure/src/DisclosureArrow.css b/packages/react-components/src/disclosure/src/DisclosureArrow.css index 754e8efdb..a87d39040 100644 --- a/packages/react-components/src/disclosure/src/DisclosureArrow.css +++ b/packages/react-components/src/disclosure/src/DisclosureArrow.css @@ -1,7 +1,7 @@ .o-ui-disclosure-arrow { flex-shrink: 0; transition: transform .15s linear; - stroke: currentColor; + fill: currentColor; } .o-ui-disclosure-arrow-up { diff --git a/packages/react-components/src/icons/docs/Icon.stories.mdx b/packages/react-components/src/icons/docs/Icon.stories.mdx index b0c7235ec..bf3c0699c 100644 --- a/packages/react-components/src/icons/docs/Icon.stories.mdx +++ b/packages/react-components/src/icons/docs/Icon.stories.mdx @@ -90,15 +90,15 @@ An icon can vary in size. ### Color -An icon color can be altered by specifying a stroke value with [Tachyons stroke classes](?path=/docs/materials-colors--page#tachyons): +An icon color can be altered by specifying a fill value with [Tachyons fill classes](?path=/docs/materials-colors--page#tachyons): - - - + + + @@ -110,9 +110,9 @@ If your color is dynamic, you can use the `style` prop and [Orbit UI color varia - - - + + + @@ -147,9 +147,9 @@ A multi variants icon support the same props as ``. - - - + + + diff --git a/packages/react-components/src/icons/src/Icon.css b/packages/react-components/src/icons/src/Icon.css index c9edc0ea1..1f11edec0 100644 --- a/packages/react-components/src/icons/src/Icon.css +++ b/packages/react-components/src/icons/src/Icon.css @@ -1,6 +1,6 @@ .o-ui-icon { display: block; - stroke: currentColor; + fill: currentColor; } /* SIZES */ diff --git a/packages/react-components/src/icons/src/index.ts b/packages/react-components/src/icons/src/index.ts index 35011c660..95266f1f7 100644 --- a/packages/react-components/src/icons/src/index.ts +++ b/packages/react-components/src/icons/src/index.ts @@ -1,5 +1,6 @@ import { ElementType } from "react"; import { createIcon } from "./Icon"; +import { createMultiVariantIcon } from "./MultiVariantIcon"; export * from "./Icon"; export * from "./MultiVariantIcon"; @@ -13,239 +14,242 @@ function createOrbitIcon(source: ElementType, displayName: string) { return Component; } -import { ReactComponent as InnerAddGuestIcon32 } from "@orbit-ui/icons/dist/icon-add-guest-32.svg"; +function createOrbitMultiVariantIcon(source24: ElementType, source32: ElementType, displayName: string) { + const Component = createMultiVariantIcon(source24, source32); + Component.displayName = displayName; + + return Component; +} + +import { ReactComponent as InnerAddIcon24 } from "@orbit-ui/icons/dist/icon-add-24.svg"; import { ReactComponent as InnerAddIcon32 } from "@orbit-ui/icons/dist/icon-add-32.svg"; -import { ReactComponent as InnerAddUserIcon32 } from "@orbit-ui/icons/dist/icon-add-user-32.svg"; -import { ReactComponent as InnerArrowDownIcon32 } from "@orbit-ui/icons/dist/icon-arrow-down-32.svg"; -import { ReactComponent as InnerArrowDownLeftIcon32 } from "@orbit-ui/icons/dist/icon-arrow-down-left-32.svg"; -import { ReactComponent as InnerArrowDownRightIcon32 } from "@orbit-ui/icons/dist/icon-arrow-down-right-32.svg"; +import { ReactComponent as InnerArrowIcon24 } from "@orbit-ui/icons/dist/icon-arrow-24.svg"; import { ReactComponent as InnerArrowIcon32 } from "@orbit-ui/icons/dist/icon-arrow-32.svg"; -import { ReactComponent as InnerArrowLeftIcon32 } from "@orbit-ui/icons/dist/icon-arrow-left-32.svg"; -import { ReactComponent as InnerArrowLineUpIcon32 } from "@orbit-ui/icons/dist/icon-arrow-line-up-32.svg"; -import { ReactComponent as InnerArrowRightIcon32 } from "@orbit-ui/icons/dist/icon-arrow-right-32.svg"; -import { ReactComponent as InnerArrowUpIcon32 } from "@orbit-ui/icons/dist/icon-arrow-up-32.svg"; -import { ReactComponent as InnerArrowUpLeftIcon32 } from "@orbit-ui/icons/dist/icon-arrow-up-left-32.svg"; -import { ReactComponent as InnerArrowUpRightIcon32 } from "@orbit-ui/icons/dist/icon-arrow-up-right-32.svg"; -import { ReactComponent as InnerArrowsUpDownIcon32 } from "@orbit-ui/icons/dist/icon-arrows-up-down-32.svg"; +import { ReactComponent as InnerCalendarIcon24 } from "@orbit-ui/icons/dist/icon-calendar-24.svg"; import { ReactComponent as InnerCalendarIcon32 } from "@orbit-ui/icons/dist/icon-calendar-32.svg"; -import { ReactComponent as InnerCalendarPresetIcon32 } from "@orbit-ui/icons/dist/icon-calendar-preset-32.svg"; -import { ReactComponent as InnerCaretDownIcon32 } from "@orbit-ui/icons/dist/icon-caret-down-32.svg"; +import { ReactComponent as InnerCaretIcon24 } from "@orbit-ui/icons/dist/icon-caret-24.svg"; import { ReactComponent as InnerCaretIcon32 } from "@orbit-ui/icons/dist/icon-caret-32.svg"; -import { ReactComponent as InnerCaretLeftIcon32 } from "@orbit-ui/icons/dist/icon-caret-left-32.svg"; -import { ReactComponent as InnerCaretRightIcon32 } from "@orbit-ui/icons/dist/icon-caret-right-32.svg"; -import { ReactComponent as InnerCaretUpDownIcon32 } from "@orbit-ui/icons/dist/icon-caret-up-down-32.svg"; -import { ReactComponent as InnerCaretUpIcon32 } from "@orbit-ui/icons/dist/icon-caret-up-32.svg"; +import { ReactComponent as InnerCheckCircleIcon24 } from "@orbit-ui/icons/dist/icon-check-circle-24.svg"; import { ReactComponent as InnerCheckCircleIcon32 } from "@orbit-ui/icons/dist/icon-check-circle-32.svg"; -import { ReactComponent as InnerCheckmarkFillIcon24 } from "@orbit-ui/icons/dist/icon-checkmark-fill-24.svg"; -import { ReactComponent as InnerCheckmarkIcon32 } from "@orbit-ui/icons/dist/icon-checkmark-32.svg"; -import { ReactComponent as InnerChevronDownIcon32 } from "@orbit-ui/icons/dist/icon-chevron-down-32.svg"; +import { ReactComponent as InnerCheckIcon24 } from "@orbit-ui/icons/dist/icon-check-24.svg"; +import { ReactComponent as InnerCheckIcon32 } from "@orbit-ui/icons/dist/icon-check-32.svg"; +import { ReactComponent as InnerChevronIcon24 } from "@orbit-ui/icons/dist/icon-chevron-24.svg"; import { ReactComponent as InnerChevronIcon32 } from "@orbit-ui/icons/dist/icon-chevron-32.svg"; -import { ReactComponent as InnerChevronLeftIcon32 } from "@orbit-ui/icons/dist/icon-chevron-left-32.svg"; -import { ReactComponent as InnerChevronRightIcon32 } from "@orbit-ui/icons/dist/icon-chevron-right-32.svg"; -import { ReactComponent as InnerChevronUpDownIcon32 } from "@orbit-ui/icons/dist/icon-chevron-up-down-32.svg"; -import { ReactComponent as InnerChevronUpIcon32 } from "@orbit-ui/icons/dist/icon-chevron-up-32.svg"; +import { ReactComponent as InnerClearFilterIcon24 } from "@orbit-ui/icons/dist/icon-clear-filter-24.svg"; import { ReactComponent as InnerClearFilterIcon32 } from "@orbit-ui/icons/dist/icon-clear-filter-32.svg"; -import { ReactComponent as InnerCloseIcon32 } from "@orbit-ui/icons/dist/icon-close-32.svg"; +import { ReactComponent as InnerCrossIcon24 } from "@orbit-ui/icons/dist/icon-cross-24.svg"; import { ReactComponent as InnerCrossIcon32 } from "@orbit-ui/icons/dist/icon-cross-32.svg"; -import { ReactComponent as InnerCsvFileIcon32 } from "@orbit-ui/icons/dist/icon-csv-file-32.svg"; -import { ReactComponent as InnerDeleteLinkIcon32 } from "@orbit-ui/icons/dist/icon-delete-link-32.svg"; -import { ReactComponent as InnerDoNotDisturbIcon32 } from "@orbit-ui/icons/dist/icon-do-not-disturb-32.svg"; +import { ReactComponent as InnerCsvIcon24 } from "@orbit-ui/icons/dist/icon-csv-24.svg"; +import { ReactComponent as InnerCsvIcon32 } from "@orbit-ui/icons/dist/icon-csv-32.svg"; +import { ReactComponent as InnerDashIcon24 } from "@orbit-ui/icons/dist/icon-dash-24.svg"; +import { ReactComponent as InnerDashIcon32 } from "@orbit-ui/icons/dist/icon-dash-32.svg"; +import { ReactComponent as InnerDownloadIcon24 } from "@orbit-ui/icons/dist/icon-download-24.svg"; import { ReactComponent as InnerDownloadIcon32 } from "@orbit-ui/icons/dist/icon-download-32.svg"; +import { ReactComponent as InnerEditIcon24 } from "@orbit-ui/icons/dist/icon-edit-24.svg"; import { ReactComponent as InnerEditIcon32 } from "@orbit-ui/icons/dist/icon-edit-32.svg"; +import { ReactComponent as InnerEmailIcon24 } from "@orbit-ui/icons/dist/icon-email-24.svg"; +import { ReactComponent as InnerEmailIcon32 } from "@orbit-ui/icons/dist/icon-email-32.svg"; +import { ReactComponent as InnerEmailReminderIcon24 } from "@orbit-ui/icons/dist/icon-email-reminder-24.svg"; +import { ReactComponent as InnerEmailReminderIcon32 } from "@orbit-ui/icons/dist/icon-email-reminder-32.svg"; +import { ReactComponent as InnerEyeIcon24 } from "@orbit-ui/icons/dist/icon-eye-24.svg"; +import { ReactComponent as InnerEyeIcon32 } from "@orbit-ui/icons/dist/icon-eye-32.svg"; +import { ReactComponent as InnerFileIcon24 } from "@orbit-ui/icons/dist/icon-file-24.svg"; import { ReactComponent as InnerFileIcon32 } from "@orbit-ui/icons/dist/icon-file-32.svg"; +import { ReactComponent as InnerFilterIcon24 } from "@orbit-ui/icons/dist/icon-filter-24.svg"; import { ReactComponent as InnerFilterIcon32 } from "@orbit-ui/icons/dist/icon-filter-32.svg"; +import { ReactComponent as InnerFlagIcon24 } from "@orbit-ui/icons/dist/icon-flag-24.svg"; import { ReactComponent as InnerFlagIcon32 } from "@orbit-ui/icons/dist/icon-flag-32.svg"; +import { ReactComponent as InnerFolderIcon24 } from "@orbit-ui/icons/dist/icon-folder-24.svg"; import { ReactComponent as InnerFolderIcon32 } from "@orbit-ui/icons/dist/icon-folder-32.svg"; +import { ReactComponent as InnerGearIcon24 } from "@orbit-ui/icons/dist/icon-gear-24.svg"; import { ReactComponent as InnerGearIcon32 } from "@orbit-ui/icons/dist/icon-gear-32.svg"; +import { ReactComponent as InnerGroupIcon24 } from "@orbit-ui/icons/dist/icon-group-24.svg"; import { ReactComponent as InnerGroupIcon32 } from "@orbit-ui/icons/dist/icon-group-32.svg"; -import { ReactComponent as InnerGroupSettingIcon32 } from "@orbit-ui/icons/dist/icon-group-setting-32.svg"; -import { ReactComponent as InnerGuestIcon32 } from "@orbit-ui/icons/dist/icon-guest-32.svg"; +import { ReactComponent as InnerGuestAddIcon24 } from "@orbit-ui/icons/dist/icon-guest-add-24.svg"; +import { ReactComponent as InnerGuestAddIcon32 } from "@orbit-ui/icons/dist/icon-guest-add-32.svg"; +import { ReactComponent as InnerGuestRemoveIcon24 } from "@orbit-ui/icons/dist/icon-guest-remove-24.svg"; +import { ReactComponent as InnerGuestRemoveIcon32 } from "@orbit-ui/icons/dist/icon-guest-remove-32.svg"; +import { ReactComponent as InnerHelpIcon24 } from "@orbit-ui/icons/dist/icon-help-24.svg"; import { ReactComponent as InnerHelpIcon32 } from "@orbit-ui/icons/dist/icon-help-32.svg"; +import { ReactComponent as InnerHorizontalDotsIcon24 } from "@orbit-ui/icons/dist/icon-horizontal-dots-24.svg"; import { ReactComponent as InnerHorizontalDotsIcon32 } from "@orbit-ui/icons/dist/icon-horizontal-dots-32.svg"; +import { ReactComponent as InnerImageIcon24 } from "@orbit-ui/icons/dist/icon-image-24.svg"; +import { ReactComponent as InnerImageIcon32 } from "@orbit-ui/icons/dist/icon-image-32.svg"; +import { ReactComponent as InnerInfoIcon24 } from "@orbit-ui/icons/dist/icon-info-24.svg"; import { ReactComponent as InnerInfoIcon32 } from "@orbit-ui/icons/dist/icon-info-32.svg"; -import { ReactComponent as InnerKeyIcon32 } from "@orbit-ui/icons/dist/icon-key-32.svg"; +import { ReactComponent as InnerLightbulbIcon24 } from "@orbit-ui/icons/dist/icon-lightbulb-24.svg"; import { ReactComponent as InnerLightbulbIcon32 } from "@orbit-ui/icons/dist/icon-lightbulb-32.svg"; -import { ReactComponent as InnerLinkIcon32 } from "@orbit-ui/icons/dist/icon-link-32.svg"; +import { ReactComponent as InnerMagnifierIcon24 } from "@orbit-ui/icons/dist/icon-magnifier-24.svg"; import { ReactComponent as InnerMagnifierIcon32 } from "@orbit-ui/icons/dist/icon-magnifier-32.svg"; -import { ReactComponent as InnerMailIcon32 } from "@orbit-ui/icons/dist/icon-mail-32.svg"; -import { ReactComponent as InnerMusicFileIcon32 } from "@orbit-ui/icons/dist/icon-music-file-32.svg"; -import { ReactComponent as InnerNoGuestIcon32 } from "@orbit-ui/icons/dist/icon-no-guest-32.svg"; +import { ReactComponent as InnerMusicIcon24 } from "@orbit-ui/icons/dist/icon-music-24.svg"; +import { ReactComponent as InnerMusicIcon32 } from "@orbit-ui/icons/dist/icon-music-32.svg"; +import { ReactComponent as InnerNotificationIcon24 } from "@orbit-ui/icons/dist/icon-notification-24.svg"; import { ReactComponent as InnerNotificationIcon32 } from "@orbit-ui/icons/dist/icon-notification-32.svg"; -import { ReactComponent as InnerPdfFileIcon32 } from "@orbit-ui/icons/dist/icon-pdf-file-32.svg"; -import { ReactComponent as InnerPictureIcon32 } from "@orbit-ui/icons/dist/icon-picture-32.svg"; +import { ReactComponent as InnerNotificationOffIcon24 } from "@orbit-ui/icons/dist/icon-notification-off-24.svg"; +import { ReactComponent as InnerNotificationOffIcon32 } from "@orbit-ui/icons/dist/icon-notification-off-32.svg"; +import { ReactComponent as InnerPdfIcon24 } from "@orbit-ui/icons/dist/icon-pdf-24.svg"; +import { ReactComponent as InnerPdfIcon32 } from "@orbit-ui/icons/dist/icon-pdf-32.svg"; +import { ReactComponent as InnerPrinterIcon24 } from "@orbit-ui/icons/dist/icon-printer-24.svg"; import { ReactComponent as InnerPrinterIcon32 } from "@orbit-ui/icons/dist/icon-printer-32.svg"; +import { ReactComponent as InnerPrivacyIcon24 } from "@orbit-ui/icons/dist/icon-privacy-24.svg"; import { ReactComponent as InnerPrivacyIcon32 } from "@orbit-ui/icons/dist/icon-privacy-32.svg"; -import { ReactComponent as InnerPrivateGroupIcon32 } from "@orbit-ui/icons/dist/icon-private-group-32.svg"; -import { ReactComponent as InnerPublicGroupIcon32 } from "@orbit-ui/icons/dist/icon-public-group-32.svg"; -import { ReactComponent as InnerRemoveGuestIcon32 } from "@orbit-ui/icons/dist/icon-remove-guest-32.svg"; -import { ReactComponent as InnerRemoveUserIcon32 } from "@orbit-ui/icons/dist/icon-remove-user-32.svg"; -import { ReactComponent as InnerSecurityIcon32 } from "@orbit-ui/icons/dist/icon-security-32.svg"; -import { ReactComponent as InnerSettingsIcon32 } from "@orbit-ui/icons/dist/icon-settings-32.svg"; -import { ReactComponent as InnerShareIcon32 } from "@orbit-ui/icons/dist/icon-share-32.svg"; -import { ReactComponent as InnerSigninIcon32 } from "@orbit-ui/icons/dist/icon-signin-32.svg"; +import { ReactComponent as InnerSignoutIcon24 } from "@orbit-ui/icons/dist/icon-signout-24.svg"; import { ReactComponent as InnerSignoutIcon32 } from "@orbit-ui/icons/dist/icon-signout-32.svg"; -import { ReactComponent as InnerTrashboxIcon32 } from "@orbit-ui/icons/dist/icon-trashbox-32.svg"; -import { ReactComponent as InnerUploadIcon32 } from "@orbit-ui/icons/dist/icon-upload-32.svg"; -import { ReactComponent as InnerUserIcon32 } from "@orbit-ui/icons/dist/icon-user-32.svg"; +import { ReactComponent as InnerSlashIcon24 } from "@orbit-ui/icons/dist/icon-slash-24.svg"; +import { ReactComponent as InnerSlashIcon32 } from "@orbit-ui/icons/dist/icon-slash-32.svg"; +import { ReactComponent as InnerSortIcon24 } from "@orbit-ui/icons/dist/icon-sort-24.svg"; +import { ReactComponent as InnerSortIcon32 } from "@orbit-ui/icons/dist/icon-sort-32.svg"; +import { ReactComponent as InnerTrashIcon24 } from "@orbit-ui/icons/dist/icon-trash-24.svg"; +import { ReactComponent as InnerTrashIcon32 } from "@orbit-ui/icons/dist/icon-trash-32.svg"; +import { ReactComponent as InnerUserAddIcon24 } from "@orbit-ui/icons/dist/icon-user-add-24.svg"; +import { ReactComponent as InnerUserAddIcon32 } from "@orbit-ui/icons/dist/icon-user-add-32.svg"; +import { ReactComponent as InnerUserRemoveIcon24 } from "@orbit-ui/icons/dist/icon-user-remove-24.svg"; +import { ReactComponent as InnerUserRemoveIcon32 } from "@orbit-ui/icons/dist/icon-user-remove-32.svg"; +import { ReactComponent as InnerVerticalDotsIcon24 } from "@orbit-ui/icons/dist/icon-vertical-dots-24.svg"; import { ReactComponent as InnerVerticalDotsIcon32 } from "@orbit-ui/icons/dist/icon-vertical-dots-32.svg"; -import { ReactComponent as InnerVideoFileIcon32 } from "@orbit-ui/icons/dist/icon-video-file-32.svg"; -import { ReactComponent as InnerViewIcon32 } from "@orbit-ui/icons/dist/icon-view-32.svg"; +import { ReactComponent as InnerVideoIcon24 } from "@orbit-ui/icons/dist/icon-video-24.svg"; +import { ReactComponent as InnerVideoIcon32 } from "@orbit-ui/icons/dist/icon-video-32.svg"; +import { ReactComponent as InnerWarningIcon24 } from "@orbit-ui/icons/dist/icon-warning-24.svg"; import { ReactComponent as InnerWarningIcon32 } from "@orbit-ui/icons/dist/icon-warning-32.svg"; +import { ReactComponent as InnerZipIcon24 } from "@orbit-ui/icons/dist/icon-zip-24.svg"; +import { ReactComponent as InnerZipIcon32 } from "@orbit-ui/icons/dist/icon-zip-32.svg"; +export const AddIcon24 = createOrbitIcon(InnerAddIcon24, "AddIcon24"); export const AddIcon32 = createOrbitIcon(InnerAddIcon32, "AddIcon32"); -export const AddGuestIcon32 = createOrbitIcon(InnerAddGuestIcon32, "AddGuestIcon32"); -export const AddUserIcon32 = createOrbitIcon(InnerAddUserIcon32, "AddUserIcon32"); +export const ArrowIcon24 = createOrbitIcon(InnerArrowIcon24, "ArrowIcon24"); export const ArrowIcon32 = createOrbitIcon(InnerArrowIcon32, "ArrowIcon32"); -export const ArrowDownIcon32 = createOrbitIcon(InnerArrowDownIcon32, "ArrowDownIcon32"); -export const ArrowDownLeftIcon32 = createOrbitIcon(InnerArrowDownLeftIcon32, "ArrowDownLeftIcon32"); -export const ArrowDownRightIcon32 = createOrbitIcon(InnerArrowDownRightIcon32, "ArrowDownRightIcon32"); -export const ArrowUpLeftIcon32 = createOrbitIcon(InnerArrowUpLeftIcon32, "ArrowUpLeftIcon32"); -export const ArrowUpRightIcon32 = createOrbitIcon(InnerArrowUpRightIcon32, "ArrowUpRightIcon32"); -export const ArrowLeftIcon32 = createOrbitIcon(InnerArrowLeftIcon32, "ArrowLeftIcon32"); -export const ArrowLineUpIcon32 = createOrbitIcon(InnerArrowLineUpIcon32, "ArrowLineUpIcon32"); -export const ArrowRightIcon32 = createOrbitIcon(InnerArrowRightIcon32, "ArrowRightIcon32"); -export const ArrowUpIcon32 = createOrbitIcon(InnerArrowUpIcon32, "ArrowUpIcon32"); -export const ArrowsUpDownIcon32 = createOrbitIcon(InnerArrowsUpDownIcon32, "ArrowsUpDownIcon32"); +export const CalendarIcon24 = createOrbitIcon(InnerCalendarIcon24, "CalendarIcon24"); export const CalendarIcon32 = createOrbitIcon(InnerCalendarIcon32, "CalendarIcon32"); -export const CalendarPresetIcon32 = createOrbitIcon(InnerCalendarPresetIcon32, "CalendarPresetIcon32"); +export const CaretIcon24 = createOrbitIcon(InnerCaretIcon24, "CaretIcon24"); export const CaretIcon32 = createOrbitIcon(InnerCaretIcon32, "CaretIcon32"); -export const CaretDownIcon32 = createOrbitIcon(InnerCaretDownIcon32, "CaretDownIcon32"); -export const CaretLeftIcon32 = createOrbitIcon(InnerCaretLeftIcon32, "CaretLeftIcon32"); -export const CaretRightIcon32 = createOrbitIcon(InnerCaretRightIcon32, "CaretRightIcon32"); -export const CaretUpIcon32 = createOrbitIcon(InnerCaretUpIcon32, "CaretUpIcon32"); -export const CaretUpDownIcon32 = createOrbitIcon(InnerCaretUpDownIcon32, "CaretUpDownIcon32"); +export const CheckIcon24 = createOrbitIcon(InnerCheckIcon24, "CheckIcon24"); +export const CheckIcon32 = createOrbitIcon(InnerCheckIcon32, "CheckIcon32"); +export const CheckCircleIcon24 = createOrbitIcon(InnerCheckCircleIcon24, "CheckCircleIcon24"); export const CheckCircleIcon32 = createOrbitIcon(InnerCheckCircleIcon32, "CheckCircleIcon32"); -export const CheckmarkIcon32 = createOrbitIcon(InnerCheckmarkIcon32, "CheckmarkIcon32"); -export const CheckmarkFillIcon32 = createOrbitIcon(InnerCheckmarkIcon32, "CheckmarkFillIcon24"); +export const ChevronIcon24 = createOrbitIcon(InnerChevronIcon24, "ChevronIcon24"); export const ChevronIcon32 = createOrbitIcon(InnerChevronIcon32, "ChevronIcon32"); -export const ChevronUpIcon32 = createOrbitIcon(InnerChevronUpIcon32, "ChevronUpIcon32"); -export const ChevronDownIcon32 = createOrbitIcon(InnerChevronDownIcon32, "ChevronDownIcon32"); -export const ChevronUpDownIcon32 = createOrbitIcon(InnerChevronUpDownIcon32, "ChevronUpDownIcon32"); -export const ChevronLeftIcon32 = createOrbitIcon(InnerChevronLeftIcon32, "ChevronLeftIcon32"); -export const ChevronRightIcon32 = createOrbitIcon(InnerChevronRightIcon32, "ChevronRightIcon32"); +export const ClearFilterIcon24 = createOrbitIcon(InnerClearFilterIcon24, "ClearFilterIcon24"); export const ClearFilterIcon32 = createOrbitIcon(InnerClearFilterIcon32, "ClearFilterIcon32"); -export const CloseIcon32 = createOrbitIcon(InnerCloseIcon32, "CloseIcon32"); +export const CrossIcon24 = createOrbitIcon(InnerCrossIcon24, "CrossIcon24"); export const CrossIcon32 = createOrbitIcon(InnerCrossIcon32, "CrossIcon32"); -export const CsvFileIcon32 = createOrbitIcon(InnerCsvFileIcon32, "CsvFileIcon32"); -export const DeleteLinkIcon32 = createOrbitIcon(InnerDeleteLinkIcon32, "DeleteLinkIcon32"); -export const DoNotDisturbIcon32 = createOrbitIcon(InnerDoNotDisturbIcon32, "DoNotDisturbIcon32"); +export const CsvIcon24 = createOrbitIcon(InnerCsvIcon24, "CsvIcon24"); +export const CsvIcon32 = createOrbitIcon(InnerCsvIcon32, "CsvIcon32"); +export const DashIcon24 = createOrbitIcon(InnerDashIcon24, "DashIcon24"); +export const DashIcon32 = createOrbitIcon(InnerDashIcon32, "DashIcon32"); +export const DownloadIcon24 = createOrbitIcon(InnerDownloadIcon24, "DownloadIcon24"); export const DownloadIcon32 = createOrbitIcon(InnerDownloadIcon32, "DownloadIcon32"); +export const EditIcon24 = createOrbitIcon(InnerEditIcon24, "EditIcon24"); export const EditIcon32 = createOrbitIcon(InnerEditIcon32, "EditIcon32"); +export const EmailIcon24 = createOrbitIcon(InnerEmailIcon24, "EmailIcon24"); +export const EmailIcon32 = createOrbitIcon(InnerEmailIcon32, "EmailIcon32"); +export const EmailReminderIcon24 = createOrbitIcon(InnerEmailReminderIcon24, "EmailReminderIcon24"); +export const EmailReminderIcon32 = createOrbitIcon(InnerEmailReminderIcon32, "EmailReminderIcon32"); +export const EyeIcon24 = createOrbitIcon(InnerEyeIcon24, "EyeIcon24"); +export const EyeIcon32 = createOrbitIcon(InnerEyeIcon32, "EyeIcon32"); +export const FileIcon24 = createOrbitIcon(InnerFileIcon24, "FileIcon24"); export const FileIcon32 = createOrbitIcon(InnerFileIcon32, "FileIcon32"); +export const FilterIcon24 = createOrbitIcon(InnerFilterIcon24, "FilterIcon24"); export const FilterIcon32 = createOrbitIcon(InnerFilterIcon32, "FilterIcon32"); +export const FlagIcon24 = createOrbitIcon(InnerFlagIcon24, "FlagIcon24"); export const FlagIcon32 = createOrbitIcon(InnerFlagIcon32, "FlagIcon32"); +export const FolderIcon24 = createOrbitIcon(InnerFolderIcon24, "FolderIcon24"); export const FolderIcon32 = createOrbitIcon(InnerFolderIcon32, "FolderIcon32"); +export const GearIcon24 = createOrbitIcon(InnerGearIcon24, "GearIcon24"); export const GearIcon32 = createOrbitIcon(InnerGearIcon32, "GearIcon32"); +export const GroupIcon24 = createOrbitIcon(InnerGroupIcon24, "GroupIcon24"); export const GroupIcon32 = createOrbitIcon(InnerGroupIcon32, "GroupIcon32"); -export const GroupSettingIcon32 = createOrbitIcon(InnerGroupSettingIcon32, "GroupSettingIcon32"); -export const GuestIcon32 = createOrbitIcon(InnerGuestIcon32, "GuestIcon32"); +export const GuestAddIcon24 = createOrbitIcon(InnerGuestAddIcon24, "GuestAddIcon24"); +export const GuestAddIcon32 = createOrbitIcon(InnerGuestAddIcon32, "GuestAddIcon32"); +export const GuestRemoveIcon24 = createOrbitIcon(InnerGuestRemoveIcon24, "GuestRemoveIcon24"); +export const GuestRemoveIcon32 = createOrbitIcon(InnerGuestRemoveIcon32, "GuestRemoveIcon32"); +export const HelpIcon24 = createOrbitIcon(InnerHelpIcon24, "HelpIcon24"); export const HelpIcon32 = createOrbitIcon(InnerHelpIcon32, "HelpIcon32"); +export const HorizontalDotsIcon24 = createOrbitIcon(InnerHorizontalDotsIcon24, "HorizontalDotsIcon24"); export const HorizontalDotsIcon32 = createOrbitIcon(InnerHorizontalDotsIcon32, "HorizontalDotsIcon32"); +export const ImageIcon24 = createOrbitIcon(InnerImageIcon24, "ImageIcon24"); +export const ImageIcon32 = createOrbitIcon(InnerImageIcon32, "ImageIcon32"); +export const InfoIcon24 = createOrbitIcon(InnerInfoIcon24, "InfoIcon24"); export const InfoIcon32 = createOrbitIcon(InnerInfoIcon32, "InfoIcon32"); -export const KeyIcon32 = createOrbitIcon(InnerKeyIcon32, "KeyIcon32"); +export const LightbulbIcon24 = createOrbitIcon(InnerLightbulbIcon24, "LightbulbIcon24"); export const LightbulbIcon32 = createOrbitIcon(InnerLightbulbIcon32, "LightbulbIcon32"); -export const LinkIcon32 = createOrbitIcon(InnerLinkIcon32, "LinkIcon32"); +export const MagnifierIcon24 = createOrbitIcon(InnerMagnifierIcon24, "MagnifierIcon24"); export const MagnifierIcon32 = createOrbitIcon(InnerMagnifierIcon32, "MagnifierIcon32"); -export const MailIcon32 = createOrbitIcon(InnerMailIcon32, "MailIcon32"); -export const MusicFileIcon32 = createOrbitIcon(InnerMusicFileIcon32, "MusicFileIcon32"); -export const NoGuestIcon32 = createOrbitIcon(InnerNoGuestIcon32, "NoGuestIcon32"); +export const MusicIcon24 = createOrbitIcon(InnerMusicIcon24, "MusicIcon24"); +export const MusicIcon32 = createOrbitIcon(InnerMusicIcon32, "MusicIcon32"); +export const NotificationIcon24 = createOrbitIcon(InnerNotificationIcon24, "NotificationIcon24"); export const NotificationIcon32 = createOrbitIcon(InnerNotificationIcon32, "NotificationIcon32"); -export const PdfFileIcon32 = createOrbitIcon(InnerPdfFileIcon32, "PdfFileIcon32"); -export const PictureIcon32 = createOrbitIcon(InnerPictureIcon32, "PictureIcon32"); +export const NotificationOffIcon24 = createOrbitIcon(InnerNotificationOffIcon24, "NotificationOffIcon24"); +export const NotificationOffIcon32 = createOrbitIcon(InnerNotificationOffIcon32, "NotificationOffIcon32"); +export const PdfIcon24 = createOrbitIcon(InnerPdfIcon24, "PdfIcon24"); +export const PdfIcon32 = createOrbitIcon(InnerPdfIcon32, "PdfIcon32"); +export const PrinterIcon24 = createOrbitIcon(InnerPrinterIcon24, "PrinterIcon24"); export const PrinterIcon32 = createOrbitIcon(InnerPrinterIcon32, "PrinterIcon32"); +export const PrivacyIcon24 = createOrbitIcon(InnerPrivacyIcon24, "PrivacyIcon24"); export const PrivacyIcon32 = createOrbitIcon(InnerPrivacyIcon32, "PrivacyIcon32"); -export const PrivateGroupIcon32 = createOrbitIcon(InnerPrivateGroupIcon32, "PrivateGroupIcon32"); -export const PublicGroupIcon32 = createOrbitIcon(InnerPublicGroupIcon32, "PublicGroupIcon32"); -export const RemoveGuestIcon32 = createOrbitIcon(InnerRemoveGuestIcon32, "RemoveGuestIcon32"); -export const RemoveUserIcon32 = createOrbitIcon(InnerRemoveUserIcon32, "RemoveUserIcon32"); -export const SecurityIcon32 = createOrbitIcon(InnerSecurityIcon32, "SecurityIcon32"); -export const SettingsIcon32 = createOrbitIcon(InnerSettingsIcon32, "SettingsIcon32"); -export const ShareIcon32 = createOrbitIcon(InnerShareIcon32, "ShareIcon32"); -export const SigninIcon32 = createOrbitIcon(InnerSigninIcon32, "SigninIcon32"); +export const SignoutIcon24 = createOrbitIcon(InnerSignoutIcon24, "SignoutIcon24"); export const SignoutIcon32 = createOrbitIcon(InnerSignoutIcon32, "SignoutIcon32"); -export const TrashboxIcon32 = createOrbitIcon(InnerTrashboxIcon32, "TrashboxIcon32"); -export const UserIcon32 = createOrbitIcon(InnerUserIcon32, "UserIcon32"); -export const UploadIcon32 = createOrbitIcon(InnerUploadIcon32, "UploadIcon32"); -export const VerticalDotsIcon32 = createOrbitIcon(InnerVerticalDotsIcon32, "VerticalDotseIcon32"); -export const VideoFileIcon32 = createOrbitIcon(InnerVideoFileIcon32, "VideoFileIcon32"); -export const ViewIcon32 = createOrbitIcon(InnerViewIcon32, "ViewIcon32"); +export const SortIcon24 = createOrbitIcon(InnerSortIcon24, "SortIcon24"); +export const SortIcon32 = createOrbitIcon(InnerSortIcon32, "SortIcon32"); +export const SlashIcon24 = createOrbitIcon(InnerSlashIcon24, "SlashIcon24"); +export const SlashIcon32 = createOrbitIcon(InnerSlashIcon32, "SlashIcon32"); +export const TrashIcon24 = createOrbitIcon(InnerTrashIcon24, "TrashIcon24"); +export const TrashIcon32 = createOrbitIcon(InnerTrashIcon32, "TrashIcon32"); +export const UserAddIcon24 = createOrbitIcon(InnerUserAddIcon24, "UserAddIcon24"); +export const UserAddIcon32 = createOrbitIcon(InnerUserAddIcon32, "UserAddIcon32"); +export const UserRemoveIcon24 = createOrbitIcon(InnerUserRemoveIcon24, "UserRemoveIcon24"); +export const UserRemoveIcon32 = createOrbitIcon(InnerUserRemoveIcon32, "UserRemoveIcon32"); +export const VerticalDotsIcon24 = createOrbitIcon(InnerVerticalDotsIcon24, "VerticalDotsIcon24"); +export const VerticalDotsIcon32 = createOrbitIcon(InnerVerticalDotsIcon32, "VerticalDotsIcon32"); +export const VideoIcon24 = createOrbitIcon(InnerVideoIcon24, "VideoIcon24"); +export const VideoIcon32 = createOrbitIcon(InnerVideoIcon32, "VideoIcon32"); +export const WarningIcon24 = createOrbitIcon(InnerWarningIcon24, "WarningIcon24"); export const WarningIcon32 = createOrbitIcon(InnerWarningIcon32, "WarningIcon32"); +export const ZipIcon24 = createOrbitIcon(InnerZipIcon24, "ZipIcon24"); +export const ZipIcon32 = createOrbitIcon(InnerZipIcon32, "ZipIcon32"); -export const AddIcon = createOrbitIcon(InnerAddIcon32, "AddIcon"); -export const AddGuestIcon = createOrbitIcon(InnerAddGuestIcon32, "AddGuestIcon"); -export const AddUserIcon = createOrbitIcon(InnerAddUserIcon32, "AddUserIcon"); -export const ArrowIcon = createOrbitIcon(InnerArrowIcon32, "ArrowIcon"); -export const ArrowDownIcon = createOrbitIcon(InnerArrowDownIcon32, "ArrowDownIcon"); -export const ArrowDownLeftIcon = createOrbitIcon(InnerArrowDownLeftIcon32, "ArrowDownLeftIcon"); -export const ArrowDownRightIcon = createOrbitIcon(InnerArrowDownRightIcon32, "ArrowDownRightIcon"); -export const ArrowUpLeftIcon = createOrbitIcon(InnerArrowUpLeftIcon32, "ArrowUpLeftIcon"); -export const ArrowUpRightIcon = createOrbitIcon(InnerArrowUpRightIcon32, "ArrowUpRightIcon"); -export const ArrowLeftIcon = createOrbitIcon(InnerArrowLeftIcon32, "ArrowLeftIcon"); -export const ArrowLineUpIcon = createOrbitIcon(InnerArrowLineUpIcon32, "ArrowLineUpIcon"); -export const ArrowRightIcon = createOrbitIcon(InnerArrowRightIcon32, "ArrowRightIcon"); -export const ArrowUpIcon = createOrbitIcon(InnerArrowUpIcon32, "ArrowUpIcon"); -export const ArrowsUpDownIcon = createOrbitIcon(InnerArrowsUpDownIcon32, "ArrowsUpDownIcon"); -export const CalendarIcon = createOrbitIcon(InnerCalendarIcon32, "CalendarIcon"); -export const CalendarPresetIcon = createOrbitIcon(InnerCalendarPresetIcon32, "CalendarPresetIcon"); -export const CaretIcon = createOrbitIcon(InnerCaretIcon32, "CaretIcon"); -export const CaretDownIcon = createOrbitIcon(InnerCaretDownIcon32, "CaretDownIcon"); -export const CaretLeftIcon = createOrbitIcon(InnerCaretLeftIcon32, "CaretLeftIcon"); -export const CaretRightIcon = createOrbitIcon(InnerCaretRightIcon32, "CaretRightIcon"); -export const CaretUpIcon = createOrbitIcon(InnerCaretUpIcon32, "CaretUpIcon"); -export const CaretUpDownIcon = createOrbitIcon(InnerCaretUpDownIcon32, "CaretUpDownIcon"); -export const CheckCircleIcon = createOrbitIcon(InnerCheckCircleIcon32, "CheckCircleIcon"); -export const CheckmarkIcon = createOrbitIcon(InnerCheckmarkIcon32, "CheckmarkIcon"); -export const CheckmarkFillIcon = createOrbitIcon(InnerCheckmarkFillIcon24, "CheckmarkFillIcon"); -export const ChevronIcon = createOrbitIcon(InnerChevronIcon32, "ChevronIcon"); -export const ChevronUpIcon = createOrbitIcon(InnerChevronUpIcon32, "ChevronUpIcon"); -export const ChevronDownIcon = createOrbitIcon(InnerChevronDownIcon32, "ChevronDownIcon"); -export const ChevronUpDownIcon = createOrbitIcon(InnerChevronUpDownIcon32, "ChevronUpDownIcon"); -export const ChevronLeftIcon = createOrbitIcon(InnerChevronLeftIcon32, "ChevronLeftIcon"); -export const ChevronRightIcon = createOrbitIcon(InnerChevronRightIcon32, "ChevronRightIcon"); -export const ClearFilterIcon = createOrbitIcon(InnerClearFilterIcon32, "ClearFilterIcon"); -export const CloseIcon = createOrbitIcon(InnerCloseIcon32, "CloseIcon"); -export const CrossIcon = createOrbitIcon(InnerCrossIcon32, "CrossIcon"); -export const CsvFileIcon = createOrbitIcon(InnerCsvFileIcon32, "CsvFileIcon"); -export const DeleteLinkIcon = createOrbitIcon(InnerDeleteLinkIcon32, "DeleteLinkIcon"); -export const DoNotDisturbIcon = createOrbitIcon(InnerDoNotDisturbIcon32, "DoNotDisturbIcon"); -export const DownloadIcon = createOrbitIcon(InnerDownloadIcon32, "DownloadIcon"); -export const EditIcon = createOrbitIcon(InnerEditIcon32, "EditIcon"); -export const FileIcon = createOrbitIcon(InnerFileIcon32, "FileIcon"); -export const FilterIcon = createOrbitIcon(InnerFilterIcon32, "FilterIcon"); -export const FlagIcon = createOrbitIcon(InnerFlagIcon32, "FlagIcon"); -export const FolderIcon = createOrbitIcon(InnerFolderIcon32, "FolderIcon"); -export const GearIcon = createOrbitIcon(InnerGearIcon32, "GearIcon"); -export const GroupIcon = createOrbitIcon(InnerGroupIcon32, "GroupIcon"); -export const GroupSettingIcon = createOrbitIcon(InnerGroupSettingIcon32, "GroupSettingIcon"); -export const GuestIcon = createOrbitIcon(InnerGuestIcon32, "GuestIcon"); -export const HorizontalDotsIcon = createOrbitIcon(InnerHorizontalDotsIcon32, "HorizontalDotsIcon"); -export const HelpIcon = createOrbitIcon(InnerHelpIcon32, "HelpIcon"); -export const InfoIcon = createOrbitIcon(InnerInfoIcon32, "InfoIcon"); -export const KeyIcon = createOrbitIcon(InnerKeyIcon32, "KeyIcon"); -export const LightbulbIcon = createOrbitIcon(InnerLightbulbIcon32, "LightbulbIcon"); -export const LinkIcon = createOrbitIcon(InnerLinkIcon32, "LinkIcon"); -export const MagnifierIcon = createOrbitIcon(InnerMagnifierIcon32, "MagnifierIcon"); -export const MailIcon = createOrbitIcon(InnerMailIcon32, "MailIcon"); -export const MusicFileIcon = createOrbitIcon(InnerMusicFileIcon32, "MusicFileIcon"); -export const NoGuestIcon = createOrbitIcon(InnerNoGuestIcon32, "NoGuestIcon"); -export const NotificationIcon = createOrbitIcon(InnerNotificationIcon32, "NotificationIcon"); -export const PdfFileIcon = createOrbitIcon(InnerPdfFileIcon32, "PdfFileIcon"); -export const PictureIcon = createOrbitIcon(InnerPictureIcon32, "PictureIcon"); -export const PrinterIcon = createOrbitIcon(InnerPrinterIcon32, "PrinterIcon"); -export const PrivacyIcon = createOrbitIcon(InnerPrivacyIcon32, "PrivacyIcon"); -export const PrivateGroupIcon = createOrbitIcon(InnerPrivateGroupIcon32, "PrivateGroupIcon"); -export const PublicGroupIcon = createOrbitIcon(InnerPublicGroupIcon32, "PublicGroupIcon"); -export const RemoveGuestIcon = createOrbitIcon(InnerRemoveGuestIcon32, "RemoveGuestIcon"); -export const RemoveUserIcon = createOrbitIcon(InnerRemoveUserIcon32, "RemoveUserIcon"); -export const SecurityIcon = createOrbitIcon(InnerSecurityIcon32, "SecurityIcon"); -export const SettingsIcon = createOrbitIcon(InnerSettingsIcon32, "SettingsIcon"); -export const ShareIcon = createOrbitIcon(InnerShareIcon32, "ShareIcon"); -export const SigninIcon = createOrbitIcon(InnerSigninIcon32, "SigninIcon"); -export const SignoutIcon = createOrbitIcon(InnerSignoutIcon32, "SignoutIcon"); -export const TrashboxIcon = createOrbitIcon(InnerTrashboxIcon32, "TrashboxIcon"); -export const UploadIcon = createOrbitIcon(InnerUploadIcon32, "UploadIcon"); -export const UserIcon = createOrbitIcon(InnerUserIcon32, "UserIcon"); -export const VerticalDotsIcon = createOrbitIcon(InnerVerticalDotsIcon32, "VerticalDotsIcon"); -export const VideoFileIcon = createOrbitIcon(InnerVideoFileIcon32, "VideoFileIcon"); -export const ViewIcon = createOrbitIcon(InnerViewIcon32, "ViewIcon"); -export const WarningIcon = createOrbitIcon(InnerWarningIcon32, "WarningIcon"); +export const AddIcon = createOrbitMultiVariantIcon(InnerAddIcon24, InnerAddIcon32, "AddIcon"); +export const ArrowIcon = createOrbitMultiVariantIcon(InnerArrowIcon24, InnerArrowIcon32, "ArrowIcon"); +export const CalendarIcon = createOrbitMultiVariantIcon(InnerCalendarIcon24, InnerCalendarIcon32, "CalendarIcon"); +export const CaretIcon = createOrbitMultiVariantIcon(InnerCaretIcon24, InnerCaretIcon32, "CaretIcon"); +export const CheckIcon = createOrbitMultiVariantIcon(InnerCheckIcon24, InnerCheckIcon32, "CheckIcon"); +export const CheckCircleIcon = createOrbitMultiVariantIcon(InnerCheckCircleIcon24, InnerCheckCircleIcon32, "CheckCircleIcon"); +export const ChevronIcon = createOrbitMultiVariantIcon(InnerChevronIcon24, InnerChevronIcon32, "ChevronIcon"); +export const ClearFilterIcon = createOrbitMultiVariantIcon(InnerClearFilterIcon24, InnerClearFilterIcon32, "ClearFilterIcon"); +export const CrossIcon = createOrbitMultiVariantIcon(InnerCrossIcon24, InnerCrossIcon32, "CrossIcon"); +export const CsvIcon = createOrbitMultiVariantIcon(InnerCsvIcon24, InnerCsvIcon32, "CsvIcon"); +export const DashIcon = createOrbitMultiVariantIcon(InnerDashIcon24, InnerDashIcon32, "DashIcon"); +export const DownloadIcon = createOrbitMultiVariantIcon(InnerDownloadIcon24, InnerDownloadIcon32, "DownloadIcon"); +export const EditIcon = createOrbitMultiVariantIcon(InnerEditIcon24, InnerEditIcon32, "EditIcon"); +export const EmailIcon = createOrbitMultiVariantIcon(InnerEmailIcon24, InnerEmailIcon32, "EmailIcon"); +export const EmailReminderIcon = createOrbitMultiVariantIcon(InnerEmailReminderIcon24, InnerEmailReminderIcon32, "EmailReminderIcon"); +export const EyeIcon = createOrbitMultiVariantIcon(InnerEyeIcon24, InnerEyeIcon32, "EyeIcon"); +export const FileIcon = createOrbitMultiVariantIcon(InnerFileIcon24, InnerFileIcon32, "FileIcon"); +export const FilterIcon = createOrbitMultiVariantIcon(InnerFilterIcon24, InnerFilterIcon32, "FilterIcon"); +export const FlagIcon = createOrbitMultiVariantIcon(InnerFlagIcon24, InnerFlagIcon32, "FlagIcon"); +export const FolderIcon = createOrbitMultiVariantIcon(InnerFolderIcon24, InnerFolderIcon32, "FolderIcon"); +export const GearIcon = createOrbitMultiVariantIcon(InnerGearIcon24, InnerGearIcon32, "GearIcon"); +export const GroupIcon = createOrbitMultiVariantIcon(InnerGroupIcon24, InnerGroupIcon32, "GroupIcon"); +export const GuestAddIcon = createOrbitMultiVariantIcon(InnerGuestAddIcon24, InnerGuestAddIcon32, "GuestAddIcon"); +export const GuestRemoveIcon = createOrbitMultiVariantIcon(InnerGuestRemoveIcon24, InnerGuestRemoveIcon32, "GuestRemoveIcon"); +export const HelpIcon = createOrbitMultiVariantIcon(InnerHelpIcon24, InnerHelpIcon32, "HelpIcon"); +export const HorizontalDotsIcon = createOrbitMultiVariantIcon(InnerHorizontalDotsIcon24, InnerHorizontalDotsIcon32, "HorizontalDotsIcon"); +export const ImageIcon = createOrbitMultiVariantIcon(InnerImageIcon24, InnerImageIcon32, "ImageIcon"); +export const InfoIcon = createOrbitMultiVariantIcon(InnerInfoIcon24, InnerInfoIcon32, "InfoIcon"); +export const LightbulbIcon = createOrbitMultiVariantIcon(InnerLightbulbIcon24, InnerLightbulbIcon32, "LightbulbIcon"); +export const MagnifierIcon = createOrbitMultiVariantIcon(InnerMagnifierIcon24, InnerMagnifierIcon32, "MagnifierIcon"); +export const MusicIcon = createOrbitMultiVariantIcon(InnerMusicIcon24, InnerMusicIcon32, "MusicIcon"); +export const NotificationIcon = createOrbitMultiVariantIcon(InnerNotificationIcon24, InnerNotificationIcon32, "NotificationIcon"); +export const NotificationOffIcon = createOrbitMultiVariantIcon(InnerNotificationOffIcon24, InnerNotificationOffIcon32, "NotificationOffIcon"); +export const PdfIcon = createOrbitMultiVariantIcon(InnerPdfIcon24, InnerPdfIcon32, "PdfIcon"); +export const PrinterIcon = createOrbitMultiVariantIcon(InnerPrinterIcon24, InnerPrinterIcon32, "PrinterIcon"); +export const PrivacyIcon = createOrbitMultiVariantIcon(InnerPrivacyIcon24, InnerPrivacyIcon32, "PrivacyIcon"); +export const SignoutIcon = createOrbitMultiVariantIcon(InnerSignoutIcon24, InnerSignoutIcon32, "SignoutIcon"); +export const SortIcon = createOrbitMultiVariantIcon(InnerSortIcon24, InnerSortIcon32, "SortIcon"); +export const SlashIcon = createOrbitMultiVariantIcon(InnerSlashIcon24, InnerSlashIcon32, "SlashIcon"); +export const TrashIcon = createOrbitMultiVariantIcon(InnerTrashIcon24, InnerTrashIcon32, "TrashIcon"); +export const UserAddIcon = createOrbitMultiVariantIcon(InnerUserAddIcon24, InnerUserAddIcon32, "UserAddIcon"); +export const UserRemoveIcon = createOrbitMultiVariantIcon(InnerUserRemoveIcon24, InnerUserRemoveIcon32, "UserRemoveIcon"); +export const VerticalDotsIcon = createOrbitMultiVariantIcon(InnerVerticalDotsIcon24, InnerVerticalDotsIcon32, "VerticalDotsIcon"); +export const VideoIcon = createOrbitMultiVariantIcon(InnerVideoIcon24, InnerVideoIcon32, "VideoIcon"); +export const WarningIcon = createOrbitMultiVariantIcon(InnerWarningIcon24, InnerWarningIcon32, "WarningIcon"); +export const ZipIcon = createOrbitMultiVariantIcon(InnerZipIcon24, InnerZipIcon32, "ZipIcon"); diff --git a/packages/react-components/src/icons/tests/chromatic/Icons.chroma.jsx b/packages/react-components/src/icons/tests/chromatic/Icons.chroma.jsx index 188fa6cdd..5cc092bf6 100644 --- a/packages/react-components/src/icons/tests/chromatic/Icons.chroma.jsx +++ b/packages/react-components/src/icons/tests/chromatic/Icons.chroma.jsx @@ -1,158 +1,138 @@ import { - AddGuestIcon, - AddGuestIcon32, AddIcon, + AddIcon24, AddIcon32, - AddUserIcon, - AddUserIcon32, - ArrowDownIcon, - ArrowDownIcon32, - ArrowDownLeftIcon, - ArrowDownLeftIcon32, - ArrowDownRightIcon, - ArrowDownRightIcon32, ArrowIcon, + ArrowIcon24, ArrowIcon32, - ArrowLeftIcon, - ArrowLeftIcon32, - ArrowLineUpIcon, - ArrowLineUpIcon32, - ArrowRightIcon, - ArrowRightIcon32, - ArrowUpIcon, - ArrowUpIcon32, - ArrowUpLeftIcon, - ArrowUpLeftIcon32, - ArrowUpRightIcon, - ArrowUpRightIcon32, - ArrowsUpDownIcon, - ArrowsUpDownIcon32, CalendarIcon, + CalendarIcon24, CalendarIcon32, - CalendarPresetIcon, - CalendarPresetIcon32, - CaretDownIcon, - CaretDownIcon32, CaretIcon, + CaretIcon24, CaretIcon32, - CaretLeftIcon, - CaretLeftIcon32, - CaretRightIcon, - CaretRightIcon32, - CaretUpDownIcon, - CaretUpDownIcon32, - CaretUpIcon, - CaretUpIcon32, CheckCircleIcon, + CheckCircleIcon24, CheckCircleIcon32, - CheckmarkFillIcon, - CheckmarkFillIcon32, - CheckmarkIcon, - CheckmarkIcon32, - ChevronDownIcon, - ChevronDownIcon32, + CheckIcon, + CheckIcon24, + CheckIcon32, ChevronIcon, + ChevronIcon24, ChevronIcon32, - ChevronLeftIcon, - ChevronLeftIcon32, - ChevronRightIcon, - ChevronRightIcon32, - ChevronUpDownIcon, - ChevronUpDownIcon32, - ChevronUpIcon, - ChevronUpIcon32, ClearFilterIcon, + ClearFilterIcon24, ClearFilterIcon32, - CloseIcon, - CloseIcon32, CrossIcon, + CrossIcon24, CrossIcon32, - CsvFileIcon, - CsvFileIcon32, - DeleteLinkIcon, - DeleteLinkIcon32, - DoNotDisturbIcon, - DoNotDisturbIcon32, + CsvIcon, + CsvIcon24, + CsvIcon32, + DashIcon, + DashIcon24, + DashIcon32, DownloadIcon, DownloadIcon32, EditIcon, + EditIcon24, EditIcon32, + EmailIcon, + EmailIcon24, + EmailIcon32, + EmailReminderIcon, + EmailReminderIcon24, + EmailReminderIcon32, + EyeIcon, + EyeIcon24, + EyeIcon32, FileIcon, + FileIcon24, FileIcon32, FilterIcon, + FilterIcon24, FilterIcon32, FlagIcon, + FlagIcon24, FlagIcon32, FolderIcon, + FolderIcon24, FolderIcon32, GearIcon, + GearIcon24, GearIcon32, GroupIcon, + GroupIcon24, GroupIcon32, - GroupSettingIcon, - GroupSettingIcon32, - GuestIcon, - GuestIcon32, + GuestAddIcon, + GuestAddIcon24, + GuestAddIcon32, + GuestRemoveIcon, + GuestRemoveIcon24, + GuestRemoveIcon32, HelpIcon, + HelpIcon24, HelpIcon32, HorizontalDotsIcon, + HorizontalDotsIcon24, HorizontalDotsIcon32, + ImageIcon, + ImageIcon24, + ImageIcon32, InfoIcon, + InfoIcon24, InfoIcon32, - KeyIcon, - KeyIcon32, LightbulbIcon, + LightbulbIcon24, LightbulbIcon32, - LinkIcon, - LinkIcon32, MagnifierIcon, + MagnifierIcon24, MagnifierIcon32, - MailIcon, - MailIcon32, - MusicFileIcon, - MusicFileIcon32, + MusicIcon, + MusicIcon24, + MusicIcon32, NotificationIcon, + NotificationIcon24, NotificationIcon32, - PdfFileIcon, - PdfFileIcon32, - PictureIcon, - PictureIcon32, + NotificationOffIcon, + NotificationOffIcon24, + NotificationOffIcon32, + PdfIcon, + PdfIcon24, + PdfIcon32, PrinterIcon, + PrinterIcon24, PrinterIcon32, PrivacyIcon, + PrivacyIcon24, PrivacyIcon32, - PrivateGroupIcon, - PrivateGroupIcon32, - PublicGroupIcon, - PublicGroupIcon32, - RemoveGuestIcon, - RemoveGuestIcon32, - RemoveUserIcon, - RemoveUserIcon32, - SecurityIcon, - SecurityIcon32, - SettingsIcon, - SettingsIcon32, - ShareIcon, - ShareIcon32, - SigninIcon, - SigninIcon32, SignoutIcon, + SignoutIcon24, SignoutIcon32, - TrashboxIcon, - TrashboxIcon32, - UploadIcon, - UploadIcon32, - UserIcon, - UserIcon32, + SortIcon, + SortIcon24, + SortIcon32, + TrashIcon, + TrashIcon24, + TrashIcon32, + UserAddIcon, + UserAddIcon24, + UserAddIcon32, + UserRemoveIcon, + UserRemoveIcon24, + UserRemoveIcon32, VerticalDotsIcon, + VerticalDotsIcon24, VerticalDotsIcon32, - VideoFileIcon, - VideoFileIcon32, - ViewIcon, - ViewIcon32, + VideoIcon, + VideoIcon24, + VideoIcon32, WarningIcon, - WarningIcon32 + WarningIcon24, + WarningIcon32, + ZipIcon, + ZipIcon24, + ZipIcon32 } from "@react-components/icons"; import { TestSuite } from "./TestSuite"; import { storiesOfBuilder } from "@stories/utils"; @@ -164,80 +144,48 @@ function stories(segment) { } stories() - .add("add", () => ) - .add("addUser", () => ) - .add("addGuest", () => ) - .add("arrow", () => ) - .add("arrowDown", () => ) - .add("arrowDownLeft", () => ) - .add("arrowDownRight", () => ) - .add("arrowUpLeft", () => ) - .add("arrowUpRight", () => ) - .add("arrowLeft", () => ) - .add("arrowLineUp", () => ) - .add("arrowRight", () => ) - .add("arrowUp", () => ) - .add("arrowsUpDown", () => ) - .add("calendar", () => ) - .add("calendarPreset", () => ) - .add("caret", () => ) - .add("caretLeft", () => ) - .add("caretRight", () => ) - .add("caretDown", () => ) - .add("caretUp", () => ) - .add("caretUpDown", () => ) - .add("checkCircle", () => ) - .add("checkmark", () => ) - .add("checkmarkFill", () => ) - .add("chevron", () => ) - .add("chevronUp", () => ) - .add("chevronUpDown", () => ) - .add("chevronDown", () => ) - .add("chevronLeft", () => ) - .add("chevronRight", () => ) - .add("clearFilter", () => ) - .add("close", () => ) - .add("cross", () => ) - .add("csvFile", () => ) - .add("deleteLink", () => ) - .add("doNotDisturb", () => ) + .add("add", () => ) + .add("arrow", () => ) + .add("calendar", () => ) + .add("caret", () => ) + .add("check", () => ) + .add("check circle", () => ) + .add("chevron", () => ) + .add("clear", () => ) + .add("cross", () => ) + .add("csv", () => ) + .add("dash", () => ) .add("download", () => ) - .add("edit", () => ) - .add("file", () => ) - .add("filter", () => ) - .add("flag", () => ) - .add("folder", () => ) - .add("gear", () => ) - .add("group", () => ) - .add("groupSetting", () => ) - .add("guest", () => ) - .add("help", () => ) - .add("horizontalDots", () => ) - .add("info", () => ) - .add("key", () => ) - .add("lightbulb", () => ) - .add("link", () => ) - .add("magnifier", () => ) - .add("mail", () => ) - .add("musicFile", () => ) - .add("notification", () => ) - .add("pdfFile", () => ) - .add("picture", () => ) - .add("printer", () => ) - .add("privacy", () => ) - .add("privateGroup", () => ) - .add("publicGroup", () => ) - .add("removeGuest", () => ) - .add("removeUser", () => ) - .add("security", () => ) - .add("settings", () => ) - .add("share", () => ) - .add("signin", () => ) - .add("signout", () => ) - .add("trashbox", () => ) - .add("upload", () => ) - .add("user", () => ) - .add("verticalDots", () => ) - .add("videoFile", () => ) - .add("view", () => ) - .add("warning", () => ); + .add("edit", () => ) + .add("email", () => ) + .add("email reminder", () => ) + .add("eye", () => ) + .add("file", () => ) + .add("filter", () => ) + .add("flag", () => ) + .add("folder", () => ) + .add("gear", () => ) + .add("group", () => ) + .add("guest add", () => ) + .add("guest remove", () => ) + .add("help", () => ) + .add("horizontal dots", () => ) + .add("info", () => ) + .add("lightbulb", () => ) + .add("magnifier", () => ) + .add("music", () => ) + .add("notification", () => ) + .add("notification off", () => ) + .add("pdf", () => ) + .add("image", () => ) + .add("printer", () => ) + .add("privacy", () => ) + .add("signout", () => ) + .add("sort", () => ) + .add("trash", () => ) + .add("user add", () => ) + .add("user remove", () => ) + .add("vertical dots", () => ) + .add("video", () => ) + .add("warning", () => ) + .add("zip", () => ); diff --git a/packages/react-components/src/icons/tests/chromatic/TestSuite.jsx b/packages/react-components/src/icons/tests/chromatic/TestSuite.jsx index 2693b36af..a663ec3ff 100644 --- a/packages/react-components/src/icons/tests/chromatic/TestSuite.jsx +++ b/packages/react-components/src/icons/tests/chromatic/TestSuite.jsx @@ -12,8 +12,8 @@ export function TestSuite({ icon24: Icon24, icon32: Icon32, multiIcon: MultiIcon - - + + @@ -24,8 +24,8 @@ export function TestSuite({ icon24: Icon24, icon32: Icon32, multiIcon: MultiIcon - - + + @@ -35,8 +35,8 @@ export function TestSuite({ icon24: Icon24, icon32: Icon32, multiIcon: MultiIcon - - + +
diff --git a/packages/react-components/src/icons/tests/jest/IconList.test.jsx b/packages/react-components/src/icons/tests/jest/IconList.test.jsx index c3a10722f..7fbfbe971 100644 --- a/packages/react-components/src/icons/tests/jest/IconList.test.jsx +++ b/packages/react-components/src/icons/tests/jest/IconList.test.jsx @@ -1,4 +1,4 @@ -import { CheckmarkIcon, IconList } from "@react-components/icons"; +import { CheckIcon, IconList } from "@react-components/icons"; import { createRef, forwardRef } from "react"; import { render, waitFor } from "@testing-library/react"; @@ -8,8 +8,8 @@ const Icons = forwardRef((props, ref) => { {...props} ref={ref} > - - + + ); }); diff --git a/packages/react-components/src/listbox/src/Listbox.css b/packages/react-components/src/listbox/src/Listbox.css index 7f7baa089..8da59c189 100644 --- a/packages/react-components/src/listbox/src/Listbox.css +++ b/packages/react-components/src/listbox/src/Listbox.css @@ -63,7 +63,7 @@ content: ""; width: var(--o-ui-listbox-option-checkmark-size); height: var(--o-ui-listbox-option-checkmark-size); - mask: url("~@orbit-ui/icons/dist/icon-checkmark-fill-24.svg") center center no-repeat; + mask: url("~@orbit-ui/icons/dist/icon-check-24.svg") center center no-repeat; mask-size: var(--o-ui-listbox-option-checkmark-size) var(--o-ui-listbox-option-checkmark-size); background-color: var(--o-ui-alias-background-primary-1); position: absolute; diff --git a/packages/react-components/src/lozenge/src/Lozenge.css b/packages/react-components/src/lozenge/src/Lozenge.css index 8099d0937..12135cccc 100644 --- a/packages/react-components/src/lozenge/src/Lozenge.css +++ b/packages/react-components/src/lozenge/src/Lozenge.css @@ -43,6 +43,6 @@ } .o-ui-lozenge.o-ui-lozenge-primary .o-ui-lozenge-icon { - stroke: currentColor; + fill: currentColor; color: inherit; } diff --git a/packages/react-components/src/menu/src/Menu.css b/packages/react-components/src/menu/src/Menu.css index 098c0afe6..794dd41a2 100644 --- a/packages/react-components/src/menu/src/Menu.css +++ b/packages/react-components/src/menu/src/Menu.css @@ -62,7 +62,7 @@ content: ""; width: var(--o-ui-menu-item-checkmark-size); height: var(--o-ui-menu-item-checkmark-size); - mask: url("~@orbit-ui/icons/dist/icon-checkmark-fill-24.svg") center center no-repeat; + mask: url("~@orbit-ui/icons/dist/icon-check-32.svg") center center no-repeat; mask-size: var(--o-ui-menu-item-checkmark-size) var(--o-ui-menu-item-checkmark-size); background-color: var(--o-ui-alias-background-primary-1); position: absolute; diff --git a/packages/react-components/src/number-input/src/NumberInput.css b/packages/react-components/src/number-input/src/NumberInput.css index 801ffeda4..8b70a963e 100644 --- a/packages/react-components/src/number-input/src/NumberInput.css +++ b/packages/react-components/src/number-input/src/NumberInput.css @@ -78,7 +78,7 @@ } .o-ui-number-input-spinner .o-ui-icon { - stroke: var(--o-ui-alias-icon-1); + fill: var(--o-ui-alias-icon-1); } /* SPINNER | ACTIVE */ diff --git a/packages/react-components/src/radio/tests/chromatic/createRadioTestSuite.jsx b/packages/react-components/src/radio/tests/chromatic/createRadioTestSuite.jsx index 11f3f7a4f..d425f7729 100644 --- a/packages/react-components/src/radio/tests/chromatic/createRadioTestSuite.jsx +++ b/packages/react-components/src/radio/tests/chromatic/createRadioTestSuite.jsx @@ -1,5 +1,5 @@ import { Counter } from "@react-components/counter"; -import { IconList, InfoIcon, MailIcon, WarningIcon } from "@react-components/icons"; +import { EmailIcon, IconList, InfoIcon, WarningIcon } from "@react-components/icons"; import { Inline, Stack } from "@react-components/layout"; import { Text } from "@react-components/text"; import { cloneElement } from "react"; @@ -18,18 +18,18 @@ export function createRadioTestSuite(element, stories) { Milky Way - + Milky Way - +
Milky Way - +
@@ -46,7 +46,7 @@ export function createRadioTestSuite(element, stories) {
Milky Way - + 60
@@ -61,7 +61,7 @@ export function createRadioTestSuite(element, stories) { Milky Way - +
@@ -75,7 +75,7 @@ export function createRadioTestSuite(element, stories) { Milky Way - + 60 @@ -91,7 +91,7 @@ export function createRadioTestSuite(element, stories) { Milky Way - + Milky Way @@ -128,7 +128,7 @@ export function createRadioTestSuite(element, stories) { PA-99-N2 event and possible exoplanet in galaxy - + diff --git a/packages/react-components/src/switch/tests/chromatic/createTestSuite.jsx b/packages/react-components/src/switch/tests/chromatic/createTestSuite.jsx index 4d3b3ea09..f1f7451d1 100644 --- a/packages/react-components/src/switch/tests/chromatic/createTestSuite.jsx +++ b/packages/react-components/src/switch/tests/chromatic/createTestSuite.jsx @@ -1,5 +1,5 @@ import { Counter } from "@react-components/counter"; -import { IconList, InfoIcon, MailIcon, WarningIcon } from "@react-components/icons"; +import { EmailIcon, IconList, InfoIcon, WarningIcon } from "@react-components/icons"; import { Inline, Stack } from "@react-components/layout"; import { Text } from "@react-components/text"; import { cloneElement } from "react"; @@ -19,25 +19,25 @@ export function createTestSuite(element, stories) { Engines - + Engines - + Engines - + Engines - + Engines - + @@ -53,12 +53,12 @@ export function createTestSuite(element, stories) { Engines - + 60 Engines - + 60 @@ -72,18 +72,18 @@ export function createTestSuite(element, stories) { - + - + - + - + @@ -96,11 +96,11 @@ export function createTestSuite(element, stories) { - + 60 - + 60 @@ -115,12 +115,12 @@ export function createTestSuite(element, stories) { Engines - + - + @@ -137,13 +137,13 @@ export function createTestSuite(element, stories) { Engines - + 60 - + 60 @@ -159,7 +159,7 @@ export function createTestSuite(element, stories) { Engines - + Engines @@ -201,7 +201,7 @@ export function createTestSuite(element, stories) { PA-99-N2 event and possible exoplanet in galaxy - + diff --git a/packages/react-components/src/tabs/src/Tabs.css b/packages/react-components/src/tabs/src/Tabs.css index a22e1e6d5..2ab0bcfb0 100644 --- a/packages/react-components/src/tabs/src/Tabs.css +++ b/packages/react-components/src/tabs/src/Tabs.css @@ -159,7 +159,7 @@ .o-ui-tab .o-ui-tab-icon { color: inherit; - stroke: currentColor; + fill: currentColor; } .o-ui-tab-icon + .o-ui-tab-text { diff --git a/packages/react-components/src/tag/docs/TagsPicker.sample.jsx b/packages/react-components/src/tag/docs/TagsPicker.sample.jsx index a49bbbc85..19338dcf5 100644 --- a/packages/react-components/src/tag/docs/TagsPicker.sample.jsx +++ b/packages/react-components/src/tag/docs/TagsPicker.sample.jsx @@ -8,7 +8,7 @@ const Tags = [ { title: "1960", items: [ - { key: "gemini", value: "Gemini Program", icon: } + { key: "gemini", value: "Gemini Program", icon: } ] }, { diff --git a/packages/react-components/src/text-input/src/PasswordInput.tsx b/packages/react-components/src/text-input/src/PasswordInput.tsx index 18faa5dcc..d1feb7c9c 100644 --- a/packages/react-components/src/text-input/src/PasswordInput.tsx +++ b/packages/react-components/src/text-input/src/PasswordInput.tsx @@ -2,8 +2,8 @@ import "./PasswordInput.css"; import { BoxProps as BoxPropsForDocumentation } from "../../box"; import { ComponentProps, ElementType, ForwardedRef, ReactElement, SyntheticEvent } from "react"; +import { EyeIcon, PrivacyIcon } from "../../icons"; import { IconButton } from "../../button"; -import { PrivacyIcon, ViewIcon } from "../../icons"; import { TextInput, TextInputProps } from "./TextInput"; import { forwardRef, isNilOrEmpty, mergeProps, useControllableState, useEventCallback } from "../../shared"; import { useState } from "react"; @@ -107,7 +107,7 @@ export function InnerPasswordInput({ title="Toggle password visibility" aria-label="Toggle password visibility" > - {isHidden ? : } + {isHidden ? : } ); diff --git a/packages/react-components/src/text-input/tests/chromatic/SearchInput.chroma.jsx b/packages/react-components/src/text-input/tests/chromatic/SearchInput.chroma.jsx index bb94cd1da..17efccda5 100644 --- a/packages/react-components/src/text-input/tests/chromatic/SearchInput.chroma.jsx +++ b/packages/react-components/src/text-input/tests/chromatic/SearchInput.chroma.jsx @@ -1,5 +1,5 @@ +import { EmailIcon } from "@react-components/icons"; import { Inline, Stack } from "@react-components/layout"; -import { MailIcon } from "@react-components/icons"; import { SearchInput } from "@react-components/text-input"; import { storiesOfBuilder } from "@stories/utils"; @@ -67,16 +67,16 @@ stories() ) .add("custom icon", () => - } placeholder="Where to?" /> - } defaultValue="SpaceX will win the race!" /> - } placeholder="Where to?" /> - } placeholder="Where to?" /> - } placeholder="Where to?" /> + } placeholder="Where to?" /> + } defaultValue="SpaceX will win the race!" /> + } placeholder="Where to?" /> + } placeholder="Where to?" /> + } placeholder="Where to?" />
- } placeholder="Where to?" /> + } placeholder="Where to?" />
- } placeholder="Where to?" /> + } placeholder="Where to?" />
) diff --git a/packages/react-components/src/tooltip/docs/CustomTrigger.sample.jsx b/packages/react-components/src/tooltip/docs/CustomTrigger.sample.jsx index 2e0111cbb..5afe5981a 100644 --- a/packages/react-components/src/tooltip/docs/CustomTrigger.sample.jsx +++ b/packages/react-components/src/tooltip/docs/CustomTrigger.sample.jsx @@ -8,7 +8,7 @@ const CustomTrigger = forwardRef((props, ref) => { aria-label="Email" ref={ref} > - + ); }); diff --git a/packages/react-components/src/tooltip/docs/Tooltip.stories.mdx b/packages/react-components/src/tooltip/docs/Tooltip.stories.mdx index 17d28190b..247e01245 100644 --- a/packages/react-components/src/tooltip/docs/Tooltip.stories.mdx +++ b/packages/react-components/src/tooltip/docs/Tooltip.stories.mdx @@ -2,9 +2,9 @@ import { ArgsTable, Meta, Story } from "@storybook/addon-docs/blocks"; import { Box } from "@react-components/box"; import { Button, IconButton } from "@react-components/button" import { ComponentInfo, Preview, Tagline } from "@stories/components"; +import { EmailIcon, LightbulbIcon } from "@react-components/icons"; import { Inline } from "@react-components/layout"; import { InnerTooltip, InnerTooltipTrigger, Tooltip, TooltipTrigger } from "@react-components/tooltip"; -import { LightbulbIcon, MailIcon } from "@react-components/icons"; import { TextLink } from "@react-components/link"; Earth is a small town with many neighborhoods in a very big universe. - + Send an email to the orbital space station. @@ -68,7 +68,7 @@ A tooltip can contains [icons](?path=/docs/icon-gallery--page) and rich content - + Your email have been sent to the orbital space station. diff --git a/packages/react-components/src/tooltip/tests/chromatic/Tooltip.chroma.jsx b/packages/react-components/src/tooltip/tests/chromatic/Tooltip.chroma.jsx index 2c903b7f6..31f36b31a 100644 --- a/packages/react-components/src/tooltip/tests/chromatic/Tooltip.chroma.jsx +++ b/packages/react-components/src/tooltip/tests/chromatic/Tooltip.chroma.jsx @@ -1,8 +1,8 @@ import { Button } from "@react-components/button"; +import { EmailIcon } from "@react-components/icons"; import { IconButton } from "@react-components/button"; import { Image } from "@react-components/image"; import { Launch } from "./assets"; -import { MailIcon } from "@react-components/icons"; import { TextLink } from "@react-components/link"; import { Tooltip, TooltipTrigger } from "@react-components/tooltip"; import { paramsBuilder, storiesOfBuilder } from "@stories/utils"; @@ -53,14 +53,14 @@ stories() ) .add("icon trigger", () => - + Man must rise above the Earth ) .add("icon button trigger", () => - + Man must rise above the Earth diff --git a/storybook/styles/docs.css b/storybook/styles/docs.css index 0bd3b9907..4168da987 100644 --- a/storybook/styles/docs.css +++ b/storybook/styles/docs.css @@ -51,7 +51,7 @@ } .docblock-argstable-head button svg path { - stroke: var(--o-ui-global-white) !important; + fill: var(--o-ui-global-white) !important; } /* ARGS TABLE | BODY */