diff --git a/README.md b/README.md index 71304b3f8..70fcef008 100644 --- a/README.md +++ b/README.md @@ -124,4 +124,4 @@ After converting - Add an export to `src/icons/index.ts` for the icon -- Add an import + add it to `iconsList` in `stories/DataDisplay/Icons.stories.tsx` +- Add the icon to `iconsList` in `stories/DataDisplay/Icons.stories.tsx` diff --git a/src/icons/LightBulb.tsx b/src/icons/LightBulb.tsx new file mode 100644 index 000000000..a17698c79 --- /dev/null +++ b/src/icons/LightBulb.tsx @@ -0,0 +1,23 @@ +import { createElement } from 'react'; +import SvgIcon from '@mui/material/SvgIcon'; + +const LightBulb = (props: any) => + createElement( + SvgIcon, + props, + + + , + , + , + + ); + +export default LightBulb; diff --git a/src/icons/index.ts b/src/icons/index.ts index 264c6c933..8ad976887 100644 --- a/src/icons/index.ts +++ b/src/icons/index.ts @@ -1,4 +1,5 @@ export { default as Excel } from './Excel'; +import LightBulb from './LightBulb'; export { default as Pdf } from './Pdf'; export { default as Link } from './Link'; export { default as CreditCard } from './CreditCard'; @@ -98,3 +99,4 @@ export { default as Write } from './Write'; export { default as Note } from './Note'; export { default as MailSend } from './MailSend'; export { default as MapPin } from './MapPin'; +export { default as LightBulb } from './LightBulb'; diff --git a/stories/DataDisplay/Icons.stories.tsx b/stories/DataDisplay/Icons.stories.tsx index b61a5707b..4f126bb2e 100644 --- a/stories/DataDisplay/Icons.stories.tsx +++ b/stories/DataDisplay/Icons.stories.tsx @@ -5,113 +5,12 @@ import { SvgIconProps } from '@mui/material'; import Paper from '../../src/components/Paper'; import TextField from '../../src/components/TextField'; import Grid from '../../src/components/Grid'; -import { - Excel, - Pdf, - Link, - CreditCard, - Attachment, - Bank, - Chat, - Filter, - Mobile, - Lock, - Code, - FaceId, - Hierarchy, - HierarchyTree, - ShareHierarchy, - Magnifier, - Pin, - Share, - Layout, - LayoutGrid, - LayoutRows, - LayoutSquare, - List, - Menu, - Download, - Upload, - LaptopDownload, - LaptopUpload, - UsersShare, - PeopleShare, - PeopleSwitch, - ChevronUp, - ChevronRight, - ChevronDown, - ChevronLeft, - ArrowUp, - ArrowDown, - ArrowLeft, - ArrowRight, - Loading, - PaginationLeft, - PaginationRight, - PaginationDown, - PaginationUp, - PaginationFirst, - PaginationLast, - Clock, - Stopwatch, - Calendar, - CalendarDate, - Plus, - Close, - Copy, - Save, - Bin, - Edit, - Eye, - EyeClosed, - Cog, - Star, - StarFilled, - Preview, - Search, - Undo, - Alert, - AlertCircle, - Success, - Info, - Stop, - ParticipantsRegistered, - ParticipantsShow, - ParticipantsNotReacted, - ParticipantsDeclined, - ParticipantsNoShow, - Bill, - BrowserPage, - EmptyFile, - Company, - ImageEdit, - Laptop, - LockShield, - Mail, - Meter, - MonitorChart, - MonitorPieChart, - Participants, - Profile, - Quill, - EVS1, - EVS2, - EVS3, - EVS4, - EVS5, - Globe, - AwardBadgeStar, - Hourglass, - Write, - Note, - MailSend, - MapPin, -} from '../../src/icons'; +import * as i from '../../src/icons'; import { modifyExcludedParams } from '../../.storybook/excludedParams'; export default { title: 'Components/Data Display/Icons', - component: Cog, + component: i.Cog, parameters: { docs: { description: { @@ -161,106 +60,107 @@ export default { } as Meta; const iconsList = [ - { name: 'Excel', component: Excel }, - { name: 'Pdf', component: Pdf }, - { name: 'Link', component: Link }, - { name: 'CreditCard', component: CreditCard }, - { name: 'Attachment', component: Attachment }, - { name: 'Bank', component: Bank }, - { name: 'Chat', component: Chat }, - { name: 'Filter', component: Filter }, - { name: 'Mobile', component: Mobile }, - { name: 'Lock', component: Lock }, - { name: 'Code', component: Code }, - { name: 'FaceId', component: FaceId }, - { name: 'Hierarchy', component: Hierarchy }, - { name: 'HierarchyTree', component: HierarchyTree }, - { name: 'ShareHierarchy', component: ShareHierarchy }, - { name: 'Magnifier', component: Magnifier }, - { name: 'Pin', component: Pin }, - { name: 'Share', component: Share }, - { name: 'Layout', component: Layout }, - { name: 'LayoutGrid', component: LayoutGrid }, - { name: 'LayoutRows', component: LayoutRows }, - { name: 'LayoutSquare', component: LayoutSquare }, - { name: 'List', component: List }, - { name: 'Menu', component: Menu }, - { name: 'Download', component: Download }, - { name: 'Upload', component: Upload }, - { name: 'LaptopDownload', component: LaptopDownload }, - { name: 'LaptopUpload', component: LaptopUpload }, - { name: 'UsersShare', component: UsersShare }, - { name: 'PeopleShare', component: PeopleShare }, - { name: 'PeopleSwitch', component: PeopleSwitch }, - { name: 'ChevronUp', component: ChevronUp }, - { name: 'ChevronRight', component: ChevronRight }, - { name: 'ChevronDown', component: ChevronDown }, - { name: 'ChevronLeft', component: ChevronLeft }, - { name: 'ArrowUp', component: ArrowUp }, - { name: 'ArrowDown', component: ArrowDown }, - { name: 'ArrowLeft', component: ArrowLeft }, - { name: 'ArrowRight', component: ArrowRight }, - { name: 'Loading', component: Loading }, - { name: 'PaginationLeft', component: PaginationLeft }, - { name: 'PaginationRight', component: PaginationRight }, - { name: 'PaginationDown', component: PaginationDown }, - { name: 'PaginationUp', component: PaginationUp }, - { name: 'PaginationFirst', component: PaginationFirst }, - { name: 'PaginationLast', component: PaginationLast }, - { name: 'Clock', component: Clock }, - { name: 'Stopwatch', component: Stopwatch }, - { name: 'Calendar', component: Calendar }, - { name: 'CalendarDate', component: CalendarDate }, - { name: 'Plus', component: Plus }, - { name: 'Close', component: Close }, - { name: 'Copy', component: Copy }, - { name: 'Save', component: Save }, - { name: 'Bin', component: Bin }, - { name: 'Edit', component: Edit }, - { name: 'Eye', component: Eye }, - { name: 'EyeClosed', component: EyeClosed }, - { name: 'Cog', component: Cog }, - { name: 'Star', component: Star }, - { name: 'StarFilled', component: StarFilled }, - { name: 'Preview', component: Preview }, - { name: 'Search', component: Search }, - { name: 'Undo', component: Undo }, - { name: 'Alert', component: Alert }, - { name: 'AlertCircle', component: AlertCircle }, - { name: 'Success', component: Success }, - { name: 'Info', component: Info }, - { name: 'Stop', component: Stop }, - { name: 'ParticipantsRegistered', component: ParticipantsRegistered }, - { name: 'ParticipantsShow', component: ParticipantsShow }, - { name: 'ParticipantsNotReacted', component: ParticipantsNotReacted }, - { name: 'ParticipantsDeclined', component: ParticipantsDeclined }, - { name: 'ParticipantsNoShow', component: ParticipantsNoShow }, - { name: 'Bill', component: Bill }, - { name: 'BrowserPage', component: BrowserPage }, - { name: 'EmptyFile', component: EmptyFile }, - { name: 'Company', component: Company }, - { name: 'ImageEdit', component: ImageEdit }, - { name: 'Laptop', component: Laptop }, - { name: 'LockShield', component: LockShield }, - { name: 'Mail', component: Mail }, - { name: 'Meter', component: Meter }, - { name: 'MonitorChart', component: MonitorChart }, - { name: 'MonitorPieChart', component: MonitorPieChart }, - { name: 'Participants', component: Participants }, - { name: 'Profile', component: Profile }, - { name: 'Quill', component: Quill }, - { name: 'EVS1', component: EVS1 }, - { name: 'EVS2', component: EVS2 }, - { name: 'EVS3', component: EVS3 }, - { name: 'EVS4', component: EVS4 }, - { name: 'EVS5', component: EVS5 }, - { name: 'Globe', component: Globe }, - { name: 'AwardBadgeStar', component: AwardBadgeStar }, - { name: 'Hourglass', component: Hourglass }, - { name: 'Write', component: Write }, - { name: 'Note', component: Note }, - { name: 'MailSend', component: MailSend }, - { name: 'MapPin', component: MapPin }, + { name: 'Excel', component: i.Excel }, + { name: 'Pdf', component: i.Pdf }, + { name: 'Link', component: i.Link }, + { name: 'CreditCard', component: i.CreditCard }, + { name: 'Attachment', component: i.Attachment }, + { name: 'Bank', component: i.Bank }, + { name: 'Chat', component: i.Chat }, + { name: 'Filter', component: i.Filter }, + { name: 'Mobile', component: i.Mobile }, + { name: 'Lock', component: i.Lock }, + { name: 'Code', component: i.Code }, + { name: 'FaceId', component: i.FaceId }, + { name: 'Hierarchy', component: i.Hierarchy }, + { name: 'HierarchyTree', component: i.HierarchyTree }, + { name: 'ShareHierarchy', component: i.ShareHierarchy }, + { name: 'Magnifier', component: i.Magnifier }, + { name: 'Pin', component: i.Pin }, + { name: 'Share', component: i.Share }, + { name: 'Layout', component: i.Layout }, + { name: 'LayoutGrid', component: i.LayoutGrid }, + { name: 'LayoutRows', component: i.LayoutRows }, + { name: 'LayoutSquare', component: i.LayoutSquare }, + { name: 'List', component: i.List }, + { name: 'Menu', component: i.Menu }, + { name: 'Download', component: i.Download }, + { name: 'Upload', component: i.Upload }, + { name: 'LaptopDownload', component: i.LaptopDownload }, + { name: 'LaptopUpload', component: i.LaptopUpload }, + { name: 'UsersShare', component: i.UsersShare }, + { name: 'PeopleShare', component: i.PeopleShare }, + { name: 'PeopleSwitch', component: i.PeopleSwitch }, + { name: 'ChevronUp', component: i.ChevronUp }, + { name: 'ChevronRight', component: i.ChevronRight }, + { name: 'ChevronDown', component: i.ChevronDown }, + { name: 'ChevronLeft', component: i.ChevronLeft }, + { name: 'ArrowUp', component: i.ArrowUp }, + { name: 'ArrowDown', component: i.ArrowDown }, + { name: 'ArrowLeft', component: i.ArrowLeft }, + { name: 'ArrowRight', component: i.ArrowRight }, + { name: 'Loading', component: i.Loading }, + { name: 'PaginationLeft', component: i.PaginationLeft }, + { name: 'PaginationRight', component: i.PaginationRight }, + { name: 'PaginationDown', component: i.PaginationDown }, + { name: 'PaginationUp', component: i.PaginationUp }, + { name: 'PaginationFirst', component: i.PaginationFirst }, + { name: 'PaginationLast', component: i.PaginationLast }, + { name: 'Clock', component: i.Clock }, + { name: 'Stopwatch', component: i.Stopwatch }, + { name: 'Calendar', component: i.Calendar }, + { name: 'CalendarDate', component: i.CalendarDate }, + { name: 'Plus', component: i.Plus }, + { name: 'Close', component: i.Close }, + { name: 'Copy', component: i.Copy }, + { name: 'Save', component: i.Save }, + { name: 'Bin', component: i.Bin }, + { name: 'Edit', component: i.Edit }, + { name: 'Eye', component: i.Eye }, + { name: 'EyeClosed', component: i.EyeClosed }, + { name: 'Cog', component: i.Cog }, + { name: 'Star', component: i.Star }, + { name: 'StarFilled', component: i.StarFilled }, + { name: 'Preview', component: i.Preview }, + { name: 'Search', component: i.Search }, + { name: 'Undo', component: i.Undo }, + { name: 'Alert', component: i.Alert }, + { name: 'AlertCircle', component: i.AlertCircle }, + { name: 'Success', component: i.Success }, + { name: 'Info', component: i.Info }, + { name: 'Stop', component: i.Stop }, + { name: 'ParticipantsRegistered', component: i.ParticipantsRegistered }, + { name: 'ParticipantsShow', component: i.ParticipantsShow }, + { name: 'ParticipantsNotReacted', component: i.ParticipantsNotReacted }, + { name: 'ParticipantsDeclined', component: i.ParticipantsDeclined }, + { name: 'ParticipantsNoShow', component: i.ParticipantsNoShow }, + { name: 'Bill', component: i.Bill }, + { name: 'BrowserPage', component: i.BrowserPage }, + { name: 'EmptyFile', component: i.EmptyFile }, + { name: 'Company', component: i.Company }, + { name: 'ImageEdit', component: i.ImageEdit }, + { name: 'Laptop', component: i.Laptop }, + { name: 'LockShield', component: i.LockShield }, + { name: 'Mail', component: i.Mail }, + { name: 'Meter', component: i.Meter }, + { name: 'MonitorChart', component: i.MonitorChart }, + { name: 'MonitorPieChart', component: i.MonitorPieChart }, + { name: 'Participants', component: i.Participants }, + { name: 'Profile', component: i.Profile }, + { name: 'Quill', component: i.Quill }, + { name: 'EVS1', component: i.EVS1 }, + { name: 'EVS2', component: i.EVS2 }, + { name: 'EVS3', component: i.EVS3 }, + { name: 'EVS4', component: i.EVS4 }, + { name: 'EVS5', component: i.EVS5 }, + { name: 'Globe', component: i.Globe }, + { name: 'AwardBadgeStar', component: i.AwardBadgeStar }, + { name: 'Hourglass', component: i.Hourglass }, + { name: 'Write', component: i.Write }, + { name: 'Note', component: i.Note }, + { name: 'MailSend', component: i.MailSend }, + { name: 'MapPin', component: i.MapPin }, + { name: 'LightBulb', component: i.LightBulb }, ]; const Template: Story = (args) => {