twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-11-22 21:50:43 +03:00
Code Issues Packages Projects Releases Wiki Activity

add field config new icons (#6996)

Browse Source 
https://github.com/twentyhq/twenty/issues/6950
Add new icons to Object Fields Data types.

Before:

![image](https://github.com/user-attachments/assets/55697e31-841d-435e-8c70-13ff1c59268d)


After:

![image](https://github.com/user-attachments/assets/bd43f0ec-d3f7-4ecf-a95f-87a030f68e24)

![image](https://github.com/user-attachments/assets/369893a9-35be-43f8-bfcb-55149effa78a)
This commit is contained in:
Ana Sofia Marin Alexandre 2024-09-13 15:07:38 +02:00 committed by GitHub
parent 7fd86a860c
commit cf8b1161cc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
45 changed files with 703 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldTypeConfigs.ts
View File

@ -1,24 +1,23 @@
import {
IconCalendarEvent,
IconCalendarTime,
IconCheck,
IconCoins,
IconComponent,
IconCreativeCommonsSa,
IconFilePencil,
IconJson,
IconKey,
IconLink,
IconMail,
IconMap,
IconNumbers,
IconPhone,
IconRelationManyToMany,
IconTag,
IconTags,
IconTextSize,
IconTwentyStar,
IconUser,
IllustrationIconCalendarEvent,
IllustrationIconCalendarTime,
IllustrationIconCurrency,
IllustrationIconJson,
IllustrationIconLink,
IllustrationIconMail,
IllustrationIconMap,
IllustrationIconNumbers,
IllustrationIconOneToMany,
IllustrationIconPhone,
IllustrationIconSetting,
IllustrationIconStar,
IllustrationIconTag,
IllustrationIconTags,
IllustrationIconText,
IllustrationIconToggle,
IllustrationIconUid,
IllustrationIconUser,
} from 'twenty-ui';
import { CurrencyCode } from '@/object-record/record-field/types/CurrencyCode';
@ -39,100 +38,100 @@ export type SettingsFieldTypeConfig = {
export const SETTINGS_FIELD_TYPE_CONFIGS = {
[FieldMetadataType.Uuid]: {
label: 'Unique ID',
Icon: IconKey,
Icon: IllustrationIconUid,
exampleValue: '00000000-0000-0000-0000-000000000000',
category: 'Advanced',
},
[FieldMetadataType.Text]: {
label: 'Text',
Icon: IconTextSize,
Icon: IllustrationIconText,
exampleValue:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum magna enim, dapibus non enim in, lacinia faucibus nunc. Sed interdum ante sed felis facilisis, eget ultricies neque molestie. Mauris auctor, justo eu volutpat cursus, libero erat tempus nulla, non sodales lorem lacus a est.',
category: 'Basic',
},
[FieldMetadataType.Numeric]: {
label: 'Numeric',
Icon: IconNumbers,
Icon: IllustrationIconNumbers,
exampleValue: 2000,
category: 'Basic',
},
[FieldMetadataType.Number]: {
label: 'Number',
Icon: IconNumbers,
Icon: IllustrationIconNumbers,
exampleValue: 2000,
category: 'Basic',
},
[FieldMetadataType.Link]: {
label: 'Link',
Icon: IconLink,
Icon: IllustrationIconLink,
exampleValue: { url: 'www.twenty.com', label: '' },
category: 'Basic',
},
[FieldMetadataType.Links]: {
label: 'Links',
Icon: IconLink,
Icon: IllustrationIconLink,
exampleValue: { primaryLinkUrl: 'twenty.com', primaryLinkLabel: '' },
category: 'Basic',
},
[FieldMetadataType.Boolean]: {
label: 'True/False',
Icon: IconCheck,
Icon: IllustrationIconToggle,
exampleValue: true,
category: 'Basic',
},
[FieldMetadataType.DateTime]: {
label: 'Date and Time',
Icon: IconCalendarTime,
Icon: IllustrationIconCalendarTime,
exampleValue: DEFAULT_DATE_VALUE.toISOString(),
category: 'Basic',
},
[FieldMetadataType.Date]: {
label: 'Date',
Icon: IconCalendarEvent,
Icon: IllustrationIconCalendarEvent,
exampleValue: DEFAULT_DATE_VALUE.toISOString(),
category: 'Basic',
},
[FieldMetadataType.Select]: {
label: 'Select',
Icon: IconTag,
Icon: IllustrationIconTag,
category: 'Basic',
},
[FieldMetadataType.MultiSelect]: {
label: 'Multi-select',
Icon: IconTags,
Icon: IllustrationIconTags,
category: 'Basic',
},
[FieldMetadataType.Currency]: {
label: 'Currency',
Icon: IconCoins,
Icon: IllustrationIconCurrency,
exampleValue: { amountMicros: 2000000000, currencyCode: CurrencyCode.USD },
category: 'Basic',
},
[FieldMetadataType.Relation]: {
label: 'Relation',
Icon: IconRelationManyToMany,
Icon: IllustrationIconOneToMany,
category: 'Relation',
},
[FieldMetadataType.Email]: {
label: 'Email',
Icon: IconMail,
Icon: IllustrationIconMail,
category: 'Basic',
},
[FieldMetadataType.Emails]: {
label: 'Emails',
Icon: IconMail,
Icon: IllustrationIconMail,
exampleValue: { primaryEmail: 'john@twenty.com' },
category: 'Basic',
},
[FieldMetadataType.Phone]: {
label: 'Phone',
Icon: IconPhone,
Icon: IllustrationIconPhone,
exampleValue: '+1234-567-890',
category: 'Basic',
},
[FieldMetadataType.Phones]: {
label: 'Phones',
Icon: IconPhone,
Icon: IllustrationIconPhone,
exampleValue: {
primaryPhoneNumber: '234-567-890',
primaryPhoneCountryCode: '+1',
@ -141,19 +140,19 @@ export const SETTINGS_FIELD_TYPE_CONFIGS = {
},
[FieldMetadataType.Rating]: {
label: 'Rating',
Icon: IconTwentyStar,
Icon: IllustrationIconStar,
exampleValue: '3',
category: 'Basic',
},
[FieldMetadataType.FullName]: {
label: 'Full Name',
Icon: IconUser,
Icon: IllustrationIconUser,
exampleValue: { firstName: 'John', lastName: 'Doe' },
category: 'Advanced',
},
[FieldMetadataType.Address]: {
label: 'Address',
Icon: IconMap,
Icon: IllustrationIconMap,
exampleValue: {
addressStreet1: '456 Oak Street',
addressStreet2: 'Unit 3B',
@ -168,20 +167,20 @@ export const SETTINGS_FIELD_TYPE_CONFIGS = {
},
[FieldMetadataType.RawJson]: {
label: 'JSON',
Icon: IconJson,
Icon: IllustrationIconJson,
exampleValue: { key: 'value' },
category: 'Basic',
},
[FieldMetadataType.RichText]: {
label: 'Rich Text',
Icon: IconFilePencil,
Icon: IllustrationIconSetting,
exampleValue: { key: 'value' },
category: 'Basic',
},
[FieldMetadataType.Actor]: {
label: 'Actor',
Icon: IconCreativeCommonsSa,
Icon: IllustrationIconSetting,
category: 'Basic',
},
} as const satisfies Record<

8
packages/twenty-ui/src/display/icon/assets/illustration-calendar-event.svg Normal file
View File

@ -0,0 +1,8 @@
<svg width="26" height="26" viewBox="-1 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.66433 7.43347C5.72493 6.9399 5.97912 6.49062 6.37099 6.18446C6.76285 5.8783 7.26028 5.74035 7.75386 5.80095L18.92 7.17199C19.4136 7.23259 19.8629 7.48678 20.169 7.87864C20.4752 8.27051 20.6131 8.76794 20.5525 9.26151L19.1815 20.4277C19.1209 20.9212 18.8667 21.3705 18.4748 21.6767C18.083 21.9828 17.5855 22.1208 17.092 22.0602L5.92582 20.6891C5.43224 20.6285 4.98296 20.3744 4.6768 19.9825C4.37064 19.5906 4.23269 19.0932 4.2933 18.5996L5.66433 7.43347Z" fill="#E8EFFD"/>
<path d="M17.2875 5.08246L16.8305 8.8045L17.2875 5.08246Z" fill="#E8EFFD"/>
<path d="M9.84339 4.16844L9.38638 7.89048L9.84339 4.16844Z" fill="#E8EFFD"/>
<path d="M5.20732 11.1555L20.0955 12.9836L5.20732 11.1555Z" fill="#E8EFFD"/>
<path d="M8.47236 15.3346L10.3334 15.5631L10.1049 17.4241L8.24385 17.1956L8.47236 15.3346Z" fill="#E8EFFD"/>
<path d="M17.2875 5.08246L16.8305 8.8045M9.84339 4.16844L9.38638 7.89048M5.20732 11.1555L20.0955 12.9836M5.66433 7.43347C5.72493 6.9399 5.97912 6.49062 6.37099 6.18446C6.76285 5.8783 7.26028 5.74035 7.75386 5.80095L18.92 7.17199C19.4136 7.23259 19.8629 7.48678 20.169 7.87864C20.4752 8.27051 20.6131 8.76794 20.5525 9.26151L19.1815 20.4277C19.1209 20.9212 18.8667 21.3705 18.4748 21.6767C18.083 21.9828 17.5855 22.1208 17.092 22.0602L5.92582 20.6891C5.43224 20.6285 4.98296 20.3744 4.6768 19.9825C4.37064 19.5906 4.23269 19.0932 4.2933 18.5996L5.66433 7.43347ZM8.47236 15.3346L10.3334 15.5631L10.1049 17.4241L8.24385 17.1956L8.47236 15.3346Z" stroke="currentColor" stroke-width="1.49625" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

9
packages/twenty-ui/src/display/icon/assets/illustration-calendar-time.svg Normal file
View File

@ -0,0 +1,9 @@
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.8968 20.4301L6.54196 20.8745C6.04589 20.9092 5.55636 20.7454 5.18105 20.4191C4.80575 20.0929 4.57542 19.6309 4.54073 19.1348L3.75597 7.91225C3.72128 7.41618 3.88508 6.92665 4.21132 6.55135C4.53757 6.17605 4.99954 5.94571 5.49561 5.91103L16.7182 5.12627C17.2143 5.09158 17.7038 5.25537 18.0791 5.58162C18.4544 5.90786 18.6847 6.36984 18.7194 6.8659L18.981 10.6068" fill="currentFill"/>
<path d="M14.7627 17.4803C14.8321 18.4724 15.2928 19.3964 16.0434 20.0488C16.794 20.7013 17.773 21.0289 18.7652 20.9595C19.7573 20.8902 20.6812 20.4295 21.3337 19.6789C21.9862 18.9283 22.3138 17.9492 22.2444 16.9571C22.1751 15.965 21.7144 15.041 20.9638 14.3885C20.2132 13.736 19.2341 13.4084 18.242 13.4778C17.2499 13.5472 16.3259 14.0079 15.6734 14.7585C15.0209 15.5091 14.6933 16.4881 14.7627 17.4803Z" fill="#E8EFFD"/>
<path d="M14.717 3.38663L14.9786 7.12749L14.717 3.38663Z" fill="#E8EFFD"/>
<path d="M7.23525 3.9098L7.49684 7.65067L7.23525 3.9098Z" fill="#E8EFFD"/>
<path d="M4.01756 11.6531L18.981 10.6068L4.01756 11.6531Z" fill="#E8EFFD"/>
<path d="M18.4052 15.8122L18.5036 17.2188L19.5042 18.0886" fill="#E8EFFD"/>
<path d="M12.8968 20.4301L6.54196 20.8745C6.04589 20.9092 5.55636 20.7454 5.18105 20.4191C4.80575 20.0929 4.57542 19.6309 4.54073 19.1348L3.75597 7.91225C3.72128 7.41618 3.88508 6.92665 4.21132 6.55135C4.53757 6.17605 4.99954 5.94571 5.49561 5.91103L16.7182 5.12627C17.2143 5.09158 17.7038 5.25537 18.0791 5.58162C18.4544 5.90786 18.6847 6.36984 18.7194 6.8659L18.981 10.6068L4.01756 11.6531M14.717 3.38663L14.9786 7.12749M7.23525 3.9098L7.49684 7.65067M18.4052 15.8122L18.5036 17.2188L19.5042 18.0886M14.7627 17.4803C14.8321 18.4724 15.2928 19.3964 16.0434 20.0488C16.794 20.7013 17.773 21.0289 18.7652 20.9595C19.7573 20.8902 20.6812 20.4295 21.3337 19.6789C21.9862 18.9283 22.3138 17.9492 22.2444 16.9571C22.1751 15.965 21.7144 15.041 20.9638 14.3885C20.2132 13.736 19.2341 13.4084 18.242 13.4778C17.2499 13.5472 16.3259 14.0079 15.6734 14.7585C15.0209 15.5091 14.6933 16.4881 14.7627 17.4803Z" stroke="currentColor" stroke-width="1.49625" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

13
packages/twenty-ui/src/display/icon/assets/illustration-currency.svg Normal file
View File

@ -0,0 +1,13 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_39321_100611)">
<path d="M10.2501 3.41974L14.9262 3.74672C15.2983 3.77274 15.6447 3.94549 15.8894 4.22697C16.1341 4.50844 16.257 4.87559 16.2309 5.24764C16.1702 6.11577 15.7672 6.92422 15.1104 7.49515C14.4536 8.06608 13.5969 8.35272 12.7288 8.29201L11.7936 8.22662C10.9255 8.16591 10.117 7.76283 9.54608 7.10605C8.97515 6.44927 8.68851 5.59259 8.74922 4.72447C8.77523 4.35242 8.94798 4.00594 9.22946 3.76125C9.51093 3.51657 9.87808 3.39372 10.2501 3.41974Z" fill="#E8EFFD"/>
<path d="M4.19089 16.1531L4.25629 15.2179C4.39504 13.2336 5.31637 11.3857 6.81758 10.0807C8.31879 8.77574 10.2769 8.12056 12.2612 8.25931C14.2455 8.39807 16.0934 9.31939 17.3983 10.8206C18.7033 12.3218 19.3585 14.2799 19.2197 16.2642L19.1544 17.1994C19.085 18.1916 18.6243 19.1155 17.8737 19.768C17.1231 20.4205 16.144 20.7481 15.1519 20.6787L7.67017 20.1555C6.67803 20.0862 5.75409 19.6255 5.1016 18.8749C4.4491 18.1243 4.12151 17.1452 4.19089 16.1531Z" fill="#E8EFFD"/>
<path d="M10.2501 3.41974L14.9262 3.74672C15.2983 3.77274 15.6447 3.94549 15.8894 4.22697C16.1341 4.50844 16.257 4.87559 16.2309 5.24764C16.1702 6.11577 15.7672 6.92422 15.1104 7.49515C14.4536 8.06608 13.5969 8.35272 12.7288 8.29201L11.7936 8.22662C10.9255 8.16591 10.117 7.76283 9.54608 7.10605C8.97515 6.44927 8.68851 5.59259 8.74922 4.72447C8.77523 4.35242 8.94798 4.00594 9.22946 3.76125C9.51093 3.51657 9.87808 3.39372 10.2501 3.41974Z" stroke="currentColor" stroke-width="1.49625" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4.19089 16.1531L4.25629 15.2179C4.39504 13.2336 5.31637 11.3857 6.81758 10.0807C8.31879 8.77574 10.2769 8.12056 12.2612 8.25931C14.2455 8.39807 16.0934 9.31939 17.3983 10.8206C18.7033 12.3218 19.3585 14.2799 19.2197 16.2642L19.1544 17.1994C19.085 18.1916 18.6243 19.1155 17.8737 19.768C17.1231 20.4205 16.144 20.7481 15.1519 20.6787L7.67017 20.1555C6.67803 20.0862 5.75409 19.6255 5.1016 18.8749C4.4491 18.1243 4.12151 17.1452 4.19089 16.1531Z" stroke="currentColor" stroke-width="1.49625" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_39321_100611">
<rect x="0.75" y="0.75" width="22.5" height="22.5" rx="2.25" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

5
packages/twenty-ui/src/display/icon/assets/illustration-json.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.80092 4.84535C6.30485 4.88004 5.84288 5.11037 5.51664 5.48567C5.19039 5.86097 5.0266 6.3505 5.06128 6.84657L5.25747 9.65222C5.30951 10.3963 5.16235 11.1237 4.84837 11.6744C4.53438 12.2251 4.0793 12.554 3.58323 12.5887C4.0793 12.554 4.57572 12.8163 4.96329 13.3179C5.35086 13.8196 5.59782 14.5194 5.64985 15.2635L5.84605 18.0692C5.88073 18.5652 6.11106 19.0272 6.48637 19.3535C6.86167 19.6797 7.3512 19.8435 7.84727 19.8088" fill="currentFill"/>
<path d="M16.1531 4.19138C16.6492 4.15669 17.1387 4.32049 17.514 4.64673C17.8893 4.97298 18.1196 5.43495 18.1543 5.93102L18.3505 8.73667C18.4025 9.48077 18.6495 10.1806 19.0371 10.6823C19.4246 11.1839 19.9211 11.4462 20.4171 11.4115C19.9211 11.4462 19.466 11.7751 19.152 12.3258C18.838 12.8765 18.6909 13.6039 18.7429 14.348L18.9391 17.1536C18.9738 17.6497 18.81 18.1392 18.4837 18.5145C18.1575 18.8898 17.6955 19.1202 17.1994 19.1548" fill="currentFill"/>
<path d="M6.80092 4.84535C6.30485 4.88004 5.84288 5.11037 5.51664 5.48567C5.19039 5.86097 5.0266 6.3505 5.06128 6.84657L5.25747 9.65222C5.30951 10.3963 5.16235 11.1237 4.84837 11.6744C4.53438 12.2251 4.0793 12.554 3.58323 12.5887C4.0793 12.554 4.57572 12.8163 4.96329 13.3179C5.35086 13.8196 5.59782 14.5194 5.64985 15.2635L5.84605 18.0692C5.88073 18.5652 6.11106 19.0272 6.48637 19.3535C6.86167 19.6797 7.3512 19.8435 7.84727 19.8088M16.1531 4.19138C16.6492 4.15669 17.1387 4.32049 17.514 4.64673C17.8893 4.97298 18.1196 5.43495 18.1543 5.93102L18.3505 8.73667C18.4025 9.48077 18.6495 10.1806 19.0371 10.6823C19.4246 11.1839 19.9211 11.4462 20.4171 11.4115C19.9211 11.4462 19.466 11.7751 19.152 12.3258C18.838 12.8765 18.6909 13.6039 18.7429 14.348L18.9391 17.1536C18.9738 17.6497 18.81 18.1392 18.4837 18.5145C18.1575 18.8898 17.6955 19.1202 17.1994 19.1548" stroke="currentColor" stroke-width="1.49625" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

17
packages/twenty-ui/src/display/icon/assets/illustration-link.svg Normal file
View File

@ -0,0 +1,17 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="24" height="24" rx="3" fill="none"/>
<g clip-path="url(#clip0_36855_127168)">
<rect x="0.75" y="0.75" width="22.5" height="22.5" rx="2.25" fill="none"/>
<path d="M3.60925 11.1178C3.49343 12.2198 3.59579 13.3338 3.91049 14.3962C4.22519 15.4586 4.74606 16.4486 5.44336 17.3097C6.14067 18.1708 7.00075 18.8861 7.9745 19.4148C8.94826 19.9435 10.0166 20.2753 11.1186 20.3911C12.2205 20.5069 13.3345 20.4045 14.3969 20.0898C15.4593 19.7751 16.4493 19.2543 17.3104 18.557C18.1715 17.8597 18.8868 16.9996 19.4156 16.0258C19.9443 15.0521 20.276 13.9837 20.3918 12.8818C20.6257 10.6563 19.966 8.42898 18.5577 6.68991C17.1494 4.95084 15.108 3.84243 12.8825 3.60852C10.657 3.37461 8.42971 4.03436 6.69064 5.44263C4.95157 6.8509 3.84316 8.89234 3.60925 11.1178Z" fill="currentFill"/>
<path d="M4.46411 8.3797L20.1278 10.026L4.46411 8.3797Z" fill="#E8EFFD"/>
<path d="M3.87614 13.9739L19.5399 15.6202L3.87614 13.9739Z" fill="#E8EFFD"/>
<path d="M12.416 3.55949C10.5807 5.91142 9.44243 8.73125 9.1306 11.6982C8.81876 14.6651 9.34592 17.6599 10.6521 20.342" fill="#E8EFFD"/>
<path d="M13.3487 3.65752C14.6548 6.33963 15.182 9.3345 14.8702 12.3014C14.5583 15.2683 13.42 18.0881 11.5848 20.4401" fill="currentFill"/>
<path d="M4.46411 8.3797L20.1278 10.026M3.87614 13.9739L19.5399 15.6202M12.416 3.55949C10.5807 5.91142 9.44243 8.73125 9.1306 11.6982C8.81876 14.6651 9.34592 17.6599 10.6521 20.342M13.3487 3.65752C14.6548 6.33963 15.182 9.3345 14.8702 12.3014C14.5583 15.2683 13.42 18.0881 11.5848 20.4401M3.60925 11.1178C3.49343 12.2198 3.59579 13.3338 3.91049 14.3962C4.22519 15.4586 4.74606 16.4486 5.44336 17.3097C6.14067 18.1708 7.00075 18.8861 7.9745 19.4148C8.94826 19.9435 10.0166 20.2753 11.1186 20.3911C12.2205 20.5069 13.3345 20.4045 14.3969 20.0898C15.4593 19.7751 16.4493 19.2543 17.3104 18.557C18.1715 17.8597 18.8868 16.9996 19.4156 16.0258C19.9443 15.0521 20.276 13.9837 20.3918 12.8818C20.6257 10.6563 19.966 8.42898 18.5577 6.68991C17.1494 4.95084 15.108 3.84243 12.8825 3.60852C10.657 3.37461 8.42971 4.03436 6.69064 5.44263C4.95157 6.8509 3.84316 8.89234 3.60925 11.1178Z" stroke="currentColor" stroke-width="1.49625" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_36855_127168">
<rect x="0.75" y="0.75" width="22.5" height="22.5" rx="2.25" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

14
packages/twenty-ui/src/display/icon/assets/illustration-mail.svg Normal file
View File

@ -0,0 +1,14 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="24" height="24" rx="3" fill="none"/>
<g clip-path="url(#clip0_36855_127259)">
<rect x="0.75" y="0.75" width="22.5" height="22.5" rx="2.25" fill="none"/>
<path d="M3.25579 7.91194C3.2211 7.41587 3.3849 6.92633 3.71115 6.55103C4.03739 6.17573 4.49936 5.9454 4.99543 5.91071L18.0885 4.99516C18.5845 4.96047 19.0741 5.12426 19.4494 5.45051C19.8247 5.77675 20.055 6.23873 20.0897 6.7348L20.7437 16.087C20.7783 16.583 20.6145 17.0726 20.2883 17.4479C19.9621 17.8232 19.5001 18.0535 19.004 18.0882L5.91099 19.0037C5.41492 19.0384 4.92538 18.8746 4.55008 18.5484C4.17478 18.2221 3.94445 17.7602 3.90976 17.2641L3.25579 7.91194Z" fill="#E8EFFD"/>
<path d="M3.25579 7.91194L12.0651 12.9347L20.0897 6.7348" fill="#E8EFFD"/>
<path d="M3.25579 7.91194C3.2211 7.41587 3.3849 6.92633 3.71115 6.55103C4.03739 6.17573 4.49936 5.9454 4.99543 5.91071L18.0885 4.99516C18.5845 4.96047 19.0741 5.12426 19.4494 5.45051C19.8247 5.77675 20.055 6.23873 20.0897 6.7348M3.25579 7.91194L3.90976 17.2641C3.94445 17.7602 4.17478 18.2221 4.55008 18.5484C4.92538 18.8746 5.41492 19.0384 5.91099 19.0037L19.004 18.0882C19.5001 18.0535 19.9621 17.8232 20.2883 17.4479C20.6145 17.0726 20.7783 16.583 20.7437 16.087L20.0897 6.7348M3.25579 7.91194L12.0651 12.9347L20.0897 6.7348" stroke="currentColor" stroke-width="1.49625" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_36855_127259">
<rect x="0.75" y="0.75" width="22.5" height="22.5" rx="2.25" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

14
packages/twenty-ui/src/display/icon/assets/illustration-map.svg Normal file
View File

@ -0,0 +1,14 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_39400_7686)">
<rect x="0.75" y="0.75" width="22.5" height="22.5" rx="2.25" fill="none"/>
<path d="M3.25625 7.91258L8.67136 4.71455L14.4788 7.12782L19.894 3.92979L20.7441 16.0876L15.329 19.2856L9.52151 16.8724L4.10641 20.0704L3.25625 7.91258Z" />
<path d="M8.67136 4.71455L9.52151 16.8724L8.67136 4.71455Z" fill="#E8EFFD"/>
<path d="M14.4788 7.12782L15.329 19.2856L14.4788 7.12782Z" fill="#E8EFFD"/>
<path d="M8.67136 4.71455L3.25625 7.91258L4.10641 20.0704L9.52151 16.8724M8.67136 4.71455L14.4788 7.12782M8.67136 4.71455L9.52151 16.8724M14.4788 7.12782L19.894 3.92979L20.7441 16.0876L15.329 19.2856M14.4788 7.12782L15.329 19.2856M15.329 19.2856L9.52151 16.8724" stroke="currentColor" stroke-width="1.49625" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_39400_7686">
<rect x="0.75" y="0.75" width="22.5" height="22.5" rx="2.25" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

14
packages/twenty-ui/src/display/icon/assets/illustration-numbers.svg Normal file
View File

@ -0,0 +1,14 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentFill" xmlns="http://www.w3.org/2000/svg">
<rect width="24" height="24" rx="3" fill="none"/>
<g clip-path="url(#clip0_36855_127138)">
<rect x="0.75" y="0.75" width="22.5" height="22.5" rx="2.25" fill="none"/>
<path d="M15.4792 7.99748C15.4098 7.00534 14.9491 6.08139 14.1985 5.4289C13.4479 4.77641 12.4688 4.44882 11.4767 4.5182C10.4846 4.58758 9.56062 5.04824 8.90813 5.79884C8.25564 6.54945 7.92805 7.52851 7.99743 8.52065L8.06282 9.45587C8.1322 10.448 8.59286 11.3719 9.34347 12.0244C10.0941 12.6769 11.0731 13.0045 12.0653 12.9351C13.0574 12.8658 13.9814 12.4051 14.6338 11.6545C15.2863 10.9039 15.6139 9.92483 15.5446 8.93269" fill="#E8EFFD"/>
<path d="M8.5206 16.0024C8.58998 16.9945 9.05064 17.9185 9.80124 18.571C10.5518 19.2234 11.5309 19.551 12.5231 19.4817C13.5152 19.4123 14.4391 18.9516 15.0916 18.201C15.7441 17.4504 16.0717 16.4713 16.0023 15.4792L15.4792 7.99748" fill="none"/>
<path d="M15.5446 8.93269C15.6139 9.92483 15.2863 10.9039 14.6338 11.6545C13.9814 12.4051 13.0574 12.8658 12.0653 12.9351C11.0731 13.0045 10.0941 12.6769 9.34347 12.0244C8.59286 11.3719 8.1322 10.448 8.06282 9.45587L7.99743 8.52065C7.92805 7.52851 8.25564 6.54945 8.90813 5.79884C9.56062 5.04824 10.4846 4.58758 11.4767 4.5182C12.4688 4.44882 13.4479 4.77641 14.1985 5.4289C14.9491 6.08139 15.4098 7.00534 15.4792 7.99748L16.0023 15.4792C16.0717 16.4713 15.7441 17.4504 15.0916 18.201C14.4391 18.9516 13.5152 19.4123 12.5231 19.4817C11.5309 19.551 10.5518 19.2234 9.80124 18.571C9.05064 17.9185 8.58998 16.9945 8.5206 16.0024" stroke="currentColor" stroke-width="1.49625" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_36855_127138">
<rect x="0.75" y="0.75" width="22.5" height="22.5" rx="2.25" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

8
packages/twenty-ui/src/display/icon/assets/illustration-one-to-many.svg Normal file
View File

@ -0,0 +1,8 @@
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.75628 7.91194C3.72159 7.41587 3.88539 6.92633 4.21163 6.55103C4.53788 6.17573 4.99985 5.9454 5.49592 5.91071L18.5889 4.99516C19.085 4.96047 19.5746 5.12426 19.9499 5.45051C20.3252 5.77675 20.5555 6.23873 20.5902 6.7348L21.2441 16.087C21.2788 16.583 21.115 17.0726 20.7888 17.4479C20.4625 17.8232 20.0006 18.0535 19.5045 18.0882L6.41147 19.0037C5.9154 19.0384 5.42587 18.8746 5.05057 18.5484C4.67527 18.2221 4.44494 17.7602 4.41025 17.2641L3.75628 7.91194Z" fill="#E8EFFD"/>
<path d="M7.69334 10.456L8.62855 10.3906L8.89014 14.1315" fill="#E8EFFD"/>
<path d="M14.5014 13.7391L14.2399 9.99822L17.3071 13.5429L17.0455 9.80203" fill="#E8EFFD"/>
<path d="M11.4669 10.662L11.4676 10.6714L11.4669 10.662Z" fill="#E8EFFD"/>
<path d="M11.6631 13.4677L11.6637 13.477L11.6631 13.4677Z" fill="#E8EFFD"/>
<path d="M7.69334 10.456L8.62855 10.3906L8.89014 14.1315M14.5014 13.7391L14.2399 9.99822L17.3071 13.5429L17.0455 9.80203M11.4669 10.662L11.4676 10.6714M11.6631 13.4677L11.6637 13.477M3.75628 7.91194C3.72159 7.41587 3.88539 6.92633 4.21163 6.55103C4.53788 6.17573 4.99985 5.9454 5.49592 5.91071L18.5889 4.99516C19.085 4.96047 19.5746 5.12426 19.9499 5.45051C20.3252 5.77675 20.5555 6.23873 20.5902 6.7348L21.2441 16.087C21.2788 16.583 21.115 17.0726 20.7888 17.4479C20.4625 17.8232 20.0006 18.0535 19.5045 18.0882L6.41147 19.0037C5.9154 19.0384 5.42587 18.8746 5.05057 18.5484C4.67527 18.2221 4.44494 17.7602 4.41025 17.2641L3.75628 7.91194Z" stroke="currentColor" stroke-width="1.49625" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

12
packages/twenty-ui/src/display/icon/assets/illustration-phone.svg Normal file
View File

@ -0,0 +1,12 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="24" height="24" rx="3" fill="none"/>
<g clip-path="url(#clip0_36855_127302)">
<rect x="0.75" y="0.75" width="22.5" height="22.5" rx="2.25" fill="none"/>
<path d="M4.93049 4.97614L8.67136 4.71455L10.8688 9.25984L8.62883 10.8262C9.77242 12.787 11.531 14.3157 13.6319 15.1753L14.8712 12.7391L19.6781 14.2826L19.9397 18.0234C19.9744 18.5195 19.8106 19.009 19.4843 19.3843C19.1581 19.7596 18.6961 19.99 18.2 20.0247C14.5365 20.0581 10.9874 18.7495 8.2224 16.3459C5.45738 13.9423 3.66764 10.6099 3.19085 6.97737C3.15616 6.4813 3.31996 5.99176 3.6462 5.61646C3.97245 5.24116 4.43442 5.01083 4.93049 4.97614Z" fill="currentFill" stroke="currentColor" stroke-width="1.49625" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_36855_127302">
<rect x="0.75" y="0.75" width="22.5" height="22.5" rx="2.25" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 974 B

6
packages/twenty-ui/src/display/icon/assets/illustration-setting.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.38754 12.4777C5.42223 11.9816 5.65256 11.5196 6.02786 11.1934C6.40316 10.8671 6.89269 10.7033 7.38876 10.738L16.7409 11.392C17.237 11.4267 17.699 11.657 18.0252 12.0323C18.3515 12.4076 18.5153 12.8971 18.4806 13.3932L18.0882 19.0045C18.0535 19.5006 17.8232 19.9625 17.4479 20.2888C17.0726 20.615 16.583 20.7788 16.087 20.7441L6.7348 20.0902C6.23873 20.0555 5.77675 19.8252 5.45051 19.4499C5.12426 19.0746 4.96047 18.585 4.99516 18.0889L5.38754 12.4777Z" fill="#E8EFFD"/>
<path d="M10.8026 15.6757C10.7853 15.9237 10.8672 16.1685 11.0303 16.3561C11.1934 16.5438 11.4244 16.6589 11.6725 16.6763C11.9205 16.6936 12.1653 16.6117 12.3529 16.4486C12.5406 16.2855 12.6557 16.0545 12.6731 15.8065C12.6904 15.5584 12.6085 15.3137 12.4454 15.126C12.2823 14.9384 12.0513 14.8232 11.8033 14.8059C11.5552 14.7885 11.3105 14.8704 11.1228 15.0335C10.9352 15.1967 10.82 15.4276 10.8026 15.6757Z" fill="currentFill"/>
<path d="M8.32398 10.8034L8.58557 7.06254C8.65494 6.0704 9.1156 5.14646 9.86621 4.49397C10.6168 3.84148 11.5959 3.51389 12.588 3.58327C13.5802 3.65264 14.5041 4.1133 15.1566 4.86391C15.8091 5.61451 16.1367 6.59358 16.0673 7.58572L15.8057 11.3266" fill="#E8EFFD"/>
<path d="M8.32398 10.8034L8.58557 7.06254C8.65494 6.0704 9.1156 5.14646 9.86621 4.49397C10.6168 3.84148 11.5959 3.51389 12.588 3.58327C13.5802 3.65264 14.5041 4.1133 15.1566 4.86391C15.8091 5.61451 16.1367 6.59358 16.0673 7.58572L15.8057 11.3266M5.38754 12.4777C5.42223 11.9816 5.65256 11.5196 6.02786 11.1934C6.40316 10.8671 6.89269 10.7033 7.38876 10.738L16.7409 11.392C17.237 11.4267 17.699 11.657 18.0252 12.0323C18.3515 12.4076 18.5153 12.8971 18.4806 13.3932L18.0882 19.0045C18.0535 19.5006 17.8232 19.9625 17.4479 20.2888C17.0726 20.615 16.583 20.7788 16.087 20.7441L6.7348 20.0902C6.23873 20.0555 5.77675 19.8252 5.45051 19.4499C5.12426 19.0746 4.96047 18.585 4.99516 18.0889L5.38754 12.4777ZM10.8026 15.6757C10.7853 15.9237 10.8672 16.1685 11.0303 16.3561C11.1934 16.5438 11.4244 16.6589 11.6725 16.6763C11.9205 16.6936 12.1653 16.6117 12.3529 16.4486C12.5406 16.2855 12.6557 16.0545 12.6731 15.8065C12.6904 15.5584 12.6085 15.3137 12.4454 15.126C12.2823 14.9384 12.0513 14.8232 11.8033 14.8059C11.5552 14.7885 11.3105 14.8704 11.1228 15.0335C10.9352 15.1967 10.82 15.4276 10.8026 15.6757Z" stroke="currentColor" stroke-width="1.49625" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

10
packages/twenty-ui/src/display/icon/assets/illustration-star.svg Normal file
View File

@ -0,0 +1,10 @@
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_39321_100605)">
<path d="M10.6518 4.4387C11.0177 3.18817 12.7418 3.06761 13.2782 4.25504L15.0487 8.17475C15.2173 8.54805 15.5406 8.82907 15.9337 8.9441L20.0617 10.1519C21.3122 10.5177 21.4328 12.2418 20.2453 12.7782L16.3256 14.5487C15.9523 14.7173 15.6713 15.0406 15.5563 15.4337L14.3485 19.5617C13.9826 20.8122 12.2585 20.9328 11.7222 19.7454L9.95166 15.8257C9.78304 15.4524 9.45976 15.1713 9.06662 15.0563L4.93866 13.8485C3.68814 13.4827 3.56757 11.7586 4.75501 11.2222L8.67471 9.4517C9.04801 9.28308 9.32903 8.9598 9.44406 8.56666L10.6518 4.4387Z" fill="currentFill" stroke="currentColor" stroke-width="1.5"/>
</g>
<defs>
<clipPath id="clip0_39321_100605">
<rect width="20.6124" height="20.6124" fill="white" transform="translate(1.5 2.43799) rotate(-4)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 908 B

6
packages/twenty-ui/src/display/icon/assets/illustration-tag.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.06327 9.89091C9.57978 9.85479 9.96921 9.4068 9.93309 8.8903C9.89697 8.37379 9.44898 7.98436 8.93248 8.02048C8.41597 8.05659 8.02654 8.50458 8.06266 9.02109C8.09878 9.53759 8.54677 9.92703 9.06327 9.89091Z" fill="currentFill"/>
<path d="M4.69131 7.84715L4.94367 11.4562C4.97879 11.9584 5.21167 12.4261 5.5919 12.7566L13.7129 19.8161C13.901 19.9796 14.1196 20.1046 14.356 20.1837C14.5925 20.2628 14.8422 20.2946 15.0909 20.2772C15.3396 20.2598 15.5825 20.1936 15.8056 20.0823C16.0287 19.9711 16.2278 19.8169 16.3913 19.6288L20.596 14.7918C20.7596 14.6036 20.8846 14.3851 20.9637 14.1487C21.0428 13.9122 21.0746 13.6625 21.0572 13.4138C21.0398 13.1651 20.9736 12.9222 20.8623 12.6991C20.7511 12.4759 20.5969 12.2769 20.4088 12.1133L12.2868 5.05395C11.9071 4.72385 11.4117 4.55804 10.9098 4.59295L7.30077 4.84531C6.55666 4.89735 5.8637 5.24284 5.37434 5.8058C4.88497 6.36875 4.63927 7.10305 4.69131 7.84715Z" fill="currentFill"/>
<path d="M9.06327 9.89091C9.57978 9.85479 9.96921 9.4068 9.93309 8.8903C9.89697 8.37379 9.44898 7.98436 8.93248 8.02048C8.41597 8.05659 8.02654 8.50458 8.06266 9.02109C8.09878 9.53759 8.54677 9.92703 9.06327 9.89091Z" stroke="currentColor" stroke-width="1.49625" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4.69131 7.84715L4.94367 11.4562C4.97879 11.9584 5.21167 12.4261 5.5919 12.7566L13.7129 19.8161C13.901 19.9796 14.1196 20.1046 14.356 20.1837C14.5925 20.2628 14.8422 20.2946 15.0909 20.2772C15.3396 20.2598 15.5825 20.1936 15.8056 20.0823C16.0287 19.9711 16.2278 19.8169 16.3913 19.6288L20.596 14.7918C20.7596 14.6036 20.8846 14.3851 20.9637 14.1487C21.0428 13.9122 21.0746 13.6625 21.0572 13.4138C21.0398 13.1651 20.9736 12.9222 20.8623 12.6991C20.7511 12.4759 20.5969 12.2769 20.4088 12.1133L12.2868 5.05395C11.9071 4.72385 11.4117 4.55804 10.9098 4.59295L7.30077 4.84531C6.55666 4.89735 5.8637 5.24284 5.37434 5.8058C4.88497 6.36875 4.63927 7.10305 4.69131 7.84715Z" stroke="currentColor" stroke-width="1.49625" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

6
packages/twenty-ui/src/display/icon/assets/illustration-tags.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.23485 6.65934L5.58444 6.84467C5.08217 6.87979 4.61443 7.113 4.2841 7.493C3.95378 7.87299 3.78794 8.36864 3.82306 8.87091L4.00839 11.5213C4.04351 12.0235 4.27639 12.4912 4.65662 12.8218L10.7764 18.1416C10.9645 18.3052 11.1831 18.4301 11.4195 18.5092C11.656 18.5883 11.9057 18.6201 12.1544 18.6027C12.4031 18.5853 12.646 18.5191 12.8691 18.4079C13.0922 18.2966 13.2913 18.1425 13.4548 17.9543L15.9199 15.1185C16.0835 14.9304 16.2084 14.7118 16.2875 14.4754C16.3667 14.239 16.3984 13.9892 16.381 13.7405C16.3636 13.4918 16.2974 13.2489 16.1862 13.0258C16.0749 12.8027 15.9208 12.6037 15.7326 12.4401L9.61192 7.12034C9.23213 6.79024 8.73683 6.62443 8.23485 6.65934Z" fill="#E8EFFD"/>
<path d="M18.1301 17.6281L20.5952 14.7923C20.7587 14.6042 20.8837 14.3856 20.9628 14.1492C21.0419 13.9127 21.0737 13.663 21.0563 13.4143C21.0389 13.1656 20.9727 12.9227 20.8614 12.6996C20.7502 12.4765 20.596 12.2774 20.4079 12.1139L13.2866 5.9243" fill="none"/>
<path d="M6.69086 9.58667L6.68151 9.58732L6.69086 9.58667Z" fill="#E8EFFD"/>
<path d="M18.1301 17.6281L20.5952 14.7923C20.7587 14.6042 20.8837 14.3856 20.9628 14.1492C21.0419 13.9127 21.0737 13.663 21.0563 13.4143C21.0389 13.1656 20.9727 12.9227 20.8614 12.6996C20.7502 12.4765 20.596 12.2774 20.4079 12.1139L13.2866 5.9243M6.69086 9.58667L6.68151 9.58732M8.23485 6.65934L5.58444 6.84467C5.08217 6.87979 4.61443 7.113 4.2841 7.493C3.95378 7.87299 3.78794 8.36864 3.82306 8.87091L4.00839 11.5213C4.04351 12.0235 4.27639 12.4912 4.65662 12.8218L10.7764 18.1416C10.9645 18.3052 11.1831 18.4301 11.4195 18.5092C11.656 18.5883 11.9057 18.6201 12.1544 18.6027C12.4031 18.5853 12.646 18.5191 12.8691 18.4079C13.0922 18.2966 13.2913 18.1425 13.4548 17.9543L15.9199 15.1185C16.0835 14.9304 16.2084 14.7118 16.2875 14.4754C16.3667 14.239 16.3984 13.9892 16.381 13.7405C16.3636 13.4918 16.2974 13.2489 16.1862 13.0258C16.0749 12.8027 15.9208 12.6037 15.7326 12.4401L9.61192 7.12034C9.23213 6.79024 8.73683 6.62443 8.23485 6.65934Z" stroke="currentColor" stroke-width="1.49625" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

17
packages/twenty-ui/src/display/icon/assets/illustration-text.svg Normal file
View File

@ -0,0 +1,17 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="24" height="24" rx="3" fill="none"/>
<g clip-path="url(#clip0_36855_127272)">
<rect x="0.75" y="0.75" width="22.5" height="22.5" rx="2.25" fill="none"/>
<path d="M3.75727 18.6752L6.55436 18.9691L3.75727 18.6752Z" fill="#E8EFFD"/>
<path d="M13.0809 19.6551L19.6075 20.3411L13.0809 19.6551Z" fill="#E8EFFD"/>
<path d="M6.94965 14.2974L13.383 14.9735L6.94965 14.2974Z" fill="#E8EFFD"/>
<path d="M10.8797 6.50999L14.9448 19.8518L10.8797 6.50999Z" fill="#E8EFFD"/>
<path d="M4.68963 18.7731L11.8517 4.44329L13.7165 4.63928L18.6751 20.2431" fill="none"/>
<path d="M3.75727 18.6752L6.55436 18.9691M13.0809 19.6551L19.6075 20.3411M6.94965 14.2974L13.383 14.9735M10.8797 6.50999L14.9448 19.8518M4.68963 18.7731L11.8517 4.44329L13.7165 4.63928L18.6751 20.2431" stroke="currentColor" stroke-width="1.49625" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_36855_127272">
<rect x="0.75" y="0.75" width="22.5" height="22.5" rx="2.25" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

13
packages/twenty-ui/src/display/icon/assets/illustration-toggle.svg Normal file
View File

@ -0,0 +1,13 @@
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_39321_100602)">
<path d="M14.3703 11.869C14.405 12.3651 14.6354 12.8271 15.0107 13.1533C15.386 13.4796 15.8755 13.6433 16.3716 13.6087C16.8676 13.574 17.3296 13.3436 17.6559 12.9683C17.9821 12.593 18.1459 12.1035 18.1112 11.6074C18.0765 11.1114 17.8462 10.6494 17.4709 10.3231C17.0956 9.9969 16.6061 9.8331 16.11 9.86779C15.6139 9.90248 15.1519 10.1328 14.8257 10.5081C14.4995 10.8834 14.3357 11.3729 14.3703 11.869Z" fill="currentFill"/>
<path d="M3.14775 12.6538C3.04369 11.1656 3.53507 9.69697 4.51381 8.57107C5.49255 7.44516 6.87846 6.75417 8.36667 6.6501L15.8484 6.12693C17.3366 6.02286 18.8052 6.51425 19.9311 7.49298C21.057 8.47172 21.748 9.85764 21.8521 11.3458C21.9561 12.8341 21.4648 14.3026 20.486 15.4286C19.5073 16.5545 18.1214 17.2455 16.6332 17.3495L9.15143 17.8727C7.66322 17.9768 6.19463 17.4854 5.06872 16.5066C3.94281 15.5279 3.25182 14.142 3.14775 12.6538Z" fill="currentFill"/>
<path d="M14.3703 11.869C14.405 12.3651 14.6354 12.8271 15.0107 13.1533C15.386 13.4796 15.8755 13.6433 16.3716 13.6087C16.8676 13.574 17.3296 13.3436 17.6559 12.9683C17.9821 12.593 18.1459 12.1035 18.1112 11.6074C18.0765 11.1114 17.8462 10.6494 17.4709 10.3231C17.0956 9.9969 16.6061 9.8331 16.11 9.86779C15.6139 9.90248 15.1519 10.1328 14.8257 10.5081C14.4995 10.8834 14.3357 11.3729 14.3703 11.869Z" stroke="currentColor" stroke-width="1.49625" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3.14775 12.6538C3.04369 11.1656 3.53507 9.69697 4.51381 8.57107C5.49255 7.44516 6.87846 6.75417 8.36667 6.6501L15.8484 6.12693C17.3366 6.02286 18.8052 6.51425 19.9311 7.49298C21.057 8.47172 21.748 9.85764 21.8521 11.3458C21.9561 12.8341 21.4648 14.3026 20.486 15.4286C19.5073 16.5545 18.1214 17.2455 16.6332 17.3495L9.15143 17.8727C7.66322 17.9768 6.19463 17.4854 5.06872 16.5066C3.94281 15.5279 3.25182 14.142 3.14775 12.6538Z" stroke="currentColor" stroke-width="1.49625" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
</g>
<defs>
<clipPath id="clip0_39321_100602">
<rect x="1.25" y="0.75" width="22.5" height="22.5" rx="2.25" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

8
packages/twenty-ui/src/display/icon/assets/illustration-uid.svg Normal file
View File

@ -0,0 +1,8 @@
<svg width="25" height="26" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.50317 7.59525C4.56818 6.85217 4.92571 6.16535 5.49712 5.68588C6.06853 5.20641 6.80701 4.97357 7.55009 5.03858L18.7573 6.01908C19.5004 6.0841 20.1872 6.44163 20.6667 7.01304C21.1461 7.58445 21.379 8.32292 21.314 9.06601L20.4969 18.4053C20.4319 19.1484 20.0743 19.8352 19.5029 20.3147C18.9315 20.7942 18.193 21.027 17.4499 20.962L6.24275 19.9815C5.49967 19.9165 4.81285 19.559 4.33338 18.9875C3.85391 18.4161 3.62107 17.6777 3.68608 16.9346L4.50317 7.59525Z" fill="currentFill"/>
<path d="M7.99377 10.7239C7.95043 11.2193 8.10566 11.7116 8.4253 12.0925C8.74495 12.4735 9.20283 12.7118 9.69822 12.7552C10.1936 12.7985 10.6859 12.6433 11.0669 12.3236C11.4478 12.004 11.6862 11.5461 11.7295 11.0507C11.7728 10.5553 11.6176 10.063 11.298 9.68208C10.9783 9.30114 10.5204 9.06278 10.0251 9.01944C9.52966 8.9761 9.03735 9.13132 8.65641 9.45097C8.27547 9.77062 8.03711 10.2285 7.99377 10.7239Z" fill="currentFill"/>
<path d="M15.6286 9.50969L17.4965 9.67311L15.6286 9.50969Z" fill="#E8EFFD"/>
<path d="M15.3018 13.2454L17.1697 13.4088L15.3018 13.2454Z" fill="#E8EFFD"/>
<path d="M7.50352 16.3275L16.8428 17.1446L7.50352 16.3275Z" fill="#E8EFFD"/>
<path d="M15.6286 9.50969L17.4965 9.67311M15.3018 13.2454L17.1697 13.4088M7.50352 16.3275L16.8428 17.1446M4.50317 7.59525C4.56818 6.85217 4.92571 6.16535 5.49712 5.68588C6.06853 5.20641 6.80701 4.97357 7.55009 5.03858L18.7573 6.01908C19.5004 6.0841 20.1872 6.44163 20.6667 7.01304C21.1461 7.58445 21.379 8.32292 21.314 9.06601L20.4969 18.4053C20.4319 19.1484 20.0743 19.8352 19.5029 20.3147C18.9315 20.7942 18.193 21.027 17.4499 20.962L6.24275 19.9815C5.49967 19.9165 4.81285 19.559 4.33338 18.9875C3.85391 18.4161 3.62107 17.6777 3.68608 16.9346L4.50317 7.59525ZM7.99377 10.7239C7.95043 11.2193 8.10566 11.7116 8.4253 12.0925C8.74495 12.4735 9.20283 12.7118 9.69822 12.7552C10.1936 12.7985 10.6859 12.6433 11.0669 12.3236C11.4478 12.004 11.6862 11.5461 11.7295 11.0507C11.7728 10.5553 11.6176 10.063 11.298 9.68208C10.9783 9.30114 10.5204 9.06278 10.0251 9.01944C9.52966 8.9761 9.03735 9.13132 8.65641 9.45097C8.27547 9.77062 8.03711 10.2285 7.99377 10.7239Z" stroke="currentColor" stroke-width="1.49625" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

6
packages/twenty-ui/src/display/icon/assets/illustration-user.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.08295 12.5883C4.16025 13.6937 4.45449 14.7729 4.94889 15.7646C5.44329 16.7562 6.12816 17.6407 6.9644 18.3676C7.80064 19.0946 8.77187 19.6497 9.82264 20.0012C10.8734 20.3528 11.9831 20.494 13.0885 20.4167C14.1938 20.3394 15.2731 20.0452 16.2647 19.5508C17.2563 19.0564 18.1408 18.3715 18.8678 17.5353C19.5947 16.699 20.1498 15.7278 20.5014 14.677C20.853 13.6263 20.9941 12.5165 20.9168 11.4112C20.8396 10.3059 20.5453 9.22658 20.0509 8.23497C19.5565 7.24336 18.8716 6.35883 18.0354 5.6319C17.1992 4.90497 16.2279 4.34987 15.1772 3.99828C14.1264 3.6467 13.0167 3.50552 11.9113 3.58282C10.806 3.66011 9.72672 3.95435 8.73511 4.44875C7.74349 4.94315 6.85897 5.62803 6.13204 6.46427C5.40511 7.3005 4.85 8.27174 4.49842 9.32251C4.14684 10.3733 4.00566 11.483 4.08295 12.5883Z" fill="none"/>
<path d="M9.56346 10.3255C9.61549 11.0696 9.96099 11.7626 10.5239 12.252C11.0869 12.7413 11.8212 12.987 12.5653 12.935C13.3094 12.8829 14.0024 12.5375 14.4917 11.9745C14.9811 11.4115 15.2268 10.6772 15.1748 9.93314C15.1227 9.18904 14.7772 8.49608 14.2143 8.00671C13.6513 7.51734 12.917 7.27165 12.1729 7.32368C11.4288 7.37571 10.7359 7.72121 10.2465 8.28416C9.75712 8.84712 9.51143 9.58142 9.56346 10.3255Z" fill="#E8EFFD"/>
<path d="M7.49359 18.7865C7.6712 17.9999 8.09763 17.2915 8.70962 16.7664C9.32162 16.2413 10.0866 15.9274 10.891 15.8714L14.6319 15.6098C15.4373 15.5532 16.2395 15.7581 16.9192 16.194C17.5989 16.6299 18.1197 17.2735 18.4042 18.0291" fill="currentFill"/>
<path d="M7.49359 18.7865C7.6712 17.9999 8.09763 17.2915 8.70962 16.7664C9.32162 16.2413 10.0866 15.9274 10.891 15.8714L14.6319 15.6098C15.4373 15.5532 16.2395 15.7581 16.9192 16.194C17.5989 16.6299 18.1197 17.2735 18.4042 18.0291M4.08295 12.5883C4.16025 13.6937 4.45449 14.7729 4.94889 15.7646C5.44329 16.7562 6.12816 17.6407 6.9644 18.3676C7.80064 19.0946 8.77187 19.6497 9.82264 20.0012C10.8734 20.3528 11.9831 20.494 13.0885 20.4167C14.1938 20.3394 15.2731 20.0452 16.2647 19.5508C17.2563 19.0564 18.1408 18.3715 18.8678 17.5353C19.5947 16.699 20.1498 15.7278 20.5014 14.677C20.853 13.6263 20.9941 12.5165 20.9168 11.4112C20.8396 10.3059 20.5453 9.22658 20.0509 8.23497C19.5565 7.24336 18.8716 6.35883 18.0354 5.6319C17.1992 4.90497 16.2279 4.34987 15.1772 3.99828C14.1264 3.6467 13.0167 3.50552 11.9113 3.58282C10.806 3.66011 9.72672 3.95435 8.73511 4.44875C7.7435 4.94315 6.85897 5.62803 6.13204 6.46427C5.40511 7.3005 4.85 8.27174 4.49842 9.32251C4.14684 10.3733 4.00566 11.483 4.08295 12.5883ZM9.56346 10.3255C9.61549 11.0696 9.96099 11.7626 10.5239 12.252C11.0869 12.7413 11.8212 12.987 12.5653 12.935C13.3094 12.8829 14.0024 12.5375 14.4917 11.9745C14.9811 11.4115 15.2268 10.6772 15.1748 9.93314C15.1227 9.18904 14.7772 8.49608 14.2143 8.00671C13.6513 7.51734 12.917 7.27165 12.1729 7.32368C11.4288 7.37571 10.7359 7.72121 10.2465 8.28416C9.75712 8.84712 9.51143 9.58142 9.56346 10.3255Z" stroke="currentColor" stroke-width="1.49625" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

23
packages/twenty-ui/src/display/icon/components/IllustrationIconCalendarEvent.tsx Normal file
View File

@ -0,0 +1,23 @@
import { useTheme } from '@emotion/react';
import IllustrationIconCalendarEventRaw from '@ui/display/icon/assets/illustration-calendar-event.svg?react';
import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
type IllustrationIconCalendarEventProps = Pick<IconComponentProps, 'size'>;
export const IllustrationIconCalendarEvent = (
props: IllustrationIconCalendarEventProps,
) => {
const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
const { color, fill } = theme.IllustrationIcon;
return (
<IllustrationIconWrapper>
<IllustrationIconCalendarEventRaw
fill={fill}
color={color}
height={size}
width={size}
/>
</IllustrationIconWrapper>
);
};

24
packages/twenty-ui/src/display/icon/components/IllustrationIconCalendarTime.tsx Normal file
View File

@ -0,0 +1,24 @@
import { useTheme } from '@emotion/react';
import IllustrationIconCalendarTimeRaw from '@ui/display/icon/assets/illustration-calendar-time.svg?react';
import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
type IllustrationIconCalendarTimeProps = Pick<IconComponentProps, 'size'>;
export const IllustrationIconCalendarTime = (
props: IllustrationIconCalendarTimeProps,
) => {
const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
const { color, fill } = theme.IllustrationIcon;
return (
<IllustrationIconWrapper>
<IllustrationIconCalendarTimeRaw
height={size}
width={size}
fill={fill}
color={color}
/>
</IllustrationIconWrapper>
);
};

25
packages/twenty-ui/src/display/icon/components/IllustrationIconCurrency.tsx Normal file
View File

@ -0,0 +1,25 @@
import { useTheme } from '@emotion/react';
import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
import IllustrationIconCurrencyRaw from '@ui/display/icon/assets/illustration-currency.svg?react';
import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
type IllustrationIconCurrencyProps = Pick<IconComponentProps, 'size'>;
export const IllustrationIconCurrency = (
props: IllustrationIconCurrencyProps,
) => {
const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
const { color, fill } = theme.IllustrationIcon;
return (
<IllustrationIconWrapper>
<IllustrationIconCurrencyRaw
height={size}
width={size}
fill={fill}
color={color}
/>
</IllustrationIconWrapper>
);
};

23
packages/twenty-ui/src/display/icon/components/IllustrationIconJson.tsx Normal file
View File

@ -0,0 +1,23 @@
import { useTheme } from '@emotion/react';
import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
import IllustrationIconJsonRaw from '@ui/display/icon/assets/illustration-json.svg?react';
import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
type IllustrationIconJsonProps = Pick<IconComponentProps, 'size'>;
export const IllustrationIconJson = (props: IllustrationIconJsonProps) => {
const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
const { color, fill } = theme.IllustrationIcon;
return (
<IllustrationIconWrapper>
<IllustrationIconJsonRaw
height={size}
width={size}
fill={fill}
color={color}
/>
</IllustrationIconWrapper>
);
};

22
packages/twenty-ui/src/display/icon/components/IllustrationIconMail.tsx Normal file
View File

@ -0,0 +1,22 @@
import { useTheme } from '@emotion/react';
import IllustrationIconMailRaw from '@ui/display/icon/assets/illustration-mail.svg?react';
import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
type IllustrationIconMailProps = Pick<IconComponentProps, 'size'>;
export const IllustrationIconMail = (props: IllustrationIconMailProps) => {
const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
const { color, fill } = theme.IllustrationIcon;
return (
<IllustrationIconWrapper>
<IllustrationIconMailRaw
height={size}
width={size}
fill={fill}
color={color}
/>
</IllustrationIconWrapper>
);
};

22
packages/twenty-ui/src/display/icon/components/IllustrationIconMap.tsx Normal file
View File

@ -0,0 +1,22 @@
import { useTheme } from '@emotion/react';
import IllustrationIconMapRaw from '@ui/display/icon/assets/illustration-map.svg?react';
import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
type IllustrationIconMapProps = Pick<IconComponentProps, 'size'>;
export const IllustrationIconMap = (props: IllustrationIconMapProps) => {
const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
const { color, fill } = theme.IllustrationIcon;
return (
<IllustrationIconWrapper>
<IllustrationIconMapRaw
height={size}
width={size}
fill={fill}
color={color}
/>
</IllustrationIconWrapper>
);
};

24
packages/twenty-ui/src/display/icon/components/IllustrationIconNumbers.tsx Normal file
View File

@ -0,0 +1,24 @@
import { useTheme } from '@emotion/react';
import IllustrationIconNumbersRaw from '@ui/display/icon/assets/illustration-numbers.svg?react';
import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
type IllustrationIconNumbersProps = Pick<IconComponentProps, 'size'>;
export const IllustrationIconNumbers = (
props: IllustrationIconNumbersProps,
) => {
const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
const { color, fill } = theme.IllustrationIcon;
return (
<IllustrationIconWrapper>
<IllustrationIconNumbersRaw
height={size}
width={size}
fill={fill}
color={color}
/>
</IllustrationIconWrapper>
);
};

25
packages/twenty-ui/src/display/icon/components/IllustrationIconOneToMany.tsx Normal file
View File

@ -0,0 +1,25 @@
import { useTheme } from '@emotion/react';
import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
import IllustrationIconOneToManyRaw from '@ui/display/icon/assets/illustration-one-to-many.svg?react';
import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
type IllustrationIconOneToManyProps = Pick<IconComponentProps, 'size'>;
export const IllustrationIconOneToMany = (
props: IllustrationIconOneToManyProps,
) => {
const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
const { color, fill } = theme.IllustrationIcon;
return (
<IllustrationIconWrapper>
<IllustrationIconOneToManyRaw
height={size}
width={size}
fill={fill}
color={color}
/>
</IllustrationIconWrapper>
);
};

24
packages/twenty-ui/src/display/icon/components/IllustrationIconPhone.tsx Normal file
View File

@ -0,0 +1,24 @@
import { useTheme } from '@emotion/react';
import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
import IllustrationIconPhoneRaw from '@ui/display/icon/assets/illustration-phone.svg?react';
import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
type IllustrationIconPhoneProps = Pick<IconComponentProps, 'size'>;
export const IllustrationIconPhone = (props: IllustrationIconPhoneProps) => {
const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
const { color, fill } = theme.IllustrationIcon;
return (
<IllustrationIconWrapper>
<IllustrationIconPhoneRaw
height={size}
width={size}
fill={fill}
color={color}
/>
</IllustrationIconWrapper>
);
};

26
packages/twenty-ui/src/display/icon/components/IllustrationIconSetting.tsx Normal file
View File

@ -0,0 +1,26 @@
import { useTheme } from '@emotion/react';
import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
import IllustrationIconSettingRaw from '@ui/display/icon/assets/illustration-setting.svg?react';
import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
type IllustrationIconSettingProps = Pick<IconComponentProps, 'size'>;
export const IllustrationIconSetting = (
props: IllustrationIconSettingProps,
) => {
const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
const { color, fill } = theme.IllustrationIcon;
return (
<IllustrationIconWrapper>
<IllustrationIconSettingRaw
height={size}
width={size}
fill={fill}
color={color}
/>
</IllustrationIconWrapper>
);
};

24
packages/twenty-ui/src/display/icon/components/IllustrationIconStar.tsx Normal file
View File

@ -0,0 +1,24 @@
import { useTheme } from '@emotion/react';
import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
import IllustrationIconStarRaw from '@ui/display/icon/assets/illustration-star.svg?react';
import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
type IllustrationIconStarProps = Pick<IconComponentProps, 'size'>;
export const IllustrationIconStar = (props: IllustrationIconStarProps) => {
const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
const { color, fill } = theme.IllustrationIcon;
return (
<IllustrationIconWrapper>
<IllustrationIconStarRaw
height={size}
width={size}
fill={fill}
color={color}
/>
</IllustrationIconWrapper>
);
};

23
packages/twenty-ui/src/display/icon/components/IllustrationIconTag.tsx Normal file
View File

@ -0,0 +1,23 @@
import { useTheme } from '@emotion/react';
import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
import IllustrationIconTagRaw from '@ui/display/icon/assets/illustration-tag.svg?react';
import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
type IllustrationIconTagProps = Pick<IconComponentProps, 'size'>;
export const IllustrationIconTag = (props: IllustrationIconTagProps) => {
const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
const { color, fill } = theme.IllustrationIcon;
return (
<IllustrationIconWrapper>
<IllustrationIconTagRaw
height={size}
width={size}
fill={fill}
color={color}
/>
</IllustrationIconWrapper>
);
};

23
packages/twenty-ui/src/display/icon/components/IllustrationIconTags.tsx Normal file
View File

@ -0,0 +1,23 @@
import { useTheme } from '@emotion/react';
import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
import IllustrationIconTagsRaw from '@ui/display/icon/assets/illustration-tags.svg?react';
import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
type IllustrationIconTagsProps = Pick<IconComponentProps, 'size'>;
export const IllustrationIconTags = (props: IllustrationIconTagsProps) => {
const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
const { color, fill } = theme.IllustrationIcon;
return (
<IllustrationIconWrapper>
<IllustrationIconTagsRaw
height={size}
width={size}
fill={fill}
color={color}
/>
</IllustrationIconWrapper>
);
};

23
packages/twenty-ui/src/display/icon/components/IllustrationIconText.tsx Normal file
View File

@ -0,0 +1,23 @@
import { useTheme } from '@emotion/react';
import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
import IllustrationIconTextRaw from '@ui/display/icon/assets/illustration-text.svg?react';
import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
type IllustrationIconTextProps = Pick<IconComponentProps, 'size'>;
export const IllustrationIconText = (props: IllustrationIconTextProps) => {
const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
const { color, fill } = theme.IllustrationIcon;
return (
<IllustrationIconWrapper>
<IllustrationIconTextRaw
height={size}
width={size}
fill={fill}
color={color}
/>
</IllustrationIconWrapper>
);
};

23
packages/twenty-ui/src/display/icon/components/IllustrationIconToggle.tsx Normal file
View File

@ -0,0 +1,23 @@
import { useTheme } from '@emotion/react';
import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
import IllustrationIconToggleRaw from '@ui/display/icon/assets/illustration-toggle.svg?react';
import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
type IllustrationIconToggleProps = Pick<IconComponentProps, 'size'>;
export const IllustrationIconToggle = (props: IllustrationIconToggleProps) => {
const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
const { color, fill } = theme.IllustrationIcon;
return (
<IllustrationIconWrapper>
<IllustrationIconToggleRaw
height={size}
width={size}
fill={fill}
color={color}
/>
</IllustrationIconWrapper>
);
};

23
packages/twenty-ui/src/display/icon/components/IllustrationIconUid.tsx Normal file
View File

@ -0,0 +1,23 @@
import { useTheme } from '@emotion/react';
import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
import IllustrationIconUidRaw from '@ui/display/icon/assets/illustration-uid.svg?react';
import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
type IllustrationIconUidProps = Pick<IconComponentProps, 'size'>;
export const IllustrationIconUid = (props: IllustrationIconUidProps) => {
const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
const { color, fill } = theme.IllustrationIcon;
return (
<IllustrationIconWrapper>
<IllustrationIconUidRaw
height={size}
width={size}
fill={fill}
color={color}
/>
</IllustrationIconWrapper>
);
};

23
packages/twenty-ui/src/display/icon/components/IllustrationIconUser.tsx Normal file
View File

@ -0,0 +1,23 @@
import { useTheme } from '@emotion/react';
import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
import IllustrationIconUserRaw from '@ui/display/icon/assets/illustration-user.svg?react';
import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
type IllustrationIconUserProps = Pick<IconComponentProps, 'size'>;
export const IllustrationIconUser = (props: IllustrationIconUserProps) => {
const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
const { color, fill } = theme.IllustrationIcon;
return (
<IllustrationIconWrapper>
<IllustrationIconUserRaw
height={size}
width={size}
fill={fill}
color={color}
/>
</IllustrationIconWrapper>
);
};

13
packages/twenty-ui/src/display/icon/components/IllustrationIconWrapper.tsx Normal file
View File

@ -0,0 +1,13 @@
import styled from '@emotion/styled';
const StyledRectangleIllustrationIcon = styled('div')`
background-color: ${({ theme }) => theme.background.primary};
border: solid ${({ theme }) => theme.border.color.medium};
border-radius: ${({ theme }) => theme.border.radius.sm};
display: flex;
justify-content: center;
size: auto;
box-sizing: content-box;
`;
export const IllustrationIconWrapper = StyledRectangleIllustrationIcon;

23
packages/twenty-ui/src/display/icon/components/llustrationIconLink.tsx Normal file
View File

@ -0,0 +1,23 @@
import { useTheme } from '@emotion/react';
import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
import IllustrationIconLinkRaw from '@ui/display/icon/assets/illustration-link.svg?react';
import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
type IllustrationIconLinkProps = Pick<IconComponentProps, 'size'>;
export const IllustrationIconLink = (props: IllustrationIconLinkProps) => {
const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
const { color, fill } = theme.IllustrationIcon;
return (
<IllustrationIconWrapper>
<IllustrationIconLinkRaw
height={size}
width={size}
fill={fill}
color={color}
/>
</IllustrationIconWrapper>
);
};

19
packages/twenty-ui/src/display/index.ts
View File

@ -18,6 +18,25 @@ export * from './icon/components/IconMicrosoft';
export * from './icon/components/IconRelationManyToOne';
export * from './icon/components/IconTwentyStar';
export * from './icon/components/IconTwentyStarFilled';
export * from './icon/components/IllustrationIconCalendarEvent';
export * from './icon/components/IllustrationIconCalendarTime';
export * from './icon/components/IllustrationIconCurrency';
export * from './icon/components/IllustrationIconJson';
export * from './icon/components/IllustrationIconMail';
export * from './icon/components/IllustrationIconMap';
export * from './icon/components/IllustrationIconNumbers';
export * from './icon/components/IllustrationIconOneToMany';
export * from './icon/components/IllustrationIconPhone';
export * from './icon/components/IllustrationIconSetting';
export * from './icon/components/IllustrationIconStar';
export * from './icon/components/IllustrationIconTag';
export * from './icon/components/IllustrationIconTags';
export * from './icon/components/IllustrationIconText';
export * from './icon/components/IllustrationIconToggle';
export * from './icon/components/IllustrationIconUid';
export * from './icon/components/IllustrationIconUser';
export * from './icon/components/IllustrationIconWrapper';
export * from './icon/components/llustrationIconLink';
export * from './icon/components/TablerIcons';
export * from './icon/hooks/useIcons';
export * from './icon/providers/IconsProvider';

6
packages/twenty-ui/src/theme/constants/IllustrationIconDark.ts Normal file
View File

@ -0,0 +1,6 @@
import { COLOR } from './Colors';
export const ILLUSTRATION_ICON_DARK = {
color: COLOR.blue50,
fill: COLOR.blue70,
};

6
packages/twenty-ui/src/theme/constants/IllustrationIconLight.ts Normal file
View File

@ -0,0 +1,6 @@
import { COLOR } from './Colors';
export const ILLUSTRATION_ICON_LIGHT = {
color: COLOR.blue40,
fill: COLOR.blue20,
};

6
packages/twenty-ui/src/theme/constants/ThemeDark.ts
View File

@ -1,15 +1,14 @@
import { BLUR_DARK } from '@ui/theme/constants/BlurDark';
import { ILLUSTRATION_ICON_DARK } from '@ui/theme/constants/IllustrationIconDark';
import { SNACK_BAR_DARK, ThemeType } from '..';
import { ACCENT_DARK } from './AccentDark';
import { BACKGROUND_DARK } from './BackgroundDark';
import { BORDER_DARK } from './BorderDark';
import { BOX_SHADOW_DARK } from './BoxShadowDark';
import { CODE_DARK } from './CodeDark';
import { FONT_DARK } from './FontDark';
import { TAG_DARK } from './TagDark';
import { THEME_COMMON } from './ThemeCommon';
import { CODE_DARK } from './CodeDark';
export const THEME_DARK: ThemeType = {
...THEME_COMMON,
@ -24,5 +23,6 @@ export const THEME_DARK: ThemeType = {
snackBar: SNACK_BAR_DARK,
tag: TAG_DARK,
code: CODE_DARK,
IllustrationIcon: ILLUSTRATION_ICON_DARK,
},
};

5
packages/twenty-ui/src/theme/constants/ThemeLight.ts
View File

@ -1,14 +1,14 @@
import { BLUR_LIGHT } from '@ui/theme/constants/BlurLight';
import { ILLUSTRATION_ICON_LIGHT } from '@ui/theme/constants/IllustrationIconLight';
import { SNACK_BAR_LIGHT } from '@ui/theme/constants/SnackBarLight';
import { ACCENT_LIGHT } from './AccentLight';
import { BACKGROUND_LIGHT } from './BackgroundLight';
import { BORDER_LIGHT } from './BorderLight';
import { BOX_SHADOW_LIGHT } from './BoxShadowLight';
import { CODE_LIGHT } from './CodeLight';
import { FONT_LIGHT } from './FontLight';
import { TAG_LIGHT } from './TagLight';
import { THEME_COMMON } from './ThemeCommon';
import { CODE_LIGHT } from './CodeLight';
export const THEME_LIGHT = {
...THEME_COMMON,
@ -23,5 +23,6 @@ export const THEME_LIGHT = {
snackBar: SNACK_BAR_LIGHT,
tag: TAG_LIGHT,
code: CODE_LIGHT,
IllustrationIcon: ILLUSTRATION_ICON_LIGHT,
},
};

2
packages/twenty-ui/src/theme/index.ts
View File

@ -19,6 +19,8 @@ export * from './constants/FontLight';
export * from './constants/GrayScale';
export * from './constants/HoverBackground';
export * from './constants/Icon';
export * from './constants/IllustrationIconDark';
export * from './constants/IllustrationIconLight';
export * from './constants/MainColorNames';
export * from './constants/MainColors';
export * from './constants/MobileViewport';

2
packages/twenty-ui/tsconfig.dev.json
View File

@ -15,5 +15,5 @@
"src/**/*.tsx",
"src/**/*.ts",
"vite.config.ts"
]
]
}