├── .eslintrc ├── .github └── workflows │ └── main.yml ├── .gitignore ├── .prettierrc.json ├── .storybook ├── main.js ├── preview-head.html └── preview.js ├── LICENSE ├── README.md ├── funding.json ├── package.json ├── public ├── favicon.ico ├── fonts │ ├── red-hat-display-v7-latin-700.woff │ ├── red-hat-display-v7-latin-700.woff2 │ ├── red-hat-text-v6-latin-500.woff │ ├── red-hat-text-v6-latin-500.woff2 │ ├── red-hat-text-v6-latin-regular.woff │ ├── red-hat-text-v6-latin-regular.woff2 │ ├── texgyreadventor-bold-webfont.woff │ └── texgyreadventor-regular-webfont.woff ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── src ├── common │ ├── colors.ts │ └── deviceSize.ts ├── components │ ├── DataBlock.tsx │ ├── DataBox.tsx │ ├── buttonLinks │ │ ├── ButtonLink.tsx │ │ ├── OutlineButtonLink.tsx │ │ └── type.ts │ ├── buttons │ │ ├── Button.tsx │ │ ├── OutlineButton.tsx │ │ ├── common.tsx │ │ └── type.ts │ ├── icons │ │ ├── Activated │ │ │ ├── Activated.tsx │ │ │ ├── Activated16.tsx │ │ │ ├── Activated24.tsx │ │ │ └── Activated32.tsx │ │ ├── AdminNotif │ │ │ ├── AdminNotif.tsx │ │ │ ├── AdminNotif16.tsx │ │ │ ├── AdminNotif24.tsx │ │ │ └── AdminNotif32.tsx │ │ ├── AlertCircle │ │ │ ├── AlertCircle.tsx │ │ │ ├── AlertCircle16.tsx │ │ │ ├── AlertCircle24.tsx │ │ │ └── AlertCircle32.tsx │ │ ├── AlertTriangleFilled │ │ │ ├── AlertTriangleFilled.tsx │ │ │ ├── AlertTriangleFilled16.tsx │ │ │ ├── AlertTriangleFilled24.tsx │ │ │ └── AlertTriangleFilled32.tsx │ │ ├── AlertTriangleOutline │ │ │ ├── AlertTriangleOutline.tsx │ │ │ ├── AlertTriangleOutline16.tsx │ │ │ ├── AlertTriangleOutline24.tsx │ │ │ └── AlertTriangleOutline32.tsx │ │ ├── Archive │ │ │ ├── Archive.tsx │ │ │ ├── Archive16.tsx │ │ │ ├── Archive24.tsx │ │ │ └── Archive32.tsx │ │ ├── Archiving │ │ │ ├── Archiving.tsx │ │ │ ├── Archiving16.tsx │ │ │ ├── Archiving24.tsx │ │ │ └── Archiving32.tsx │ │ ├── ArrowDown │ │ │ ├── ArrowDown.tsx │ │ │ ├── ArrowDown16.tsx │ │ │ ├── ArrowDown24.tsx │ │ │ └── ArrowDown32.tsx │ │ ├── ArrowDownCircle │ │ │ ├── ArrowDownCircle.tsx │ │ │ ├── ArrowDownCircle16.tsx │ │ │ ├── ArrowDownCircle24.tsx │ │ │ └── ArrowDownCircle32.tsx │ │ ├── ArrowLeft │ │ │ ├── ArrowLeft.tsx │ │ │ ├── ArrowLeft16.tsx │ │ │ ├── ArrowLeft24.tsx │ │ │ └── ArrowLeft32.tsx │ │ ├── ArrowLeftCircle │ │ │ ├── ArrowLeftCircle.tsx │ │ │ ├── ArrowLeftCircle16.tsx │ │ │ ├── ArrowLeftCircle24.tsx │ │ │ └── ArrowLeftCircle32.tsx │ │ ├── ArrowRight │ │ │ ├── ArrowRight.tsx │ │ │ ├── ArrowRight16.tsx │ │ │ ├── ArrowRight24.tsx │ │ │ └── ArrowRight32.tsx │ │ ├── ArrowRightCircle │ │ │ ├── ArrowRightCircle.tsx │ │ │ ├── ArrowRightCircle16.tsx │ │ │ ├── ArrowRightCircle24.tsx │ │ │ └── ArrowRightCircle32.tsx │ │ ├── ArrowUp │ │ │ ├── ArrowUp.tsx │ │ │ ├── ArrowUp16.tsx │ │ │ ├── ArrowUp24.tsx │ │ │ └── ArrowUp32.tsx │ │ ├── ArrowUpCircle │ │ │ ├── ArrowUpCircle.tsx │ │ │ ├── ArrowUpCircle16.tsx │ │ │ ├── ArrowUpCircle24.tsx │ │ │ └── ArrowUpCircle32.tsx │ │ ├── AutoBoost │ │ │ ├── AutoBoost.tsx │ │ │ ├── AutoBoost16.tsx │ │ │ ├── AutoBoost24.tsx │ │ │ └── AutoBoost32.tsx │ │ ├── Backward │ │ │ ├── Backward.tsx │ │ │ ├── Backward16.tsx │ │ │ ├── Backward24.tsx │ │ │ └── Backward32.tsx │ │ ├── Bookmark │ │ │ ├── Bookmark.tsx │ │ │ ├── Bookmark16.tsx │ │ │ ├── Bookmark24.tsx │ │ │ └── Bookmark32.tsx │ │ ├── BookmarkFilled │ │ │ ├── BookmarkFilled.tsx │ │ │ ├── BookmarkFilled16.tsx │ │ │ ├── BookmarkFilled24.tsx │ │ │ └── BookmarkFilled32.tsx │ │ ├── BulbOff │ │ │ ├── BulbOff.tsx │ │ │ ├── BulbOff16.tsx │ │ │ ├── BulbOff24.tsx │ │ │ └── BulbOff32.tsx │ │ ├── BulbOutline │ │ │ ├── BulbOutline.tsx │ │ │ ├── BulbOutline16.tsx │ │ │ ├── BulbOutline24.tsx │ │ │ └── BulbOutline32.tsx │ │ ├── Calculator │ │ │ ├── Calculator.tsx │ │ │ ├── Calculator16.tsx │ │ │ ├── Calculator24.tsx │ │ │ └── Calculator32.tsx │ │ ├── CaretDown │ │ │ ├── CaretDown.tsx │ │ │ ├── CaretDown16.tsx │ │ │ ├── CaretDown24.tsx │ │ │ └── CaretDown32.tsx │ │ ├── CaretLeft │ │ │ ├── CaretLeft.tsx │ │ │ ├── CaretLeft16.tsx │ │ │ ├── CaretLeft24.tsx │ │ │ └── CaretLeft32.tsx │ │ ├── CaretRight │ │ │ ├── CaretRight.tsx │ │ │ ├── CaretRight16.tsx │ │ │ ├── CaretRight24.tsx │ │ │ └── CaretRight32.tsx │ │ ├── CaretUp │ │ │ ├── CaretUp.tsx │ │ │ ├── CaretUp16.tsx │ │ │ ├── CaretUp24.tsx │ │ │ └── CaretUp32.tsx │ │ ├── Check │ │ │ ├── Check.tsx │ │ │ ├── Check16.tsx │ │ │ ├── Check24.tsx │ │ │ └── Check32.tsx │ │ ├── CheckCircleFilled │ │ │ ├── CheckCircleFilled.tsx │ │ │ ├── CheckCircleFilled16.tsx │ │ │ ├── CheckCircleFilled24.tsx │ │ │ └── CheckCircleFilled32.tsx │ │ ├── CheckCircleOutline │ │ │ ├── CheckCircleOutline.tsx │ │ │ ├── CheckCircleOutline16.tsx │ │ │ ├── CheckCircleOutline24.tsx │ │ │ └── CheckCircleOutline32.tsx │ │ ├── CheckboxEmpty │ │ │ ├── CheckboxEmpty.tsx │ │ │ ├── CheckboxEmpty16.tsx │ │ │ ├── CheckboxEmpty24.tsx │ │ │ └── CheckboxEmpty32.tsx │ │ ├── CheckboxFilled │ │ │ ├── CheckboxFilled.tsx │ │ │ ├── CheckboxFilled16.tsx │ │ │ ├── CheckboxFilled24.tsx │ │ │ └── CheckboxFilled32.tsx │ │ ├── ChevronDown │ │ │ ├── ChevronDown.tsx │ │ │ ├── ChevronDown16.tsx │ │ │ ├── ChevronDown24.tsx │ │ │ └── ChevronDown32.tsx │ │ ├── ChevronLeft │ │ │ ├── ChevronLeft.tsx │ │ │ ├── ChevronLeft16.tsx │ │ │ ├── ChevronLeft24.tsx │ │ │ └── ChevronLeft32.tsx │ │ ├── ChevronRight │ │ │ ├── ChevronRight.tsx │ │ │ ├── ChevronRight16.tsx │ │ │ ├── ChevronRight24.tsx │ │ │ └── ChevronRight32.tsx │ │ ├── ChevronUp │ │ │ ├── ChevronUp.tsx │ │ │ ├── ChevronUp16.tsx │ │ │ ├── ChevronUp24.tsx │ │ │ └── ChevronUp32.tsx │ │ ├── Claim │ │ │ ├── Claim.tsx │ │ │ ├── Claim16.tsx │ │ │ ├── Claim24.tsx │ │ │ └── Claim32.tsx │ │ ├── Config │ │ │ ├── Config.tsx │ │ │ ├── Config16.tsx │ │ │ ├── Config24.tsx │ │ │ └── Config32.tsx │ │ ├── Copy │ │ │ ├── Copy.tsx │ │ │ ├── Copy16.tsx │ │ │ ├── Copy24.tsx │ │ │ └── Copy32.tsx │ │ ├── Deactivated │ │ │ ├── Deactivated.tsx │ │ │ ├── Deactivated16.tsx │ │ │ ├── Deactivated24.tsx │ │ │ └── Deactivated32.tsx │ │ ├── DelegateBoost │ │ │ ├── DelegateBoost.tsx │ │ │ ├── DelegateBoost16.tsx │ │ │ ├── DelegateBoost24.tsx │ │ │ └── DelegateBoost32.tsx │ │ ├── Donation │ │ │ ├── Donation.tsx │ │ │ ├── Donation16.tsx │ │ │ ├── Donation24.tsx │ │ │ └── Donation32.tsx │ │ ├── Dots │ │ │ ├── Dots.tsx │ │ │ ├── Dots16.tsx │ │ │ ├── Dots24.tsx │ │ │ └── Dots32.tsx │ │ ├── DotsHorizontal │ │ │ ├── DotsHorizontal.tsx │ │ │ ├── DotsHorizontal16.tsx │ │ │ ├── DotsHorizontal24.tsx │ │ │ └── DotsHorizontal32.tsx │ │ ├── Edit │ │ │ ├── Edit.tsx │ │ │ ├── Edit16.tsx │ │ │ ├── Edit24.tsx │ │ │ └── Edit32.tsx │ │ ├── EmptyCircle │ │ │ ├── EmptyCircle.tsx │ │ │ ├── EmptyCircle16.tsx │ │ │ ├── EmptyCircle24.tsx │ │ │ └── EmptyCircle32.tsx │ │ ├── Enter │ │ │ ├── Enter.tsx │ │ │ ├── Enter16.tsx │ │ │ ├── Enter24.tsx │ │ │ └── Enter32.tsx │ │ ├── Estimated │ │ │ ├── Estimated.tsx │ │ │ ├── Estimated16.tsx │ │ │ ├── Estimated24.tsx │ │ │ └── Estimated32.tsx │ │ ├── ExternalLink │ │ │ ├── ExternalLink.tsx │ │ │ ├── ExternalLink16.tsx │ │ │ ├── ExternalLink24.tsx │ │ │ └── ExternalLink32.tsx │ │ ├── Eye │ │ │ ├── Eye.tsx │ │ │ ├── Eye16.tsx │ │ │ ├── Eye24.tsx │ │ │ └── Eye32.tsx │ │ ├── EyeOff │ │ │ ├── EyeOff.tsx │ │ │ ├── EyeOff16.tsx │ │ │ ├── EyeOff24.tsx │ │ │ └── EyeOff32.tsx │ │ ├── Farm │ │ │ ├── Farm.tsx │ │ │ ├── Farm16.tsx │ │ │ ├── Farm24.tsx │ │ │ └── Farm32.tsx │ │ ├── FarmDisabled │ │ │ ├── FarmDisabled.tsx │ │ │ ├── FarmDisabled16.tsx │ │ │ ├── FarmDisabled24.tsx │ │ │ └── FarmDisabled32.tsx │ │ ├── Fast │ │ │ ├── Fast.tsx │ │ │ ├── Fast16.tsx │ │ │ ├── Fast24.tsx │ │ │ └── Fast32.tsx │ │ ├── File │ │ │ ├── File.tsx │ │ │ ├── File16.tsx │ │ │ ├── File24.tsx │ │ │ └── File32.tsx │ │ ├── Filter │ │ │ ├── Filter.tsx │ │ │ ├── Filter16.tsx │ │ │ ├── Filter24.tsx │ │ │ └── Filter32.tsx │ │ ├── Fingerprint │ │ │ ├── Fingerprint.tsx │ │ │ └── Fingerprint32.tsx │ │ ├── Flag │ │ │ ├── Flag.tsx │ │ │ ├── Flag16.tsx │ │ │ ├── Flag24.tsx │ │ │ └── Flag32.tsx │ │ ├── Flash │ │ │ ├── Flash.tsx │ │ │ ├── Flash16.tsx │ │ │ ├── Flash24.tsx │ │ │ └── Flash32.tsx │ │ ├── FormSubmit │ │ │ ├── FormSubmit.tsx │ │ │ ├── FormSubmit16.tsx │ │ │ ├── FormSubmit24.tsx │ │ │ └── FormSubmit32.tsx │ │ ├── Forward │ │ │ ├── Forward.tsx │ │ │ ├── Forward16.tsx │ │ │ ├── Forward24.tsx │ │ │ └── Forward32.tsx │ │ ├── Fund │ │ │ ├── Fund.tsx │ │ │ ├── Fund24.tsx │ │ │ └── Fund32.tsx │ │ ├── GasStation │ │ │ ├── GasStation.tsx │ │ │ ├── GasStation16.tsx │ │ │ ├── GasStation24.tsx │ │ │ └── GasStation32.tsx │ │ ├── Gift │ │ │ ├── Gift.tsx │ │ │ ├── Gift16.tsx │ │ │ ├── Gift24.tsx │ │ │ └── Gift32.tsx │ │ ├── Heart │ │ │ ├── Heart.tsx │ │ │ ├── Heart16.tsx │ │ │ ├── Heart24.tsx │ │ │ └── Heart32.tsx │ │ ├── HeartFilled │ │ │ ├── HeartFilled.tsx │ │ │ ├── HeartFilled16.tsx │ │ │ ├── HeartFilled24.tsx │ │ │ └── HeartFilled32.tsx │ │ ├── HeartOutline │ │ │ ├── HeartOutline.tsx │ │ │ ├── HeartOutline16.tsx │ │ │ ├── HeartOutline24.tsx │ │ │ └── HeartOutline32.tsx │ │ ├── HelpFilled │ │ │ ├── HelpFilled.tsx │ │ │ ├── HelpFilled16.tsx │ │ │ ├── HelpFilled24.tsx │ │ │ └── HelpFilled32.tsx │ │ ├── HelpOutline │ │ │ ├── HelpOutline.tsx │ │ │ ├── HelpOutline16.tsx │ │ │ ├── HelpOutline24.tsx │ │ │ └── HelpOutline32.tsx │ │ ├── Image │ │ │ ├── Image.tsx │ │ │ ├── Image16.tsx │ │ │ ├── Image24.tsx │ │ │ └── Image32.tsx │ │ ├── Increase │ │ │ ├── Increase.tsx │ │ │ ├── Increase16.tsx │ │ │ ├── Increase24.tsx │ │ │ └── Increase32.tsx │ │ ├── Info │ │ │ ├── Info.tsx │ │ │ ├── Info16.tsx │ │ │ ├── Info24.tsx │ │ │ └── Info32.tsx │ │ ├── InfoFilled │ │ │ ├── InfoFilled.tsx │ │ │ ├── InfoFilled16.tsx │ │ │ ├── InfoFilled24.tsx │ │ │ └── InfoFilled32.tsx │ │ ├── InfoOutline │ │ │ ├── InfoOutline.tsx │ │ │ ├── InfoOutline16.tsx │ │ │ ├── InfoOutline24.tsx │ │ │ └── InfoOutline32.tsx │ │ ├── Link │ │ │ ├── Link.tsx │ │ │ ├── Link16.tsx │ │ │ ├── Link24.tsx │ │ │ └── Link32.tsx │ │ ├── Listed │ │ │ ├── Listed.tsx │ │ │ ├── Listed16.tsx │ │ │ ├── Listed24.tsx │ │ │ └── Listed32.tsx │ │ ├── LocationFilled │ │ │ ├── LocationFilled.tsx │ │ │ ├── LocationFilled16.tsx │ │ │ ├── LocationFilled24.tsx │ │ │ └── LocationFilled32.tsx │ │ ├── LocationOutline │ │ │ ├── LocationOutline.tsx │ │ │ ├── LocationOutline16.tsx │ │ │ ├── LocationOutline24.tsx │ │ │ └── LocationOutline32.tsx │ │ ├── Lock │ │ │ ├── Lock.tsx │ │ │ ├── Lock16.tsx │ │ │ ├── Lock24.tsx │ │ │ └── Lock32.tsx │ │ ├── Menu │ │ │ ├── Menu.tsx │ │ │ ├── Menu16.tsx │ │ │ ├── Menu24.tsx │ │ │ └── Menu32.tsx │ │ ├── MessageSquare │ │ │ ├── MessageSquare.tsx │ │ │ ├── MessageSquare16.tsx │ │ │ ├── MessageSquare24.tsx │ │ │ └── MessageSquare32.tsx │ │ ├── Network │ │ │ ├── Network.tsx │ │ │ ├── Network24.tsx │ │ │ └── Network32.tsx │ │ ├── NoGiveback │ │ │ ├── NoGiveback.tsx │ │ │ ├── NoGiveback16.tsx │ │ │ ├── NoGiveback24.tsx │ │ │ └── NoGiveback32.tsx │ │ ├── Notification │ │ │ ├── Notification.tsx │ │ │ ├── Notification16.tsx │ │ │ ├── Notification24.tsx │ │ │ └── Notification32.tsx │ │ ├── NotificationFilled │ │ │ ├── NotificationFilled.tsx │ │ │ ├── NotificationFilled16.tsx │ │ │ ├── NotificationFilled24.tsx │ │ │ └── NotificationFilled32.tsx │ │ ├── NotificationOutline │ │ │ ├── NotificationOutline.tsx │ │ │ ├── NotificationOutline16.tsx │ │ │ ├── NotificationOutline24.tsx │ │ │ └── NotificationOutline32.tsx │ │ ├── Options │ │ │ ├── Options.tsx │ │ │ ├── Options16.tsx │ │ │ ├── Options24.tsx │ │ │ └── Options32.tsx │ │ ├── Overview │ │ │ ├── Overview.tsx │ │ │ ├── Overview16.tsx │ │ │ ├── Overview24.tsx │ │ │ └── Overview32.tsx │ │ ├── Passport │ │ │ ├── Passport.tsx │ │ │ ├── Passport16.tsx │ │ │ ├── Passport24.tsx │ │ │ └── Passport32.tsx │ │ ├── Plus │ │ │ ├── Plus.tsx │ │ │ ├── Plus16.tsx │ │ │ ├── Plus24.tsx │ │ │ └── Plus32.tsx │ │ ├── PointerLeft │ │ │ ├── PointerLeft.tsx │ │ │ ├── PointerLeft16.tsx │ │ │ ├── PointerLeft24.tsx │ │ │ └── PointerLeft32.tsx │ │ ├── PointerRight │ │ │ ├── PointerRight.tsx │ │ │ ├── PointerRight16.tsx │ │ │ ├── PointerRight24.tsx │ │ │ └── PointerRight32.tsx │ │ ├── Praise │ │ │ ├── Praise.tsx │ │ │ ├── Praise16.tsx │ │ │ ├── Praise24.tsx │ │ │ └── Praise32.tsx │ │ ├── Profile │ │ │ ├── Profile.tsx │ │ │ ├── Profile16.tsx │ │ │ ├── Profile24.tsx │ │ │ └── Profile32.tsx │ │ ├── ProfileCompleted │ │ │ ├── ProfileCompleted.tsx │ │ │ ├── ProfileCompleted16.tsx │ │ │ ├── ProfileCompleted24.tsx │ │ │ └── ProfileCompleted32.tsx │ │ ├── Publish │ │ │ ├── Publish.tsx │ │ │ ├── Publish16.tsx │ │ │ ├── Publish24.tsx │ │ │ └── Publish32.tsx │ │ ├── QF │ │ │ ├── QF.tsx │ │ │ ├── QF16.tsx │ │ │ ├── QF24.tsx │ │ │ └── QF32.tsx │ │ ├── QFNew │ │ │ └── QFNew.tsx │ │ ├── QFNotEligible │ │ │ └── QFNotEligible24.tsx │ │ ├── QrCodeOutline │ │ │ ├── QrCodeOutline.tsx │ │ │ ├── QrCodeOutline16.tsx │ │ │ ├── QrCodeOutline24.tsx │ │ │ └── QrCodeOutline32.tsx │ │ ├── Refresh │ │ │ ├── Refresh.tsx │ │ │ ├── Refresh16.tsx │ │ │ ├── Refresh24.tsx │ │ │ └── Refresh32.tsx │ │ ├── Rejected │ │ │ ├── Rejected.tsx │ │ │ ├── Rejected16.tsx │ │ │ ├── Rejected24.tsx │ │ │ └── Rejected32.tsx │ │ ├── Rocket │ │ │ ├── Rocket.tsx │ │ │ ├── Rocket16.tsx │ │ │ ├── Rocket24.tsx │ │ │ └── Rocket32.tsx │ │ ├── RocketInSpace │ │ │ ├── RocketInSpace.tsx │ │ │ ├── RocketInSpace16.tsx │ │ │ ├── RocketInSpace24.tsx │ │ │ └── RocketInSpace32.tsx │ │ ├── Search │ │ │ ├── Search.tsx │ │ │ ├── Search16.tsx │ │ │ ├── Search24.tsx │ │ │ └── Search32.tsx │ │ ├── Share │ │ │ ├── Share.tsx │ │ │ ├── Share16.tsx │ │ │ ├── Share24.tsx │ │ │ └── Share32.tsx │ │ ├── Shield │ │ │ ├── Shield.tsx │ │ │ ├── Shield16.tsx │ │ │ ├── Shield24.tsx │ │ │ └── Shield32.tsx │ │ ├── Signature │ │ │ ├── Signature.tsx │ │ │ ├── Signature16.tsx │ │ │ ├── Signature24.tsx │ │ │ └── Signature32.tsx │ │ ├── Sorting │ │ │ ├── Sorting.tsx │ │ │ ├── Sorting16.tsx │ │ │ ├── Sorting24.tsx │ │ │ └── Sorting32.tsx │ │ ├── Spark │ │ │ ├── Spark.tsx │ │ │ ├── Spark16.tsx │ │ │ ├── Spark24.tsx │ │ │ └── Spark32.tsx │ │ ├── Stake │ │ │ ├── Stake.tsx │ │ │ ├── Stake16.tsx │ │ │ ├── Stake24.tsx │ │ │ └── Stake32.tsx │ │ ├── Star │ │ │ ├── Star.tsx │ │ │ ├── Star16.tsx │ │ │ ├── Star24.tsx │ │ │ └── Star32.tsx │ │ ├── Sunrise │ │ │ ├── Sunrise.tsx │ │ │ ├── Sunrise16.tsx │ │ │ ├── Sunrise24.tsx │ │ │ └── Sunrise32.tsx │ │ ├── Trace │ │ │ ├── Trace.tsx │ │ │ ├── Trace16.tsx │ │ │ ├── Trace24.tsx │ │ │ └── Trace32.tsx │ │ ├── Transfer │ │ │ ├── Transfer.tsx │ │ │ ├── Transfer16.tsx │ │ │ ├── Transfer24.tsx │ │ │ └── Transfer32.tsx │ │ ├── Trash │ │ │ ├── Trash.tsx │ │ │ ├── Trash16.tsx │ │ │ ├── Trash24.tsx │ │ │ └── Trash32.tsx │ │ ├── UnArchive │ │ │ ├── UnArchive.tsx │ │ │ ├── UnArchive16.tsx │ │ │ ├── UnArchive24.tsx │ │ │ └── UnArchive32.tsx │ │ ├── UnLockable │ │ │ ├── UnLockable.tsx │ │ │ ├── UnLockable16.tsx │ │ │ ├── UnLockable24.tsx │ │ │ └── UnLockable32.tsx │ │ ├── Unlisted │ │ │ ├── Unlisted.tsx │ │ │ ├── Unlisted16.tsx │ │ │ ├── Unlisted24.tsx │ │ │ └── Unlisted32.tsx │ │ ├── Unlock │ │ │ ├── Unlock.tsx │ │ │ ├── Unlock16.tsx │ │ │ ├── Unlock24.tsx │ │ │ └── Unlock32.tsx │ │ ├── Unstake │ │ │ ├── Unstake.tsx │ │ │ ├── Unstake16.tsx │ │ │ ├── Unstake24.tsx │ │ │ └── Unstake32.tsx │ │ ├── Update │ │ │ ├── Update.tsx │ │ │ ├── Update16.tsx │ │ │ ├── Update24.tsx │ │ │ └── Update32.tsx │ │ ├── VerificationReview │ │ │ ├── VerificationReview.tsx │ │ │ ├── VerificationReview16.tsx │ │ │ ├── VerificationReview24.tsx │ │ │ └── VerificationReview32.tsx │ │ ├── Verified │ │ │ ├── Verified.tsx │ │ │ └── Verified24.tsx │ │ ├── VerifiedBadge │ │ │ ├── VerifiedBadge.tsx │ │ │ ├── VerifiedBadge16.tsx │ │ │ ├── VerifiedBadge24.tsx │ │ │ └── VerifiedBadge32.tsx │ │ ├── WalletApprove │ │ │ ├── WalletApprove.tsx │ │ │ ├── WalletApprove16.tsx │ │ │ ├── WalletApprove24.tsx │ │ │ └── WalletApprove32.tsx │ │ ├── WalletOutline │ │ │ ├── WalletOutline.tsx │ │ │ ├── WalletOutline16.tsx │ │ │ ├── WalletOutline24.tsx │ │ │ └── WalletOutline32.tsx │ │ ├── Warning │ │ │ ├── Warning.tsx │ │ │ ├── Warning16.tsx │ │ │ ├── Warning24.tsx │ │ │ ├── Warning32.tsx │ │ │ └── Warning64.tsx │ │ ├── World │ │ │ ├── World.tsx │ │ │ ├── World16.tsx │ │ │ ├── World24.tsx │ │ │ └── World32.tsx │ │ ├── WrongNetwork │ │ │ ├── WrongNetwork.tsx │ │ │ ├── WrongNetwork24.tsx │ │ │ └── WrongNetwork32.tsx │ │ ├── X │ │ │ ├── X.tsx │ │ │ ├── X16.tsx │ │ │ ├── X24.tsx │ │ │ └── X32.tsx │ │ ├── XCircle │ │ │ ├── XCircle.tsx │ │ │ ├── XCircle16.tsx │ │ │ ├── XCircle24.tsx │ │ │ └── XCircle32.tsx │ │ ├── arrowCircles │ │ │ ├── ArrowCircleBottom.tsx │ │ │ ├── ArrowCircleLeft.tsx │ │ │ ├── ArrowCircleRight.tsx │ │ │ └── ArrowCircleTop.tsx │ │ ├── arrows │ │ │ ├── ArrowBottom.tsx │ │ │ ├── ArrowLeft.tsx │ │ │ ├── ArrowRight.tsx │ │ │ └── ArrowTop.tsx │ │ ├── carets │ │ │ ├── CaretDown.tsx │ │ │ ├── CaretLeft.tsx │ │ │ ├── CaretRight.tsx │ │ │ └── CaretUp.tsx │ │ ├── chevrons │ │ │ ├── ChevronDown.tsx │ │ │ ├── ChevronLeft.tsx │ │ │ ├── ChevronRight.tsx │ │ │ └── ChevronUp.tsx │ │ ├── giv-economy │ │ │ ├── Back │ │ │ │ ├── Back.tsx │ │ │ │ ├── Back16.tsx │ │ │ │ ├── Back24.tsx │ │ │ │ ├── Back32.tsx │ │ │ │ └── Back64.tsx │ │ │ ├── Farm.tsx │ │ │ ├── Garden.tsx │ │ │ ├── Stream.tsx │ │ │ └── type.ts │ │ ├── index.tsx │ │ ├── pointers │ │ │ ├── PointerLeft.tsx │ │ │ └── PointerRight.tsx │ │ └── type.ts │ ├── index.ts │ ├── layout │ │ ├── Flex.tsx │ │ └── Grid.tsx │ ├── social-icons │ │ ├── Discord │ │ │ ├── Discord.tsx │ │ │ ├── Discord18.tsx │ │ │ └── Discord24.tsx │ │ ├── Docs │ │ │ ├── Docs.tsx │ │ │ ├── Docs16.tsx │ │ │ ├── Docs24.tsx │ │ │ └── Docs32.tsx │ │ ├── Facebook │ │ │ ├── Facebook.tsx │ │ │ ├── Facebook18.tsx │ │ │ └── Facebook24.tsx │ │ ├── Faracaster.tsx │ │ ├── Github.tsx │ │ ├── Instagram │ │ │ ├── Instagram.tsx │ │ │ ├── Instagram18.tsx │ │ │ └── Instagram24.tsx │ │ ├── Lens.tsx │ │ ├── Linkedin │ │ │ ├── Linkedin.tsx │ │ │ ├── Linkedin18.tsx │ │ │ └── Linkedin24.tsx │ │ ├── Medium.tsx │ │ ├── Reddit.tsx │ │ ├── Telegram │ │ │ ├── Telegram.tsx │ │ │ └── Telegram16.tsx │ │ ├── Twitter.tsx │ │ ├── WhatsApp │ │ │ ├── WhatsApp.tsx │ │ │ └── WhatsApp18.tsx │ │ ├── Wikipedia.tsx │ │ ├── XSocial │ │ │ ├── XSocial.tsx │ │ │ ├── XSocial18.tsx │ │ │ └── XSocial24.tsx │ │ ├── Youtube.tsx │ │ └── type.ts │ └── typography │ │ ├── ButtonText.tsx │ │ ├── GLink.tsx │ │ ├── Overline.tsx │ │ ├── QuoteText.tsx │ │ ├── body │ │ ├── B.tsx │ │ ├── Caption.tsx │ │ ├── Lead.tsx │ │ ├── P.tsx │ │ ├── SemiTitle.tsx │ │ ├── Subline.tsx │ │ ├── SublineBold.tsx │ │ └── Title.tsx │ │ ├── displays │ │ ├── D.tsx │ │ ├── D1.tsx │ │ ├── D2.tsx │ │ └── D3.tsx │ │ └── headlines │ │ ├── H1.tsx │ │ ├── H2.tsx │ │ ├── H3.tsx │ │ ├── H4.tsx │ │ ├── H5.tsx │ │ ├── H6.tsx │ │ └── common.ts ├── index.ts ├── stories │ ├── Button.stories.tsx │ ├── ButtonLink.stories.tsx │ ├── Introduction.stories.mdx │ ├── OutlineButton.stories.tsx │ ├── OutlineButtonLink.stories.tsx │ ├── assets │ │ ├── code-brackets.svg │ │ ├── colors.svg │ │ ├── comments.svg │ │ ├── direction.svg │ │ ├── flow.svg │ │ ├── plugin.svg │ │ ├── repo.svg │ │ └── stackalt.svg │ ├── icons │ │ ├── Arrow │ │ │ ├── ArrowLeft.stories.tsx │ │ │ └── ArrowRight.stories.tsx │ │ ├── ArrowCircle │ │ │ └── ArrowCircleLeft.stories.tsx │ │ ├── Donation │ │ │ ├── Donation.stories.tsx │ │ │ ├── Donation16.stories.tsx │ │ │ ├── Donation24.stories.tsx │ │ │ └── Donation32.stories.tsx │ │ ├── Estimated │ │ │ └── IconEstimated.stories.tsx │ │ ├── GIVEconomyBack │ │ │ ├── GIVEconomyBack.stories.tsx │ │ │ ├── GIVEconomyBack16.stories.tsx │ │ │ ├── GIVEconomyBack24.stories.tsx │ │ │ ├── GIVEconomyBack32.stories.tsx │ │ │ └── GIVEconomyBack64.stories.tsx │ │ ├── IconAlertCircle.stories.tsx │ │ ├── IconConfig.stories.tsx │ │ ├── IconGift.stories.tsx │ │ ├── Socials │ │ │ └── IconXSocial.stories.tsx │ │ └── Warning │ │ │ ├── Warning.stories.tsx │ │ │ ├── Warning16.stories.tsx │ │ │ ├── Warning24.stories.tsx │ │ │ ├── Warning32.stories.tsx │ │ │ └── Warning64.stories.tsx │ └── typography │ │ ├── Glink.stories.tsx │ │ ├── Overline.stories.tsx │ │ ├── body │ │ ├── B.stories.tsx │ │ ├── Caption.stories.tsx │ │ ├── Lead.stories.tsx │ │ ├── P.stories.tsx │ │ ├── SemiTitle.stories.tsx │ │ ├── Subline.stories.tsx │ │ ├── SublineBold.stories.tsx │ │ └── Title.stories.tsx │ │ ├── displays │ │ ├── D1.stories.tsx │ │ ├── D2.stories.tsx │ │ └── D3.stories.tsx │ │ └── headings │ │ ├── H1.stories.tsx │ │ ├── H2.stories.tsx │ │ ├── H3.stories.tsx │ │ ├── H4.stories.tsx │ │ ├── H5.stories.tsx │ │ └── H6.stories.tsx └── styled-components │ └── animations.tsx ├── tsconfig.json └── yarn.lock /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "@typescript-eslint/parser", 3 | "extends": ["plugin:prettier/recommended"], 4 | "rules": { 5 | "prettier/prettier": [ 6 | "error", 7 | { 8 | "endOfLine": "auto" 9 | } 10 | ] 11 | }, 12 | "settings": { 13 | "import/resolver": { 14 | "typescript": {} 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "useTabs": true, 4 | "tabWidth": 4, 5 | "semi": true, 6 | "jsxSingleQuote": true, 7 | "trailingComma": "all", 8 | "arrowParens": "avoid" 9 | } 10 | -------------------------------------------------------------------------------- /.storybook/main.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | typescript: { 3 | reactDocgen: false, 4 | }, 5 | 6 | stories: [ 7 | '../src/**/*.stories.mdx', 8 | '../src/**/*.stories.@(js|jsx|ts|tsx)', 9 | ], 10 | addons: [ 11 | '@storybook/addon-links', 12 | '@storybook/addon-essentials', 13 | '@storybook/addon-mdx-gfm', 14 | ], 15 | 16 | framework: { 17 | name: '@storybook/nextjs', 18 | options: {}, 19 | }, 20 | 21 | docs: { 22 | autodocs: true, 23 | }, 24 | }; 25 | -------------------------------------------------------------------------------- /.storybook/preview.js: -------------------------------------------------------------------------------- 1 | import { brandColors } from "../src/common/colors"; 2 | 3 | export const parameters = { 4 | actions: { argTypesRegex: "^on[A-Z].*" }, 5 | controls: { 6 | matchers: { 7 | color: /(background|color)$/i, 8 | date: /Date$/, 9 | }, 10 | }, 11 | backgrounds: { 12 | default: 'GIV - Dark', 13 | values: [ 14 | { 15 | name: 'GIV - Dark', 16 | value: brandColors.giv[600], 17 | }, 18 | { 19 | name: 'GIV - Light', 20 | value: brandColors.giv['000'], 21 | }, 22 | ], 23 | }, 24 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Giveth UI design system 2 | 3 | This open-source UI design system includes all of the giveth web product components. 4 | -------------------------------------------------------------------------------- /funding.json: -------------------------------------------------------------------------------- 1 | { 2 | "opRetro": { 3 | "projectId": "0xe434930e189c807b137ff0d8e2fa6a95eaa57dde574143a02ca0d7fb31a40bea" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Giveth/ui-design-system/79a4f04529fa9cbcbd6a7535c2c97fe476c93e85/public/favicon.ico -------------------------------------------------------------------------------- /public/fonts/red-hat-display-v7-latin-700.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Giveth/ui-design-system/79a4f04529fa9cbcbd6a7535c2c97fe476c93e85/public/fonts/red-hat-display-v7-latin-700.woff -------------------------------------------------------------------------------- /public/fonts/red-hat-display-v7-latin-700.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Giveth/ui-design-system/79a4f04529fa9cbcbd6a7535c2c97fe476c93e85/public/fonts/red-hat-display-v7-latin-700.woff2 -------------------------------------------------------------------------------- /public/fonts/red-hat-text-v6-latin-500.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Giveth/ui-design-system/79a4f04529fa9cbcbd6a7535c2c97fe476c93e85/public/fonts/red-hat-text-v6-latin-500.woff -------------------------------------------------------------------------------- /public/fonts/red-hat-text-v6-latin-500.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Giveth/ui-design-system/79a4f04529fa9cbcbd6a7535c2c97fe476c93e85/public/fonts/red-hat-text-v6-latin-500.woff2 -------------------------------------------------------------------------------- /public/fonts/red-hat-text-v6-latin-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Giveth/ui-design-system/79a4f04529fa9cbcbd6a7535c2c97fe476c93e85/public/fonts/red-hat-text-v6-latin-regular.woff -------------------------------------------------------------------------------- /public/fonts/red-hat-text-v6-latin-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Giveth/ui-design-system/79a4f04529fa9cbcbd6a7535c2c97fe476c93e85/public/fonts/red-hat-text-v6-latin-regular.woff2 -------------------------------------------------------------------------------- /public/fonts/texgyreadventor-bold-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Giveth/ui-design-system/79a4f04529fa9cbcbd6a7535c2c97fe476c93e85/public/fonts/texgyreadventor-bold-webfont.woff -------------------------------------------------------------------------------- /public/fonts/texgyreadventor-regular-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Giveth/ui-design-system/79a4f04529fa9cbcbd6a7535c2c97fe476c93e85/public/fonts/texgyreadventor-regular-webfont.woff -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Giveth/ui-design-system/79a4f04529fa9cbcbd6a7535c2c97fe476c93e85/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Giveth/ui-design-system/79a4f04529fa9cbcbd6a7535c2c97fe476c93e85/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/common/deviceSize.ts: -------------------------------------------------------------------------------- 1 | export const deviceSize = { 2 | mobileS: 320, 3 | mobileM: 375, 4 | mobileL: 425, 5 | tablet: 768, 6 | laptopS: 1024, 7 | laptopL: 1280, 8 | desktop: 1440, 9 | }; 10 | 11 | export const mediaQueries = { 12 | mobileS: `@media (min-width: ${deviceSize.mobileS}px)`, 13 | mobileM: `@media (min-width: ${deviceSize.mobileM}px)`, 14 | mobileL: `@media (min-width: ${deviceSize.mobileL}px)`, 15 | tablet: `@media (min-width: ${deviceSize.tablet}px)`, 16 | laptopS: `@media (min-width: ${deviceSize.laptopS}px)`, 17 | laptopL: `@media (min-width: ${deviceSize.laptopL}px)`, 18 | desktop: `@media (min-width: ${deviceSize.desktop}px)`, 19 | }; 20 | -------------------------------------------------------------------------------- /src/components/buttonLinks/type.ts: -------------------------------------------------------------------------------- 1 | import type { ReactNode, ComponentPropsWithoutRef } from 'react'; 2 | 3 | export type ButtonStyleType = 4 | | 'primary' 5 | | 'secondary' 6 | | 'texty' 7 | | 'texty-gray' 8 | | 'texty-primary' 9 | | 'texty-secondary'; 10 | 11 | export type ButtonSize = 'small' | 'medium' | 'large'; 12 | 13 | export interface IButtonLinkContainerProps { 14 | $linkType?: ButtonStyleType; 15 | size?: ButtonSize; 16 | disabled?: boolean; 17 | } 18 | 19 | export interface IButtonLinkProps extends ComponentPropsWithoutRef<'a'> { 20 | icon?: ReactNode; 21 | leftIcon?: ReactNode; 22 | label: string; 23 | linkType?: ButtonStyleType; 24 | isExternal?: boolean; 25 | size?: ButtonSize; 26 | disabled?: boolean; 27 | } 28 | -------------------------------------------------------------------------------- /src/components/buttons/type.ts: -------------------------------------------------------------------------------- 1 | import type { ReactNode, ComponentPropsWithoutRef } from 'react'; 2 | import { ButtonSize, ButtonStyleType } from '../buttonLinks/type'; 3 | 4 | export interface IButtonContainerProps { 5 | $buttonType?: ButtonStyleType; 6 | disabled?: boolean; 7 | size?: ButtonSize; 8 | } 9 | 10 | export interface IButtonProps extends ComponentPropsWithoutRef<'button'> { 11 | loading?: boolean; 12 | label: string; 13 | icon?: ReactNode; 14 | leftIcon?: ReactNode; 15 | buttonType?: ButtonStyleType; 16 | disabled?: boolean; 17 | size?: ButtonSize; 18 | id?: string; 19 | } 20 | -------------------------------------------------------------------------------- /src/components/icons/Activated/Activated.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconActivated16 } from './Activated16'; 4 | import { IconActivated24 } from './Activated24'; 5 | import { IconActivated32 } from './Activated32'; 6 | 7 | export const IconActivated: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/AdminNotif/AdminNotif.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconAdminNotif16 } from './AdminNotif16'; 4 | import { IconAdminNotif24 } from './AdminNotif24'; 5 | import { IconAdminNotif32 } from './AdminNotif32'; 6 | 7 | export const IconAdminNotif: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/AlertCircle/AlertCircle.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconAlertCircle16 } from './AlertCircle16'; 4 | import { IconAlertCircle24 } from './AlertCircle24'; 5 | import { IconAlertCircle32 } from './AlertCircle32'; 6 | 7 | export const IconAlertCircle: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/AlertCircle/AlertCircle24.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconAlertCircle24: FC = ({ 5 | size = 24, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/AlertCircle/AlertCircle32.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconAlertCircle32: FC = ({ 5 | size = 32, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/Archive/Archive.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconArchive16 } from './Archive16'; 4 | import { IconArchive24 } from './Archive24'; 5 | import { IconArchive32 } from './Archive32'; 6 | 7 | export const IconArchive: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Archiving/Archiving.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconArchiving16 } from './Archiving16'; 4 | import { IconArchiving24 } from './Archiving24'; 5 | import { IconArchiving32 } from './Archiving32'; 6 | 7 | export const IconArchiving: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/ArrowDown/ArrowDown.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconArrowDown16 } from './ArrowDown16'; 4 | import { IconArrowDown24 } from './ArrowDown24'; 5 | import { IconArrowDown32 } from './ArrowDown32'; 6 | 7 | export const IconArrowDown: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/ArrowDown/ArrowDown16.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconArrowDown16: FC = ({ 5 | size = 16, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 21 | 22 | ); 23 | -------------------------------------------------------------------------------- /src/components/icons/ArrowDown/ArrowDown24.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconArrowDown24: FC = ({ 5 | size = 24, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/ArrowDown/ArrowDown32.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconArrowDown32: FC = ({ 5 | size = 32, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/ArrowDownCircle/ArrowDownCircle24.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconArrowDownCircle24: FC = ({ 5 | size = 24, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/ArrowLeft/ArrowLeft.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconArrowLeft16 } from './ArrowLeft16'; 4 | import { IconArrowLeft24 } from './ArrowLeft24'; 5 | import { IconArrowLeft32 } from './ArrowLeft32'; 6 | 7 | export const IconArrowLeft: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/ArrowLeft/ArrowLeft16.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconArrowLeft16: FC = ({ 5 | size = 16, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 21 | 22 | ); 23 | -------------------------------------------------------------------------------- /src/components/icons/ArrowLeft/ArrowLeft24.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconArrowLeft24: FC = ({ 5 | size = 24, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/ArrowLeft/ArrowLeft32.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconArrowLeft32: FC = ({ 5 | size = 32, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/ArrowLeftCircle/ArrowLeftCircle24.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconArrowLeftCircle24: FC = ({ 5 | size = 24, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/ArrowRight/ArrowRight.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconArrowRight16 } from './ArrowRight16'; 4 | import { IconArrowRight24 } from './ArrowRight24'; 5 | import { IconArrowRight32 } from './ArrowRight32'; 6 | 7 | export const IconArrowRight: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/ArrowRight/ArrowRight16.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconArrowRight16: FC = ({ 5 | size = 16, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 21 | 22 | ); 23 | -------------------------------------------------------------------------------- /src/components/icons/ArrowRight/ArrowRight24.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconArrowRight24: FC = ({ 5 | size = 24, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/ArrowRight/ArrowRight32.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconArrowRight32: FC = ({ 5 | size = 32, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/ArrowRightCircle/ArrowRightCircle24.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconArrowRightCircle24: FC = ({ 5 | size = 24, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/ArrowUp/ArrowUp.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconArrowUp16 } from './ArrowUp16'; 4 | import { IconArrowUp24 } from './ArrowUp24'; 5 | import { IconArrowUp32 } from './ArrowUp32'; 6 | 7 | export const IconArrowUp: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/ArrowUp/ArrowUp16.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconArrowUp16: FC = ({ 5 | size = 16, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 21 | 22 | ); 23 | -------------------------------------------------------------------------------- /src/components/icons/ArrowUp/ArrowUp24.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconArrowUp24: FC = ({ 5 | size = 24, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/ArrowUp/ArrowUp32.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconArrowUp32: FC = ({ 5 | size = 32, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/ArrowUpCircle/ArrowUpCircle.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconArrowUpCircle16 } from './ArrowUpCircle16'; 4 | import { IconArrowUpCircle24 } from './ArrowUpCircle24'; 5 | import { IconArrowUpCircle32 } from './ArrowUpCircle32'; 6 | 7 | export const IconArrowUpCircle: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/ArrowUpCircle/ArrowUpCircle24.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconArrowUpCircle24: FC = ({ 5 | size = 24, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/AutoBoost/AutoBoost.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconAutoBoost16 } from './AutoBoost16'; 4 | import { IconAutoBoost24 } from './AutoBoost24'; 5 | import { IconAutoBoost32 } from './AutoBoost32'; 6 | 7 | export const IconAutoBoost: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Backward/Backward.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconBackward16 } from './Backward16'; 4 | import { IconBackward24 } from './Backward24'; 5 | import { IconBackward32 } from './Backward32'; 6 | 7 | export const IconBackward: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Backward/Backward16.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconBackward16: FC = ({ 5 | size = 16, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 21 | 22 | ); 23 | -------------------------------------------------------------------------------- /src/components/icons/Backward/Backward24.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconBackward24: FC = ({ 5 | size = 24, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/Backward/Backward32.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconBackward32: FC = ({ 5 | size = 32, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/Bookmark/Bookmark.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconBookmark16 } from './Bookmark16'; 4 | import { IconBookmark24 } from './Bookmark24'; 5 | import { IconBookmark32 } from './Bookmark32'; 6 | 7 | export const IconBookmark: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/BookmarkFilled/BookmarkFilled.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconBookmarkFilled16 } from './BookmarkFilled16'; 4 | import { IconBookmarkFilled24 } from './BookmarkFilled24'; 5 | import { IconBookmarkFilled32 } from './BookmarkFilled32'; 6 | 7 | export const IconBookmarkFilled: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/BulbOff/BulbOff.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconBulbOff16 } from './BulbOff16'; 4 | import { IconBulbOff24 } from './BulbOff24'; 5 | import { IconBulbOff32 } from './BulbOff32'; 6 | 7 | export const IconBulbOff: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/BulbOutline/BulbOutline.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconBulbOutline16 } from './BulbOutline16'; 4 | import { IconBulbOutline24 } from './BulbOutline24'; 5 | import { IconBulbOutline32 } from './BulbOutline32'; 6 | 7 | export const IconBulbOutline: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Calculator/Calculator.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconCalculator16 } from './Calculator16'; 4 | import { IconCalculator24 } from './Calculator24'; 5 | import { IconCalculator32 } from './Calculator32'; 6 | 7 | export const IconCalculator: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/CaretDown/CaretDown.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconCaretDown16 } from './CaretDown16'; 4 | import { IconCaretDown24 } from './CaretDown24'; 5 | import { IconCaretDown32 } from './CaretDown32'; 6 | 7 | export const IconCaretDown: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/CaretDown/CaretDown16.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconCaretDown16: FC = ({ 5 | size = 16, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 19 | 20 | ); 21 | -------------------------------------------------------------------------------- /src/components/icons/CaretDown/CaretDown24.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconCaretDown24: FC = ({ 5 | size = 24, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 19 | 20 | ); 21 | -------------------------------------------------------------------------------- /src/components/icons/CaretLeft/CaretLeft.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconCaretLeft16 } from './CaretLeft16'; 4 | import { IconCaretLeft24 } from './CaretLeft24'; 5 | import { IconCaretLeft32 } from './CaretLeft32'; 6 | 7 | export const IconCaretLeft: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/CaretLeft/CaretLeft16.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconCaretLeft16: FC = ({ 5 | size = 16, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 19 | 20 | ); 21 | -------------------------------------------------------------------------------- /src/components/icons/CaretLeft/CaretLeft24.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconCaretLeft24: FC = ({ 5 | size = 24, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 19 | 20 | ); 21 | -------------------------------------------------------------------------------- /src/components/icons/CaretRight/CaretRight.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconCaretRight16 } from './CaretRight16'; 4 | import { IconCaretRight24 } from './CaretRight24'; 5 | import { IconCaretRight32 } from './CaretRight32'; 6 | 7 | export const IconCaretRight: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/CaretRight/CaretRight16.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconCaretRight16: FC = ({ 5 | size = 16, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 19 | 20 | ); 21 | -------------------------------------------------------------------------------- /src/components/icons/CaretRight/CaretRight24.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconCaretRight24: FC = ({ 5 | size = 24, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 19 | 20 | ); 21 | -------------------------------------------------------------------------------- /src/components/icons/CaretUp/CaretUp.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconCaretUp16 } from './CaretUp16'; 4 | import { IconCaretUp24 } from './CaretUp24'; 5 | import { IconCaretUp32 } from './CaretUp32'; 6 | 7 | export const IconCaretUp: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/CaretUp/CaretUp16.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconCaretUp16: FC = ({ 5 | size = 16, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 19 | 20 | ); 21 | -------------------------------------------------------------------------------- /src/components/icons/CaretUp/CaretUp24.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconCaretUp24: FC = ({ 5 | size = 24, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 19 | 20 | ); 21 | -------------------------------------------------------------------------------- /src/components/icons/Check/Check.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconCheck16 } from './Check16'; 4 | import { IconCheck24 } from './Check24'; 5 | import { IconCheck32 } from './Check32'; 6 | 7 | export const IconCheck: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Check/Check16.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconCheck16: FC = ({ 5 | size = 16, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 21 | 22 | ); 23 | -------------------------------------------------------------------------------- /src/components/icons/Check/Check24.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconCheck24: FC = ({ 5 | size = 24, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/Check/Check32.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconCheck32: FC = ({ 5 | size = 32, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/CheckboxEmpty/CheckboxEmpty.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconCheckboxEmpty16 } from './CheckboxEmpty16'; 4 | import { IconCheckboxEmpty24 } from './CheckboxEmpty24'; 5 | import { IconCheckboxEmpty32 } from './CheckboxEmpty32'; 6 | 7 | export const IconCheckboxEmpty: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/CheckboxEmpty/CheckboxEmpty16.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconCheckboxEmpty16: FC = ({ 5 | size = 16, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 20 | 21 | ); 22 | -------------------------------------------------------------------------------- /src/components/icons/CheckboxEmpty/CheckboxEmpty24.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconCheckboxEmpty24: FC = ({ 5 | size = 24, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 21 | 22 | ); 23 | -------------------------------------------------------------------------------- /src/components/icons/CheckboxEmpty/CheckboxEmpty32.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconCheckboxEmpty32: FC = ({ 5 | size = 32, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 21 | 22 | ); 23 | -------------------------------------------------------------------------------- /src/components/icons/CheckboxFilled/CheckboxFilled.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconCheckboxFilled16 } from './CheckboxFilled16'; 4 | import { IconCheckboxFilled24 } from './CheckboxFilled24'; 5 | import { IconCheckboxFilled32 } from './CheckboxFilled32'; 6 | 7 | export const IconCheckboxFilled: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/ChevronDown/ChevronDown.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconChevronDown16 } from './ChevronDown16'; 4 | import { IconChevronDown24 } from './ChevronDown24'; 5 | import { IconChevronDown32 } from './ChevronDown32'; 6 | 7 | export const IconChevronDown: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/ChevronDown/ChevronDown16.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconChevronDown16: FC = ({ 5 | size = 16, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 21 | 22 | ); 23 | -------------------------------------------------------------------------------- /src/components/icons/ChevronDown/ChevronDown24.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconChevronDown24: FC = ({ 5 | size = 24, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/ChevronDown/ChevronDown32.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconChevronDown32: FC = ({ 5 | size = 32, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/ChevronLeft/ChevronLeft.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconChevronLeft16 } from './ChevronLeft16'; 4 | import { IconChevronLeft24 } from './ChevronLeft24'; 5 | import { IconChevronLeft32 } from './ChevronLeft32'; 6 | 7 | export const IconChevronLeft: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/ChevronLeft/ChevronLeft16.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconChevronLeft16: FC = ({ 5 | size = 16, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 21 | 22 | ); 23 | -------------------------------------------------------------------------------- /src/components/icons/ChevronLeft/ChevronLeft24.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconChevronLeft24: FC = ({ 5 | size = 24, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/ChevronLeft/ChevronLeft32.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconChevronLeft32: FC = ({ 5 | size = 32, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/ChevronRight/ChevronRight.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconChevronRight16 } from './ChevronRight16'; 4 | import { IconChevronRight24 } from './ChevronRight24'; 5 | import { IconChevronRight32 } from './ChevronRight32'; 6 | 7 | export const IconChevronRight: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/ChevronRight/ChevronRight16.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconChevronRight16: FC = ({ 5 | size = 16, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 21 | 22 | ); 23 | -------------------------------------------------------------------------------- /src/components/icons/ChevronRight/ChevronRight24.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconChevronRight24: FC = ({ 5 | size = 24, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/ChevronRight/ChevronRight32.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconChevronRight32: FC = ({ 5 | size = 32, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/ChevronUp/ChevronUp.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconChevronUp16 } from './ChevronUp16'; 4 | import { IconChevronUp24 } from './ChevronUp24'; 5 | import { IconChevronUp32 } from './ChevronUp32'; 6 | 7 | export const IconChevronUp: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/ChevronUp/ChevronUp16.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconChevronUp16: FC = ({ 5 | size = 16, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 21 | 22 | ); 23 | -------------------------------------------------------------------------------- /src/components/icons/ChevronUp/ChevronUp24.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconChevronUp24: FC = ({ 5 | size = 24, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/ChevronUp/ChevronUp32.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconChevronUp32: FC = ({ 5 | size = 32, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/Claim/Claim.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconClaim16 } from './Claim16'; 4 | import { IconClaim24 } from './Claim24'; 5 | import { IconClaim32 } from './Claim32'; 6 | 7 | export const IconClaim: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Claim/Claim24.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconClaim24: FC = ({ 5 | size = 24, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/Claim/Claim32.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconClaim32: FC = ({ 5 | size = 32, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/Config/Config.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconConfig16 } from './Config16'; 4 | import { IconConfig24 } from './Config24'; 5 | import { IconConfig32 } from './Config32'; 6 | 7 | export const IconConfig: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Copy/Copy.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconCopy16 } from './Copy16'; 4 | import { IconCopy24 } from './Copy24'; 5 | import { IconCopy32 } from './Copy32'; 6 | 7 | export const IconCopy: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Deactivated/Deactivated.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconDeactivated16 } from './Deactivated16'; 4 | import { IconDeactivated24 } from './Deactivated24'; 5 | import { IconDeactivated32 } from './Deactivated32'; 6 | 7 | export const IconDeactivated: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/DelegateBoost/DelegateBoost.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconDelegateBoost16 } from './DelegateBoost16'; 4 | import { IconDelegateBoost24 } from './DelegateBoost24'; 5 | import { IconDelegateBoost32 } from './DelegateBoost32'; 6 | 7 | export const IconDelegateBoost: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Donation/Donation.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconDonation16 } from './Donation16'; 4 | import { IconDonation24 } from './Donation24'; 5 | import { IconDonation32 } from './Donation32'; 6 | 7 | export const IconDonation: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Dots/Dots.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconDots16 } from './Dots16'; 4 | import { IconDots24 } from './Dots24'; 5 | import { IconDots32 } from './Dots32'; 6 | 7 | export const IconDots: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/DotsHorizontal/DotsHorizontal.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconDotsHorizontal16 } from './DotsHorizontal16'; 4 | import { IconDotsHorizontal24 } from './DotsHorizontal24'; 5 | import { IconDotsHorizontal32 } from './DotsHorizontal32'; 6 | 7 | export const IconDotsHorizontal: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Edit/Edit.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconEdit16 } from './Edit16'; 4 | import { IconEdit24 } from './Edit24'; 5 | import { IconEdit32 } from './Edit32'; 6 | 7 | export const IconEdit: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/EmptyCircle/EmptyCircle.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconEmptyCircle16 } from './EmptyCircle16'; 4 | import { IconEmptyCircle24 } from './EmptyCircle24'; 5 | import { IconEmptyCircle32 } from './EmptyCircle32'; 6 | 7 | export const IconEmptyCircle: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/EmptyCircle/EmptyCircle16.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconEmptyCircle16: FC = ({ 5 | size = 16, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 21 | 22 | ); 23 | -------------------------------------------------------------------------------- /src/components/icons/EmptyCircle/EmptyCircle24.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconEmptyCircle24: FC = ({ 5 | size = 24, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/EmptyCircle/EmptyCircle32.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconEmptyCircle32: FC = ({ 5 | size = 32, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/Enter/Enter.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconEnter16 } from './Enter16'; 4 | import { IconEnter24 } from './Enter24'; 5 | import { IconEnter32 } from './Enter32'; 6 | 7 | export const IconEnter: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Enter/Enter16.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconEnter16: FC = ({ 5 | size = 16, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 21 | 22 | ); 23 | -------------------------------------------------------------------------------- /src/components/icons/Enter/Enter24.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconEnter24: FC = ({ 5 | size = 24, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/Enter/Enter32.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconEnter32: FC = ({ 5 | size = 32, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/Estimated/Estimated.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconEstimated16 } from './Estimated16'; 4 | import { IconEstimated24 } from './Estimated24'; 5 | import { IconEstimated32 } from './Estimated32'; 6 | 7 | export const IconEstimated: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/ExternalLink/ExternalLink.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconExternalLink16 } from './ExternalLink16'; 4 | import { IconExternalLink24 } from './ExternalLink24'; 5 | import { IconExternalLink32 } from './ExternalLink32'; 6 | 7 | export const IconExternalLink: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Eye/Eye.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconEye16 } from './Eye16'; 4 | import { IconEye24 } from './Eye24'; 5 | import { IconEye32 } from './Eye32'; 6 | 7 | export const IconEye: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/EyeOff/EyeOff.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconEyeOff16 } from './EyeOff16'; 4 | import { IconEyeOff24 } from './EyeOff24'; 5 | import { IconEyeOff32 } from './EyeOff32'; 6 | 7 | export const IconEyeOff: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Farm/Farm.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconFarm16 } from './Farm16'; 4 | import { IconFarm24 } from './Farm24'; 5 | import { IconFarm32 } from './Farm32'; 6 | 7 | export const IconFarm: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/FarmDisabled/FarmDisabled.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconFarmDisabled16 } from './FarmDisabled16'; 4 | import { IconFarmDisabled24 } from './FarmDisabled24'; 5 | import { IconFarmDisabled32 } from './FarmDisabled32'; 6 | 7 | export const IconFarmDisabled: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Fast/Fast.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconFast16 } from './Fast16'; 4 | import { IconFast24 } from './Fast24'; 5 | import { IconFast32 } from './Fast32'; 6 | 7 | export const IconFast: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Fast/Fast16.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconFast16: FC = ({ 5 | size = 16, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 21 | 22 | ); 23 | -------------------------------------------------------------------------------- /src/components/icons/Fast/Fast24.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconFast24: FC = ({ 5 | size = 24, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 21 | 22 | ); 23 | -------------------------------------------------------------------------------- /src/components/icons/Fast/Fast32.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconFast32: FC = ({ 5 | size = 32, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 21 | 22 | ); 23 | -------------------------------------------------------------------------------- /src/components/icons/File/File.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconFile16 } from './File16'; 4 | import { IconFile24 } from './File24'; 5 | import { IconFile32 } from './File32'; 6 | 7 | export const IconFile: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/File/File24.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconFile24: FC = ({ 5 | size = 24, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/Filter/Filter.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconFilter16 } from './Filter16'; 4 | import { IconFilter24 } from './Filter24'; 5 | import { IconFilter32 } from './Filter32'; 6 | 7 | export const IconFilter: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Filter/Filter16.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconFilter16: FC = ({ 5 | size = 16, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 21 | 22 | ); 23 | -------------------------------------------------------------------------------- /src/components/icons/Filter/Filter24.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconFilter24: FC = ({ 5 | size = 24, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/Filter/Filter32.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconFilter32: FC = ({ 5 | size = 32, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/Fingerprint/Fingerprint.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconFingerprint32 } from './Fingerprint32'; 4 | 5 | export const IconFingerprint: FC = ({ 6 | size = 16, 7 | color = 'currentColor', 8 | }) => { 9 | switch (size.toString()) { 10 | case '32': 11 | return ; 12 | default: 13 | return ; 14 | } 15 | }; 16 | -------------------------------------------------------------------------------- /src/components/icons/Flag/Flag.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconFlag16 } from './Flag16'; 4 | import { IconFlag24 } from './Flag24'; 5 | import { IconFlag32 } from './Flag32'; 6 | 7 | export const IconFlag: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Flag/Flag24.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconFlag24: FC = ({ 5 | size = 24, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 29 | 30 | ); 31 | -------------------------------------------------------------------------------- /src/components/icons/Flash/Flash.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconFlash16 } from './Flash16'; 4 | import { IconFlash24 } from './Flash24'; 5 | import { IconFlash32 } from './Flash32'; 6 | 7 | export const IconFlash: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/FormSubmit/FormSubmit.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconFormSubmit16 } from './FormSubmit16'; 4 | import { IconFormSubmit24 } from './FormSubmit24'; 5 | import { IconFormSubmit32 } from './FormSubmit32'; 6 | 7 | export const IconFormSubmit: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Forward/Forward.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconForward16 } from './Forward16'; 4 | import { IconForward24 } from './Forward24'; 5 | import { IconForward32 } from './Forward32'; 6 | 7 | export const IconForward: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Forward/Forward16.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconForward16: FC = ({ 5 | size = 16, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 21 | 22 | ); 23 | -------------------------------------------------------------------------------- /src/components/icons/Forward/Forward24.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconForward24: FC = ({ 5 | size = 24, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/Forward/Forward32.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconForward32: FC = ({ 5 | size = 32, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/Fund/Fund.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconFund24 } from './Fund24'; 4 | import { IconFund32 } from './Fund32'; 5 | 6 | export const IconFund: FC = ({ 7 | size = 16, 8 | color = 'currentColor', 9 | }) => { 10 | switch (size.toString()) { 11 | case '24': 12 | return ; 13 | case '32': 14 | return ; 15 | default: 16 | return ; 17 | } 18 | }; 19 | -------------------------------------------------------------------------------- /src/components/icons/GasStation/GasStation.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconGasStation16 } from './GasStation16'; 4 | import { IconGasStation24 } from './GasStation24'; 5 | import { IconGasStation32 } from './GasStation32'; 6 | 7 | export const IconGasStation: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Gift/Gift.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconGift24 } from './Gift24'; 4 | import { IconGift32 } from './Gift32'; 5 | import { IconGift16 } from './Gift16'; 6 | 7 | export const IconGift: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Heart/Heart.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconHeart16 } from './Heart16'; 4 | import { IconHeart24 } from './Heart24'; 5 | import { IconHeart32 } from './Heart32'; 6 | 7 | export const IconHeart: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/HeartFilled/HeartFilled.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconHeartFilled16 } from './HeartFilled16'; 4 | import { IconHeartFilled24 } from './HeartFilled24'; 5 | import { IconHeartFilled32 } from './HeartFilled32'; 6 | 7 | export const IconHeartFilled: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/HeartOutline/HeartOutline.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconHeartOutline16 } from './HeartOutline16'; 4 | import { IconHeartOutline24 } from './HeartOutline24'; 5 | import { IconHeartOutline32 } from './HeartOutline32'; 6 | 7 | export const IconHeartOutline: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/HelpFilled/HelpFilled.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconHelpFilled16 } from './HelpFilled16'; 4 | import { IconHelpFilled24 } from './HelpFilled24'; 5 | import { IconHelpFilled32 } from './HelpFilled32'; 6 | 7 | export const IconHelpFilled: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/HelpOutline/HelpOutline.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconHelpOutline16 } from './HelpOutline16'; 4 | import { IconHelpOutline24 } from './HelpOutline24'; 5 | import { IconHelpOutline32 } from './HelpOutline32'; 6 | 7 | export const IconHelpOutline: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Image/Image.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconImage16 } from './Image16'; 4 | import { IconImage24 } from './Image24'; 5 | import { IconImage32 } from './Image32'; 6 | 7 | export const IconImage: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Increase/Increase.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconIncrease16 } from './Increase16'; 4 | import { IconIncrease24 } from './Increase24'; 5 | import { IconIncrease32 } from './Increase32'; 6 | 7 | export const IconIncrease: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Increase/Increase16.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconIncrease16: FC = ({ 5 | size = 16, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 21 | 27 | 28 | ); 29 | -------------------------------------------------------------------------------- /src/components/icons/Increase/Increase24.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconIncrease24: FC = ({ 5 | size = 24, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 29 | 30 | ); 31 | -------------------------------------------------------------------------------- /src/components/icons/Increase/Increase32.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconIncrease32: FC = ({ 5 | size = 32, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 29 | 30 | ); 31 | -------------------------------------------------------------------------------- /src/components/icons/Info/Info.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconInfo16 } from './Info16'; 4 | import { IconInfo24 } from './Info24'; 5 | import { IconInfo32 } from './Info32'; 6 | 7 | export const IconInfo: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/InfoFilled/InfoFilled.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconInfoFilled16 } from './InfoFilled16'; 4 | import { IconInfoFilled24 } from './InfoFilled24'; 5 | import { IconInfoFilled32 } from './InfoFilled32'; 6 | 7 | export const IconInfoFilled: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/InfoOutline/InfoOutline.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconInfoOutline16 } from './InfoOutline16'; 4 | import { IconInfoOutline24 } from './InfoOutline24'; 5 | import { IconInfoOutline32 } from './InfoOutline32'; 6 | 7 | export const IconInfoOutline: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Link/Link.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconLink16 } from './Link16'; 4 | import { IconLink24 } from './Link24'; 5 | import { IconLink32 } from './Link32'; 6 | 7 | export const IconLink: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Listed/Listed.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconListed16 } from './Listed16'; 4 | import { IconListed24 } from './Listed24'; 5 | import { IconListed32 } from './Listed32'; 6 | 7 | export const IconListed: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Lock/Lock.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconLock16 } from './Lock16'; 4 | import { IconLock24 } from './Lock24'; 5 | import { IconLock32 } from './Lock32'; 6 | 7 | export const IconLock: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Menu/Menu.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconMenu16 } from './Menu16'; 4 | import { IconMenu24 } from './Menu24'; 5 | import { IconMenu32 } from './Menu32'; 6 | 7 | export const IconMenu: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Menu/Menu16.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconMenu16: FC = ({ 5 | size = 16, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 21 | 27 | 33 | 34 | ); 35 | -------------------------------------------------------------------------------- /src/components/icons/MessageSquare/MessageSquare.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconMessageSquare16 } from './MessageSquare16'; 4 | import { IconMessageSquare24 } from './MessageSquare24'; 5 | import { IconMessageSquare32 } from './MessageSquare32'; 6 | 7 | export const IconMessageSquare: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Network/Network.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconNetwork24 } from './Network24'; 4 | import { IconNetwork32 } from './Network32'; 5 | 6 | export const IconNetwork: FC = ({ 7 | size = 16, 8 | color = 'currentColor', 9 | }) => { 10 | switch (size.toString()) { 11 | case '24': 12 | return ; 13 | case '32': 14 | return ; 15 | default: 16 | return ; 17 | } 18 | }; 19 | -------------------------------------------------------------------------------- /src/components/icons/NoGiveback/NoGiveback.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconNoGiveback16 } from './NoGiveback16'; 4 | import { IconNoGiveback24 } from './NoGiveback24'; 5 | import { IconNoGiveback32 } from './NoGiveback32'; 6 | 7 | export const IconNoGiveback: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Notification/Notification.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconNotification16 } from './Notification16'; 4 | import { IconNotification24 } from './Notification24'; 5 | import { IconNotification32 } from './Notification32'; 6 | 7 | export const IconNotification: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Options/Options.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconOptions16 } from './Options16'; 4 | import { IconOptions24 } from './Options24'; 5 | import { IconOptions32 } from './Options32'; 6 | 7 | export const IconOptions: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Overview/Overview.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconOverview16 } from './Overview16'; 4 | import { IconOverview24 } from './Overview24'; 5 | import { IconOverview32 } from './Overview32'; 6 | 7 | export const IconOverview: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Passport/Passport.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconPassport16 } from './Passport16'; 4 | import { IconPassport24 } from './Passport24'; 5 | import { IconPassport32 } from './Passport32'; 6 | 7 | export const IconPassport: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Plus/Plus.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconPlus16 } from './Plus16'; 4 | import { IconPlus24 } from './Plus24'; 5 | import { IconPlus32 } from './Plus32'; 6 | 7 | export const IconPlus: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Plus/Plus16.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconPlus16: FC = ({ 5 | size = 16, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 21 | 22 | ); 23 | -------------------------------------------------------------------------------- /src/components/icons/Plus/Plus24.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconPlus24: FC = ({ 5 | size = 24, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/Plus/Plus32.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconPlus32: FC = ({ 5 | size = 32, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/PointerLeft/PointerLeft.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconPointerLeft16 } from './PointerLeft16'; 4 | import { IconPointerLeft24 } from './PointerLeft24'; 5 | import { IconPointerLeft32 } from './PointerLeft32'; 6 | 7 | export const IconPointerLeft: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/PointerLeft/PointerLeft16.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconPointerLeft16: FC = ({ 5 | size = 16, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/PointerLeft/PointerLeft24.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconPointerLeft24: FC = ({ 5 | size = 24, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/PointerLeft/PointerLeft32.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconPointerLeft32: FC = ({ 5 | size = 32, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/PointerRight/PointerRight.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconPointerRight16 } from './PointerRight16'; 4 | import { IconPointerRight24 } from './PointerRight24'; 5 | import { IconPointerRight32 } from './PointerRight32'; 6 | 7 | export const IconPointerRight: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/PointerRight/PointerRight16.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconPointerRight16: FC = ({ 5 | size = 16, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/PointerRight/PointerRight24.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconPointerRight24: FC = ({ 5 | size = 24, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/PointerRight/PointerRight32.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconPointerRight32: FC = ({ 5 | size = 32, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/Praise/Praise.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconPraise16 } from './Praise16'; 4 | import { IconPraise24 } from './Praise24'; 5 | import { IconPraise32 } from './Praise32'; 6 | 7 | export const IconPraise: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Profile/Profile.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconProfile16 } from './Profile16'; 4 | import { IconProfile24 } from './Profile24'; 5 | import { IconProfile32 } from './Profile32'; 6 | 7 | export const IconProfile: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Publish/Publish.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconPublish16 } from './Publish16'; 4 | import { IconPublish24 } from './Publish24'; 5 | import { IconPublish32 } from './Publish32'; 6 | 7 | export const IconPublish: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/QF/QF.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconQF16 } from './QF16'; 4 | import { IconQF24 } from './QF24'; 5 | import { IconQF32 } from './QF32'; 6 | 7 | export const IconQF: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/QrCodeOutline/QrCodeOutline.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconQrCodeOutline16 } from './QrCodeOutline16'; 4 | import { IconQrCodeOutline24 } from './QrCodeOutline24'; 5 | import { IconQrCodeOutline32 } from './QrCodeOutline32'; 6 | 7 | export const IconQrCodeOutline: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Refresh/Refresh.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconRefresh16 } from './Refresh16'; 4 | import { IconRefresh24 } from './Refresh24'; 5 | import { IconRefresh32 } from './Refresh32'; 6 | 7 | export const IconRefresh: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Rejected/Rejected.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconRejected16 } from './Rejected16'; 4 | import { IconRejected24 } from './Rejected24'; 5 | import { IconRejected32 } from './Rejected32'; 6 | 7 | export const IconRejected: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Rocket/Rocket.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconRocket16 } from './Rocket16'; 4 | import { IconRocket24 } from './Rocket24'; 5 | import { IconRocket32 } from './Rocket32'; 6 | 7 | export const IconRocket: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/RocketInSpace/RocketInSpace.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconRocketInSpace16 } from './RocketInSpace16'; 4 | import { IconRocketInSpace24 } from './RocketInSpace24'; 5 | import { IconRocketInSpace32 } from './RocketInSpace32'; 6 | 7 | export const IconRocketInSpace: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Search/Search.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconSearch16 } from './Search16'; 4 | import { IconSearch24 } from './Search24'; 5 | import { IconSearch32 } from './Search32'; 6 | 7 | export const IconSearch: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Search/Search16.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconSearch16: FC = ({ 5 | size = 16, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 21 | 22 | ); 23 | -------------------------------------------------------------------------------- /src/components/icons/Search/Search24.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconSearch24: FC = ({ 5 | size = 24, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/Search/Search32.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconSearch32: FC = ({ 5 | size = 32, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/Share/Share.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconShare16 } from './Share16'; 4 | import { IconShare24 } from './Share24'; 5 | import { IconShare32 } from './Share32'; 6 | 7 | export const IconShare: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Shield/Shield.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconShield16 } from './Shield16'; 4 | import { IconShield24 } from './Shield24'; 5 | import { IconShield32 } from './Shield32'; 6 | 7 | export const IconShield: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Shield/Shield16.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconShield16: FC = ({ 5 | size = 16, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 21 | 22 | ); 23 | -------------------------------------------------------------------------------- /src/components/icons/Shield/Shield24.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconShield24: FC = ({ 5 | size = 24, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/Shield/Shield32.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconShield32: FC = ({ 5 | size = 32, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/Signature/Signature.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconSignature16 } from './Signature16'; 4 | import { IconSignature24 } from './Signature24'; 5 | import { IconSignature32 } from './Signature32'; 6 | 7 | export const IconSignature: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Sorting/Sorting.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconSorting16 } from './Sorting16'; 4 | import { IconSorting24 } from './Sorting24'; 5 | import { IconSorting32 } from './Sorting32'; 6 | 7 | export const IconSorting: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Sorting/Sorting16.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconSorting16: FC = ({ 5 | size = 16, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 21 | 22 | ); 23 | -------------------------------------------------------------------------------- /src/components/icons/Sorting/Sorting24.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconSorting24: FC = ({ 5 | size = 24, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/Sorting/Sorting32.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconSorting32: FC = ({ 5 | size = 32, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/Spark/Spark.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconSpark16 } from './Spark16'; 4 | import { IconSpark24 } from './Spark24'; 5 | import { IconSpark32 } from './Spark32'; 6 | 7 | export const IconSpark: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Stake/Stake.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconStake16 } from './Stake16'; 4 | import { IconStake24 } from './Stake24'; 5 | import { IconStake32 } from './Stake32'; 6 | 7 | export const IconStake: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Star/Star.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconStar16 } from './Star16'; 4 | import { IconStar24 } from './Star24'; 5 | import { IconStar32 } from './Star32'; 6 | 7 | export const IconStar: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Sunrise/Sunrise.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconSunrise16 } from './Sunrise16'; 4 | import { IconSunrise24 } from './Sunrise24'; 5 | import { IconSunrise32 } from './Sunrise32'; 6 | 7 | export const IconSunrise: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Trace/Trace.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconTrace16 } from './Trace16'; 4 | import { IconTrace24 } from './Trace24'; 5 | import { IconTrace32 } from './Trace32'; 6 | 7 | export const IconTrace: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Transfer/Transfer.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconTransfer16 } from './Transfer16'; 4 | import { IconTransfer24 } from './Transfer24'; 5 | import { IconTransfer32 } from './Transfer32'; 6 | 7 | export const IconTransfer: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Transfer/Transfer16.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconTransfer16: FC = ({ 5 | size = 16, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 21 | 22 | ); 23 | -------------------------------------------------------------------------------- /src/components/icons/Transfer/Transfer24.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconTransfer24: FC = ({ 5 | size = 24, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/Transfer/Transfer32.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconTransfer32: FC = ({ 5 | size = 32, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/Trash/Trash.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconTrash16 } from './Trash16'; 4 | import { IconTrash24 } from './Trash24'; 5 | import { IconTrash32 } from './Trash32'; 6 | 7 | export const IconTrash: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/UnArchive/UnArchive.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconUnArchive16 } from './UnArchive16'; 4 | import { IconUnArchive24 } from './UnArchive24'; 5 | import { IconUnArchive32 } from './UnArchive32'; 6 | 7 | export const IconUnArchive: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/UnLockable/UnLockable.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconUnLockable16 } from './UnLockable16'; 4 | import { IconUnLockable24 } from './UnLockable24'; 5 | import { IconUnLockable32 } from './UnLockable32'; 6 | 7 | export const IconUnLockable: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/UnLockable/UnLockable24.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconUnLockable24: FC = ({ 5 | size = 24, 6 | color = 'currentColor', 7 | }) => ( 8 | 14 | 21 | 22 | ); 23 | -------------------------------------------------------------------------------- /src/components/icons/UnLockable/UnLockable32.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconUnLockable32: FC = ({ 5 | size = 32, 6 | color = 'currentColor', 7 | }) => ( 8 | 14 | 21 | 22 | ); 23 | -------------------------------------------------------------------------------- /src/components/icons/Unlisted/Unlisted.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconUnlisted16 } from './Unlisted16'; 4 | import { IconUnlisted24 } from './Unlisted24'; 5 | import { IconUnlisted32 } from './Unlisted32'; 6 | 7 | export const IconUnlisted: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Unlock/Unlock.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconUnlock16 } from './Unlock16'; 4 | import { IconUnlock24 } from './Unlock24'; 5 | import { IconUnlock32 } from './Unlock32'; 6 | 7 | export const IconUnlock: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Unstake/Unstake.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconUnstake16 } from './Unstake16'; 4 | import { IconUnstake24 } from './Unstake24'; 5 | import { IconUnstake32 } from './Unstake32'; 6 | 7 | export const IconUnstake: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Update/Update.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconUpdate16 } from './Update16'; 4 | import { IconUpdate24 } from './Update24'; 5 | import { IconUpdate32 } from './Update32'; 6 | 7 | export const IconUpdate: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/Verified/Verified.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconVerified24 } from './Verified24'; 4 | 5 | export const IconVerified: FC = ({ 6 | size = 16, 7 | color = 'currentColor', 8 | }) => { 9 | switch (size.toString()) { 10 | case '24': 11 | return ; 12 | default: 13 | return ; 14 | } 15 | }; 16 | -------------------------------------------------------------------------------- /src/components/icons/VerifiedBadge/VerifiedBadge.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconVerifiedBadge16 } from './VerifiedBadge16'; 4 | import { IconVerifiedBadge24 } from './VerifiedBadge24'; 5 | import { IconVerifiedBadge32 } from './VerifiedBadge32'; 6 | 7 | export const IconVerifiedBadge: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/WalletApprove/WalletApprove.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconWalletApprove16 } from './WalletApprove16'; 4 | import { IconWalletApprove24 } from './WalletApprove24'; 5 | import { IconWalletApprove32 } from './WalletApprove32'; 6 | 7 | export const IconWalletApprove: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/WalletOutline/WalletOutline.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconWalletOutline16 } from './WalletOutline16'; 4 | import { IconWalletOutline24 } from './WalletOutline24'; 5 | import { IconWalletOutline32 } from './WalletOutline32'; 6 | 7 | export const IconWalletOutline: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/World/World.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconWorld16 } from './World16'; 4 | import { IconWorld24 } from './World24'; 5 | import { IconWorld32 } from './World32'; 6 | 7 | export const IconWorld: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/WrongNetwork/WrongNetwork.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconWrongNetwork24 } from './WrongNetwork24'; 4 | import { IconWrongNetwork32 } from './WrongNetwork32'; 5 | 6 | export const IconWrongNetwork: FC = ({ 7 | size = 24, 8 | color = 'currentColor', 9 | }) => { 10 | switch (size.toString()) { 11 | case '24': 12 | return ; 13 | case '32': 14 | return ; 15 | default: 16 | return ; 17 | } 18 | }; 19 | -------------------------------------------------------------------------------- /src/components/icons/X/X.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconX16 } from './X16'; 4 | import { IconX24 } from './X24'; 5 | import { IconX32 } from './X32'; 6 | 7 | export const IconX: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/X/X16.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconX16: FC = ({ 5 | size = 16, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 21 | 22 | ); 23 | -------------------------------------------------------------------------------- /src/components/icons/X/X24.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconX24: FC = ({ 5 | size = 24, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/X/X32.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconX32: FC = ({ 5 | size = 32, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/XCircle/XCircle.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | import { IconXCircle16 } from './XCircle16'; 4 | import { IconXCircle24 } from './XCircle24'; 5 | import { IconXCircle32 } from './XCircle32'; 6 | 7 | export const IconXCircle: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/icons/XCircle/XCircle16.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconXCircle16: FC = ({ 5 | size = 16, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 21 | 22 | ); 23 | -------------------------------------------------------------------------------- /src/components/icons/XCircle/XCircle24.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconXCircle24: FC = ({ 5 | size = 24, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/XCircle/XCircle32.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { IIconProps } from '../type'; 3 | 4 | export const IconXCircle32: FC = ({ 5 | size = 32, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/icons/giv-economy/type.ts: -------------------------------------------------------------------------------- 1 | export interface IIconProps { 2 | color?: string; 3 | size?: 16 | 24 | 32 | 64; 4 | } 5 | -------------------------------------------------------------------------------- /src/components/icons/type.ts: -------------------------------------------------------------------------------- 1 | export interface IIconProps { 2 | color?: string; 3 | size?: 16 | 24 | 32 | number; 4 | } 5 | -------------------------------------------------------------------------------- /src/components/social-icons/Discord/Discord.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { ISocialIconProps } from '../type'; 3 | import { IconDiscord18 } from './Discord18'; 4 | import { IconDiscord24 } from './Discord24'; 5 | 6 | export const IconDiscord: FC = ({ 7 | size = 18, 8 | color = 'currentColor', 9 | }) => { 10 | switch (size.toString()) { 11 | case '18': 12 | return ; 13 | case '24': 14 | return ; 15 | default: 16 | return ; 17 | } 18 | }; 19 | -------------------------------------------------------------------------------- /src/components/social-icons/Docs/Docs.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { ISocialIconProps } from '../type'; 3 | import { IconDocs16 } from './Docs16'; 4 | import { IconDocs24 } from './Docs24'; 5 | import { IconDocs32 } from './Docs32'; 6 | 7 | export const IconDocs: FC = ({ 8 | size = 16, 9 | color = 'currentColor', 10 | }) => { 11 | switch (size.toString()) { 12 | case '16': 13 | return ; 14 | case '24': 15 | return ; 16 | case '32': 17 | return ; 18 | default: 19 | return ; 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/social-icons/Facebook/Facebook.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { ISocialIconProps } from '../type'; 3 | import { IconFacebook18 } from './Facebook18'; 4 | import { IconFacebook24 } from './Facebook24'; 5 | 6 | export const IconFacebook: FC = ({ 7 | size = 18, 8 | color = 'currentColor', 9 | }) => { 10 | switch (size.toString()) { 11 | case '18': 12 | return ; 13 | case '24': 14 | return ; 15 | default: 16 | return ; 17 | } 18 | }; 19 | -------------------------------------------------------------------------------- /src/components/social-icons/Instagram/Instagram.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { ISocialIconProps } from '../type'; 3 | import { IconInstagram18 } from './Instagram18'; 4 | import { IconInstagram24 } from './Instagram24'; 5 | 6 | export const IconInstagram: FC = ({ 7 | size = 18, 8 | color = 'currentColor', 9 | }) => { 10 | switch (size.toString()) { 11 | case '18': 12 | return ; 13 | case '24': 14 | return ; 15 | default: 16 | return ; 17 | } 18 | }; 19 | -------------------------------------------------------------------------------- /src/components/social-icons/Linkedin/Linkedin.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { ISocialIconProps } from '../type'; 3 | import { IconLinkedin18 } from './Linkedin18'; 4 | import { IconLinkedin24 } from './Linkedin24'; 5 | 6 | export const IconLinkedin: FC = ({ 7 | size = 18, 8 | color = 'currentColor', 9 | }) => { 10 | switch (size.toString()) { 11 | case '18': 12 | return ; 13 | case '24': 14 | return ; 15 | default: 16 | return ; 17 | } 18 | }; 19 | -------------------------------------------------------------------------------- /src/components/social-icons/Telegram/Telegram.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { ISocialIconProps } from '../type'; 3 | import { IconTelegram16 } from './Telegram16'; 4 | 5 | export const IconTelegram: FC = ({ 6 | size = 16, 7 | color = 'currentColor', 8 | }) => { 9 | switch (size.toString()) { 10 | case '16': 11 | return ; 12 | default: 13 | return ; 14 | } 15 | }; 16 | -------------------------------------------------------------------------------- /src/components/social-icons/WhatsApp/WhatsApp.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { ISocialIconProps } from '../type'; 3 | import { IconWhatsApp18 } from './WhatsApp18'; 4 | 5 | export const IconWhatsApp: FC = ({ 6 | size = 18, 7 | color = 'currentColor', 8 | }) => { 9 | switch (size.toString()) { 10 | case '18': 11 | return ; 12 | default: 13 | return ; 14 | } 15 | }; 16 | -------------------------------------------------------------------------------- /src/components/social-icons/XSocial/XSocial.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { ISocialIconProps } from '../type'; 3 | import { IconXSocial18 } from './XSocial18'; 4 | import { IconXSocial24 } from './XSocial24'; 5 | 6 | export const IconXSocial: FC = ({ 7 | size = 18, 8 | color = 'currentColor', 9 | }) => { 10 | switch (size.toString()) { 11 | case '18': 12 | return ; 13 | case '24': 14 | return ; 15 | default: 16 | return ; 17 | } 18 | }; 19 | -------------------------------------------------------------------------------- /src/components/social-icons/XSocial/XSocial18.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { ISocialIconProps } from '../type'; 3 | 4 | export const IconXSocial18: FC = ({ 5 | size = 18, 6 | color = 'currentColor', 7 | }) => ( 8 | 15 | 19 | 20 | ); 21 | -------------------------------------------------------------------------------- /src/components/social-icons/type.ts: -------------------------------------------------------------------------------- 1 | export interface ISocialIconProps { 2 | color?: string; 3 | size?: 18 | 24 | 32 | number; 4 | } 5 | -------------------------------------------------------------------------------- /src/components/typography/QuoteText.tsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export interface IQuoteTextProps { 4 | size?: 'small' | 'medium' | 'large'; 5 | } 6 | 7 | export const QuoteText = styled.div` 8 | /* QuoteText */ 9 | font-family: 10 | Red Hat Text, 11 | sans-serif; 12 | font-weight: normal; 13 | font-style: normal; 14 | line-height: 134%; 15 | color: ${props => (props.color ? props.color : 'inherit')}; 16 | ${props => { 17 | switch (props.size) { 18 | case 'small': 19 | return 'font-size: 1.5rem;'; 20 | case 'medium': 21 | return 'font-size: 1.75rem;'; 22 | case 'large': 23 | return 'font-size: 2rem;'; 24 | default: 25 | return 'font-size: 1.75rem;'; 26 | } 27 | }} 28 | `; 29 | -------------------------------------------------------------------------------- /src/components/typography/body/B.tsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { P } from './P'; 3 | 4 | export const B = styled(P)` 5 | font-weight: 500; 6 | `; 7 | -------------------------------------------------------------------------------- /src/components/typography/body/Caption.tsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export interface ICaptionProps { 4 | $medium?: boolean; 5 | } 6 | 7 | export const Caption = styled.div` 8 | /* Body/Caption */ 9 | font-family: 10 | Red Hat Text, 11 | sans-serif; 12 | font-style: normal; 13 | font-weight: ${props => (props.$medium ? 500 : 400)}; 14 | font-size: 0.875rem; 15 | line-height: 150%; 16 | color: ${props => (props.color ? props.color : 'inherit')}; 17 | `; 18 | -------------------------------------------------------------------------------- /src/components/typography/body/P.tsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const P = styled.div` 4 | /* Body/P */ 5 | font-family: 6 | Red Hat Text, 7 | sans-serif; 8 | font-style: normal; 9 | font-weight: normal; 10 | font-size: 1rem; 11 | line-height: 150%; 12 | color: ${props => (props.color ? props.color : 'inherit')}; 13 | `; 14 | -------------------------------------------------------------------------------- /src/components/typography/body/SemiTitle.tsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const SemiTitle = styled.div` 4 | /* Body/SEMI-TITLE */ 5 | font-family: 6 | Red Hat Text, 7 | sans-serif; 8 | font-style: normal; 9 | font-weight: normal; 10 | font-size: 1rem; 11 | line-height: 150%; 12 | text-transform: uppercase; 13 | color: ${props => (props.color ? props.color : 'inherit')}; 14 | `; 15 | -------------------------------------------------------------------------------- /src/components/typography/body/Subline.tsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Subline = styled.div` 4 | /* Body/Subline */ 5 | font-family: 6 | Red Hat Text, 7 | sans-serif; 8 | font-style: normal; 9 | font-weight: normal; 10 | font-size: 0.75rem; 11 | line-height: 150%; 12 | color: ${props => (props.color ? props.color : 'inherit')}; 13 | `; 14 | -------------------------------------------------------------------------------- /src/components/typography/body/SublineBold.tsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { Subline } from './Subline'; 3 | 4 | export const SublineBold = styled(Subline)` 5 | font-weight: 500; 6 | `; 7 | -------------------------------------------------------------------------------- /src/components/typography/body/Title.tsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Title = styled.div` 4 | /* Body/Title */ 5 | font-family: 'Red Hat Display', sans-serif; 6 | font-style: normal; 7 | font-weight: 700; 8 | font-size: 2rem; 9 | line-height: 132%; 10 | letter-spacing: -0.01em; 11 | color: ${props => (props.color ? props.color : 'inherit')}; 12 | `; 13 | -------------------------------------------------------------------------------- /src/components/typography/displays/D.tsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const D = styled.div` 4 | /* Display/D1 */ 5 | font-family: 6 | TeX Gyre Adventor, 7 | sans-serif; 8 | font-style: normal; 9 | font-weight: 700; 10 | letter-spacing: -0.04em; 11 | color: ${props => (props.color ? props.color : 'inherit')}; 12 | `; 13 | -------------------------------------------------------------------------------- /src/components/typography/displays/D1.tsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { mediaQueries } from '../../../common/deviceSize'; 3 | import { D } from './D'; 4 | 5 | export const D1 = styled(D)` 6 | /* Display/D1 */ 7 | font-size: 5rem; 8 | line-height: 130%; 9 | ${mediaQueries.tablet} { 10 | font-size: 6.69rem; 11 | } 12 | `; 13 | -------------------------------------------------------------------------------- /src/components/typography/displays/D2.tsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { mediaQueries } from '../../../common/deviceSize'; 3 | import { D } from './D'; 4 | 5 | export const D2 = styled(D)` 6 | /* Display/D2 */ 7 | font-size: 4.625rem; 8 | line-height: 130%; 9 | ${mediaQueries.tablet} { 10 | font-size: 6.06rem; 11 | } 12 | `; 13 | -------------------------------------------------------------------------------- /src/components/typography/displays/D3.tsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { mediaQueries } from '../../../common/deviceSize'; 3 | import { D } from './D'; 4 | 5 | export const D3 = styled(D)` 6 | /* Display/D3 */ 7 | font-size: 4.25rem; 8 | line-height: 120%; 9 | ${mediaQueries.tablet} { 10 | font-size: 5.5rem; 11 | } 12 | `; 13 | -------------------------------------------------------------------------------- /src/components/typography/headlines/H1.tsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { IHeadingProps } from './common'; 3 | import { mediaQueries } from '../../../common/deviceSize'; 4 | 5 | export const H1 = styled.h1` 6 | /* Heading/H1 | 500 */ 7 | font-family: 8 | TeX Gyre Adventor, 9 | sans-serif; 10 | font-style: normal; 11 | font-weight: ${props => props.weight || 500}; 12 | font-size: 2.5rem; 13 | line-height: 130%; 14 | letter-spacing: -0.03em; 15 | margin-top: 0; 16 | margin-bottom: 0; 17 | color: ${props => (props.color ? props.color : 'inherit')}; 18 | ${mediaQueries.tablet} { 19 | font-size: 4.125rem; 20 | } 21 | `; 22 | -------------------------------------------------------------------------------- /src/components/typography/headlines/H2.tsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { IHeadingProps } from './common'; 3 | import { mediaQueries } from '../../../common/deviceSize'; 4 | 5 | export const H2 = styled.h2` 6 | /* Heading/H2 | 500 */ 7 | font-family: 8 | TeX Gyre Adventor, 9 | sans-serif; 10 | font-style: normal; 11 | font-weight: ${props => props.weight || 500}; 12 | font-size: 2.25rem; 13 | line-height: 130%; 14 | letter-spacing: -0.02em; 15 | margin-top: 0; 16 | margin-bottom: 0; 17 | color: ${props => (props.color ? props.color : 'inherit')}; 18 | ${mediaQueries.tablet} { 19 | font-size: 3.25rem; 20 | } 21 | `; 22 | -------------------------------------------------------------------------------- /src/components/typography/headlines/H3.tsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { IHeadingProps } from './common'; 3 | import { mediaQueries } from '../../../common/deviceSize'; 4 | 5 | export const H3 = styled.h3` 6 | /* Heading/H3 | 500 */ 7 | font-family: 8 | TeX Gyre Adventor, 9 | sans-serif; 10 | font-style: normal; 11 | font-weight: ${props => props.weight || 500}; 12 | font-size: 2rem; 13 | line-height: 130%; 14 | margin-top: 0; 15 | margin-bottom: 0; 16 | color: ${props => (props.color ? props.color : 'inherit')}; 17 | ${mediaQueries.tablet} { 18 | font-size: 2.56rem; 19 | } 20 | `; 21 | -------------------------------------------------------------------------------- /src/components/typography/headlines/H4.tsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { IHeadingProps } from './common'; 3 | import { mediaQueries } from '../../../common/deviceSize'; 4 | 5 | export const H4 = styled.h4` 6 | /* Heading/H4 | 500 */ 7 | font-family: 8 | TeX Gyre Adventor, 9 | sans-serif; 10 | font-style: normal; 11 | font-weight: ${props => props.weight || 500}; 12 | font-size: 1.75rem; 13 | line-height: normal; 14 | letter-spacing: -0.01em; 15 | margin-top: 0; 16 | margin-bottom: 0; 17 | color: ${props => (props.color ? props.color : 'inherit')}; 18 | ${mediaQueries.tablet} { 19 | font-size: 2rem; 20 | } 21 | `; 22 | -------------------------------------------------------------------------------- /src/components/typography/headlines/H5.tsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { IHeadingProps } from './common'; 3 | import { mediaQueries } from '../../../common/deviceSize'; 4 | 5 | export const H5 = styled.h5` 6 | /* Heading/H5 | 500 */ 7 | font-family: 8 | TeX Gyre Adventor, 9 | sans-serif; 10 | font-style: normal; 11 | font-weight: ${props => props.weight || 500}; 12 | font-size: 1.44rem; 13 | line-height: normal; 14 | letter-spacing: -0.005em; 15 | margin-top: 0; 16 | margin-bottom: 0; 17 | color: ${props => (props.color ? props.color : 'inherit')}; 18 | ${mediaQueries.tablet} { 19 | font-size: 1.56rem; 20 | } 21 | `; 22 | -------------------------------------------------------------------------------- /src/components/typography/headlines/H6.tsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { IHeadingProps } from './common'; 3 | 4 | export const H6 = styled.h6` 5 | /* Heading/H6 | 500 */ 6 | font-family: 7 | TeX Gyre Adventor, 8 | sans-serif; 9 | font-style: normal; 10 | font-weight: ${props => props.weight || 500}; 11 | font-size: 1.125rem; 12 | line-height: normal; 13 | letter-spacing: -0.005em; 14 | margin-top: 0; 15 | margin-bottom: 0; 16 | color: ${props => (props.color ? props.color : 'inherit')}; 17 | `; 18 | -------------------------------------------------------------------------------- /src/components/typography/headlines/common.ts: -------------------------------------------------------------------------------- 1 | export interface IHeadingProps { 2 | weight?: 500 | 700 | 900; 3 | } 4 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './components'; 2 | export * from './common/colors'; 3 | export * from './common/deviceSize'; 4 | -------------------------------------------------------------------------------- /src/stories/icons/Arrow/ArrowLeft.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 3 | 4 | import { IconArrowLeft } from '../../../components/icons/arrows/ArrowLeft'; 5 | 6 | export default { 7 | title: 'Example/Icons/Navigation/Arrow', 8 | component: IconArrowLeft, 9 | } as ComponentMeta; 10 | 11 | const Template: ComponentStory = args => ( 12 | 13 | ); 14 | 15 | export const ArrowLeft = Template.bind({}); 16 | ArrowLeft.storyName = 'Left'; 17 | ArrowLeft.args = { 18 | color: 'white', 19 | size: 32, 20 | }; 21 | -------------------------------------------------------------------------------- /src/stories/icons/Arrow/ArrowRight.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 3 | 4 | import { IconArrowRight } from '../../../components/icons/arrows/ArrowRight'; 5 | 6 | export default { 7 | title: 'Example/Icons/Navigation/Arrow', 8 | component: IconArrowRight, 9 | } as ComponentMeta; 10 | 11 | const Template: ComponentStory = args => ( 12 | 13 | ); 14 | 15 | export const ArrowRight = Template.bind({}); 16 | ArrowRight.storyName = 'Right'; 17 | ArrowRight.args = { 18 | color: 'white', 19 | size: 32, 20 | }; 21 | -------------------------------------------------------------------------------- /src/stories/icons/ArrowCircle/ArrowCircleLeft.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 3 | 4 | import { IconArrowCircleLeft } from '../../../components/icons/arrowCircles/ArrowCircleLeft'; 5 | 6 | export default { 7 | title: 'Example/Icons/Navigation/ArrowCircle', 8 | component: IconArrowCircleLeft, 9 | } as ComponentMeta; 10 | 11 | const Template: ComponentStory = args => ( 12 | 13 | ); 14 | 15 | export const ArrowCircleLeft = Template.bind({}); 16 | ArrowCircleLeft.storyName = 'Left'; 17 | ArrowCircleLeft.args = { 18 | color: 'white', 19 | size: 32, 20 | }; 21 | -------------------------------------------------------------------------------- /src/stories/icons/Donation/Donation.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 3 | 4 | import { IconDonation } from '../../../components/icons/Donation/Donation'; 5 | 6 | export default { 7 | title: 'Example/Icons/Donation/Donation', 8 | component: IconDonation, 9 | } as ComponentMeta; 10 | 11 | const Template: ComponentStory = args => ( 12 | 13 | ); 14 | 15 | export const Donation = Template.bind({}); 16 | Donation.args = { 17 | color: 'white', 18 | size: 24, 19 | }; 20 | -------------------------------------------------------------------------------- /src/stories/icons/Donation/Donation16.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 3 | 4 | import { IconDonation16 } from '../../../components/icons/Donation/Donation16'; 5 | 6 | export default { 7 | title: 'Example/Icons/Donation/Donation16', 8 | component: IconDonation16, 9 | } as ComponentMeta; 10 | 11 | const Template: ComponentStory = args => ( 12 | 13 | ); 14 | 15 | export const Donation16 = Template.bind({}); 16 | Donation16.args = { 17 | color: 'white', 18 | size: 16, 19 | }; 20 | -------------------------------------------------------------------------------- /src/stories/icons/Donation/Donation24.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 3 | 4 | import { IconDonation24 } from '../../../components/icons/Donation/Donation24'; 5 | 6 | export default { 7 | title: 'Example/Icons/Donation/Donation24', 8 | component: IconDonation24, 9 | } as ComponentMeta; 10 | 11 | const Template: ComponentStory = args => ( 12 | 13 | ); 14 | 15 | export const Donation24 = Template.bind({}); 16 | Donation24.args = { 17 | color: 'white', 18 | size: 24, 19 | }; 20 | -------------------------------------------------------------------------------- /src/stories/icons/Donation/Donation32.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 3 | 4 | import { IconDonation32 } from '../../../components/icons/Donation/Donation32'; 5 | 6 | export default { 7 | title: 'Example/Icons/Donation/Donation32', 8 | component: IconDonation32, 9 | } as ComponentMeta; 10 | 11 | const Template: ComponentStory = args => ( 12 | 13 | ); 14 | 15 | export const Donation32 = Template.bind({}); 16 | Donation32.args = { 17 | color: 'white', 18 | size: 32, 19 | }; 20 | -------------------------------------------------------------------------------- /src/stories/icons/Estimated/IconEstimated.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 3 | import { IconEstimated24 } from '../../../components'; 4 | 5 | export default { 6 | title: 'Example/Icons/Estimated/Estimated', 7 | component: IconEstimated24, 8 | } as ComponentMeta; 9 | 10 | const Template: ComponentStory = args => ( 11 | 12 | ); 13 | 14 | export const Estimated = Template.bind({}); 15 | Estimated.args = { 16 | color: 'green', 17 | size: 24, 18 | }; 19 | -------------------------------------------------------------------------------- /src/stories/icons/GIVEconomyBack/GIVEconomyBack.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 3 | 4 | import { IconGIVBack } from '../../../components/icons/giv-economy/Back/Back'; 5 | 6 | export default { 7 | title: 'Example/Icons/GIVEconomyBack/GIVEconomyBack', 8 | component: IconGIVBack, 9 | } as ComponentMeta; 10 | 11 | const Template: ComponentStory = args => ( 12 | 13 | ); 14 | 15 | export const GIVEconomyBack = Template.bind({}); 16 | GIVEconomyBack.args = { 17 | color: 'white', 18 | size: 24, 19 | }; 20 | -------------------------------------------------------------------------------- /src/stories/icons/GIVEconomyBack/GIVEconomyBack16.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 3 | 4 | import { IconGIVBack16 } from '../../../components/icons/giv-economy/Back/Back16'; 5 | 6 | export default { 7 | title: 'Example/Icons/GIVEconomyBack/GIVEconomyBack16', 8 | component: IconGIVBack16, 9 | } as ComponentMeta; 10 | 11 | const Template: ComponentStory = args => ( 12 | 13 | ); 14 | 15 | export const GIVEconomyBack16 = Template.bind({}); 16 | GIVEconomyBack16.args = { 17 | color: 'white', 18 | size: 16, 19 | }; 20 | -------------------------------------------------------------------------------- /src/stories/icons/GIVEconomyBack/GIVEconomyBack24.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 3 | 4 | import { IconGIVBack24 } from '../../../components/icons/giv-economy/Back/Back24'; 5 | 6 | export default { 7 | title: 'Example/Icons/GIVEconomyBack/GIVEconomyBack24', 8 | component: IconGIVBack24, 9 | } as ComponentMeta; 10 | 11 | const Template: ComponentStory = args => ( 12 | 13 | ); 14 | 15 | export const GIVEconomyBack24 = Template.bind({}); 16 | GIVEconomyBack24.args = { 17 | color: 'white', 18 | size: 24, 19 | }; 20 | -------------------------------------------------------------------------------- /src/stories/icons/GIVEconomyBack/GIVEconomyBack32.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 3 | 4 | import { IconGIVBack32 } from '../../../components/icons/giv-economy/Back/Back32'; 5 | 6 | export default { 7 | title: 'Example/Icons/GIVEconomyBack/GIVEconomyBack32', 8 | component: IconGIVBack32, 9 | } as ComponentMeta; 10 | 11 | const Template: ComponentStory = args => ( 12 | 13 | ); 14 | 15 | export const GIVEconomyBack32 = Template.bind({}); 16 | GIVEconomyBack32.args = { 17 | color: 'white', 18 | size: 32, 19 | }; 20 | -------------------------------------------------------------------------------- /src/stories/icons/GIVEconomyBack/GIVEconomyBack64.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 3 | 4 | import { IconGIVBack64 } from '../../../components/icons/giv-economy/Back/Back64'; 5 | 6 | export default { 7 | title: 'Example/Icons/GIVEconomyBack/GIVEconomyBack64', 8 | component: IconGIVBack64, 9 | } as ComponentMeta; 10 | 11 | const Template: ComponentStory = args => ( 12 | 13 | ); 14 | 15 | export const GIVEconomyBack64 = Template.bind({}); 16 | GIVEconomyBack64.args = { 17 | color: 'white', 18 | size: 64, 19 | }; 20 | -------------------------------------------------------------------------------- /src/stories/icons/IconAlertCircle.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 3 | 4 | import { IconAlertCircle } from '../../components/icons/AlertCircle/AlertCircle'; 5 | 6 | export default { 7 | title: 'Example/Icons/AlertCircle', 8 | component: IconAlertCircle, 9 | } as ComponentMeta; 10 | 11 | const Template: ComponentStory = args => ( 12 | 13 | ); 14 | 15 | export const ArrowLeft = Template.bind({}); 16 | ArrowLeft.storyName = 'AlertCircle'; 17 | ArrowLeft.args = { 18 | color: 'white', 19 | size: 32, 20 | }; 21 | -------------------------------------------------------------------------------- /src/stories/icons/IconConfig.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 3 | import { IconConfig } from '../../components'; 4 | 5 | export default { 6 | title: 'Example/Icons/Config', 7 | component: IconConfig, 8 | } as ComponentMeta; 9 | 10 | const Template: ComponentStory = args => ( 11 | 12 | ); 13 | 14 | export const Config = Template.bind({}); 15 | Config.storyName = 'Config'; 16 | Config.args = { 17 | color: 'white', 18 | size: 24, 19 | }; 20 | -------------------------------------------------------------------------------- /src/stories/icons/IconGift.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 3 | import { IconGift } from '../../components'; 4 | 5 | export default { 6 | title: 'Example/Icons/Gift', 7 | component: IconGift, 8 | } as ComponentMeta; 9 | 10 | const Template: ComponentStory = args => ( 11 | 12 | ); 13 | 14 | export const ArrowLeft = Template.bind({}); 15 | ArrowLeft.storyName = 'Gift'; 16 | ArrowLeft.args = { 17 | color: 'white', 18 | size: 32, 19 | }; 20 | -------------------------------------------------------------------------------- /src/stories/icons/Socials/IconXSocial.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 3 | import { IconXSocial24 } from '../../../components/social-icons/XSocial/XSocial24'; 4 | 5 | export default { 6 | title: 'Example/Icons/Social/IconXSocial', 7 | component: IconXSocial24, 8 | } as ComponentMeta; 9 | 10 | const Template: ComponentStory = args => ( 11 | 12 | ); 13 | 14 | export const ArrowLeft = Template.bind({}); 15 | ArrowLeft.storyName = 'X'; 16 | ArrowLeft.args = { 17 | color: 'white', 18 | size: 32, 19 | }; 20 | -------------------------------------------------------------------------------- /src/stories/icons/Warning/Warning.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 3 | 4 | import { IconWarning } from '../../../components/icons/Warning/Warning'; 5 | 6 | export default { 7 | title: 'Example/Icons/Warning/Warning', 8 | component: IconWarning, 9 | } as ComponentMeta; 10 | 11 | const Template: ComponentStory = args => ( 12 | 13 | ); 14 | 15 | export const Warning = Template.bind({}); 16 | Warning.args = { 17 | color: 'white', 18 | size: 24, 19 | }; 20 | -------------------------------------------------------------------------------- /src/stories/icons/Warning/Warning16.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 3 | 4 | import { IconWarning16 } from '../../../components/icons/Warning/Warning16'; 5 | 6 | export default { 7 | title: 'Example/Icons/Warning/Warning16', 8 | component: IconWarning16, 9 | } as ComponentMeta; 10 | 11 | const Template: ComponentStory = args => ( 12 | 13 | ); 14 | 15 | export const Warning16 = Template.bind({}); 16 | Warning16.args = { 17 | color: 'white', 18 | size: 16, 19 | }; 20 | -------------------------------------------------------------------------------- /src/stories/icons/Warning/Warning24.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 3 | 4 | import { IconWarning24 } from '../../../components/icons/Warning/Warning24'; 5 | 6 | export default { 7 | title: 'Example/Icons/Warning/Warning24', 8 | component: IconWarning24, 9 | } as ComponentMeta; 10 | 11 | const Template: ComponentStory = args => ( 12 | 13 | ); 14 | 15 | export const Warning24 = Template.bind({}); 16 | Warning24.args = { 17 | color: 'white', 18 | size: 24, 19 | }; 20 | -------------------------------------------------------------------------------- /src/stories/icons/Warning/Warning32.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 3 | 4 | import { IconWarning32 } from '../../../components/icons/Warning/Warning32'; 5 | 6 | export default { 7 | title: 'Example/Icons/Warning/Warning32', 8 | component: IconWarning32, 9 | } as ComponentMeta; 10 | 11 | const Template: ComponentStory = args => ( 12 | 13 | ); 14 | 15 | export const Warning32 = Template.bind({}); 16 | Warning32.args = { 17 | color: 'white', 18 | size: 32, 19 | }; 20 | -------------------------------------------------------------------------------- /src/stories/icons/Warning/Warning64.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 3 | 4 | import { IconWarning64 } from '../../../components/icons/Warning/Warning64'; 5 | 6 | export default { 7 | title: 'Example/Icons/Warning/Warning64', 8 | component: IconWarning64, 9 | } as ComponentMeta; 10 | 11 | const Template: ComponentStory = args => ( 12 | 13 | ); 14 | 15 | export const Warning64 = Template.bind({}); 16 | Warning64.args = { 17 | color: 'white', 18 | size: 64, 19 | }; 20 | -------------------------------------------------------------------------------- /src/stories/typography/Overline.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 3 | import { Overline } from '../../components/typography/Overline'; 4 | 5 | export default { 6 | title: 'Example/Overline', 7 | component: Overline, 8 | } as ComponentMeta; 9 | 10 | const Template: ComponentStory = args => ( 11 | Link 12 | ); 13 | 14 | export const Small = Template.bind({}); 15 | Small.args = { 16 | styleType: 'Small', 17 | }; 18 | 19 | export const Regular = Template.bind({}); 20 | Regular.args = { 21 | styleType: 'Regular', 22 | }; 23 | 24 | export const Italic = Template.bind({}); 25 | Italic.args = { 26 | styleType: 'Italic', 27 | }; 28 | -------------------------------------------------------------------------------- /src/stories/typography/body/B.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 3 | import { B } from '../../../components/typography/body/B'; 4 | 5 | export default { 6 | title: 'Example/B', 7 | component: B, 8 | } as ComponentMeta; 9 | 10 | const Template: ComponentStory = args => ( 11 | 12 | {args.title || 'Was he a beast if music could move him so?'} 13 | 14 | ); 15 | 16 | export const Example = Template.bind({}); 17 | -------------------------------------------------------------------------------- /src/stories/typography/body/Caption.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 3 | import { Caption } from '../../../components/typography/body/Caption'; 4 | 5 | export default { 6 | title: 'Example/Caption', 7 | component: Caption, 8 | } as ComponentMeta; 9 | 10 | const Template: ComponentStory = args => ( 11 | 12 | {args.title || 'Was he a beast if music could move him so?'} 13 | 14 | ); 15 | 16 | export const Example = Template.bind({}); 17 | Example.args = { 18 | $medium: true, 19 | }; 20 | -------------------------------------------------------------------------------- /src/stories/typography/body/Lead.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 3 | import { Lead } from '../../../components/typography/body/Lead'; 4 | 5 | export default { 6 | title: 'Example/Lead', 7 | component: Lead, 8 | } as ComponentMeta; 9 | 10 | const Template: ComponentStory = args => ( 11 | 12 | {args.title || 'Was he a beast if music could move him so?'} 13 | 14 | ); 15 | 16 | export const Medium = Template.bind({}); 17 | Medium.args = { 18 | size: 'medium', 19 | }; 20 | 21 | export const Large = Template.bind({}); 22 | Large.args = { 23 | size: 'large', 24 | }; 25 | -------------------------------------------------------------------------------- /src/stories/typography/body/P.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 3 | import { P } from '../../../components/typography/body/P'; 4 | 5 | export default { 6 | title: 'Example/P', 7 | component: P, 8 | } as ComponentMeta; 9 | 10 | const Template: ComponentStory = args => ( 11 |

12 | {args.title || 'Was he a beast if music could move him so?'} 13 |

14 | ); 15 | 16 | export const Example = Template.bind({ 17 | color: 'red', 18 | }); 19 | -------------------------------------------------------------------------------- /src/stories/typography/body/SemiTitle.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 3 | import { SemiTitle } from '../../../components/typography/body/SemiTitle'; 4 | 5 | export default { 6 | title: 'Example/SemiTitle', 7 | component: SemiTitle, 8 | } as ComponentMeta; 9 | 10 | const Template: ComponentStory = args => ( 11 | 12 | {args.title || 'Was he a beast if music could move him so?'} 13 | 14 | ); 15 | 16 | export const Example = Template.bind({}); 17 | -------------------------------------------------------------------------------- /src/stories/typography/body/Subline.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 3 | import { Subline } from '../../../components/typography/body/Subline'; 4 | 5 | export default { 6 | title: 'Example/Subline', 7 | component: Subline, 8 | } as ComponentMeta; 9 | 10 | const Template: ComponentStory = args => ( 11 | 12 | {args.title || 'Was he a beast if music could move him so?'} 13 | 14 | ); 15 | 16 | export const Example = Template.bind({}); 17 | -------------------------------------------------------------------------------- /src/stories/typography/body/SublineBold.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 3 | import { SublineBold } from '../../../components/typography/body/SublineBold'; 4 | 5 | export default { 6 | title: 'Example/SublineBold', 7 | component: SublineBold, 8 | } as ComponentMeta; 9 | 10 | const Template: ComponentStory = args => ( 11 | 12 | {args.title || 'Was he a beast if music could move him so?'} 13 | 14 | ); 15 | 16 | export const Example = Template.bind({}); 17 | -------------------------------------------------------------------------------- /src/stories/typography/body/Title.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 3 | import { Title } from '../../../components/typography/body/Title'; 4 | 5 | export default { 6 | title: 'Example/Title', 7 | component: Title, 8 | } as ComponentMeta; 9 | 10 | const Template: ComponentStory = args => ( 11 | 12 | {args.title || 'Was he a beast if music could move him so?'} 13 | 14 | ); 15 | 16 | export const Example = Template.bind({}); 17 | -------------------------------------------------------------------------------- /src/stories/typography/displays/D1.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 3 | 4 | import { D1 } from '../../../components/typography/displays/D1'; 5 | 6 | export default { 7 | title: 'Example/D1', 8 | component: D1, 9 | } as ComponentMeta; 10 | 11 | const Template: ComponentStory = args => ( 12 | 13 | {args.title || 'Was he a beast if music could move him so?'} 14 | 15 | ); 16 | 17 | export const Example = Template.bind({}); 18 | -------------------------------------------------------------------------------- /src/stories/typography/displays/D2.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 3 | 4 | import { D2 } from '../../../components/typography/displays/D2'; 5 | 6 | export default { 7 | title: 'Example/D2', 8 | component: D2, 9 | } as ComponentMeta; 10 | 11 | const Template: ComponentStory = args => ( 12 | 13 | {args.title || 'Was he a beast if music could move him so?'} 14 | 15 | ); 16 | 17 | export const Example = Template.bind({}); 18 | -------------------------------------------------------------------------------- /src/stories/typography/displays/D3.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 3 | 4 | import { D3 } from '../../../components/typography/displays/D3'; 5 | 6 | export default { 7 | title: 'Example/D3', 8 | component: D3, 9 | } as ComponentMeta; 10 | 11 | const Template: ComponentStory = args => ( 12 | 13 | {args.title || 'Was he a beast if music could move him so?'} 14 | 15 | ); 16 | 17 | export const Example = Template.bind({}); 18 | -------------------------------------------------------------------------------- /src/stories/typography/headings/H2.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 3 | 4 | import { H2 } from '../../../components/typography/headlines/H2'; 5 | 6 | export default { 7 | title: 'Example/H2', 8 | component: H2, 9 | argTypes: { 10 | weight: { options: [500, 700, 900], control: { type: 'radio' } }, 11 | }, 12 | } as ComponentMeta; 13 | 14 | const Template: ComponentStory = args => ( 15 |

16 | {args.title || 'Was he a beast if music could move him so?'} 17 |

18 | ); 19 | 20 | export const Heading2 = Template.bind({}); 21 | Heading2.args = { 22 | weight: 500, 23 | }; 24 | -------------------------------------------------------------------------------- /src/stories/typography/headings/H3.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 3 | 4 | import { H3 } from '../../../components/typography/headlines/H3'; 5 | 6 | export default { 7 | title: 'Example/H3', 8 | component: H3, 9 | argTypes: { 10 | weight: { options: [500, 700, 900], control: { type: 'radio' } }, 11 | }, 12 | } as ComponentMeta; 13 | 14 | const Template: ComponentStory = args => ( 15 |

16 | {args.title || 'Was he a beast if music could move him so?'} 17 |

18 | ); 19 | 20 | export const Heading3 = Template.bind({}); 21 | Heading3.args = { 22 | weight: 500, 23 | }; 24 | -------------------------------------------------------------------------------- /src/stories/typography/headings/H4.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 3 | 4 | import { H4 } from '../../../components/typography/headlines/H4'; 5 | 6 | export default { 7 | title: 'Example/H4', 8 | component: H4, 9 | argTypes: { 10 | weight: { options: [500, 700, 900], control: { type: 'radio' } }, 11 | }, 12 | } as ComponentMeta; 13 | 14 | const Template: ComponentStory = args => ( 15 |

16 | {args.title || 'Was he a beast if music could move him so?'} 17 |

18 | ); 19 | 20 | export const Heading4 = Template.bind({}); 21 | Heading4.args = { 22 | weight: 500, 23 | }; 24 | -------------------------------------------------------------------------------- /src/stories/typography/headings/H5.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 3 | 4 | import { H5 } from '../../../components/typography/headlines/H5'; 5 | 6 | export default { 7 | title: 'Example/H5', 8 | component: H5, 9 | argTypes: { 10 | weight: { options: [500, 700, 900], control: { type: 'radio' } }, 11 | }, 12 | } as ComponentMeta; 13 | 14 | const Template: ComponentStory = args => ( 15 |
16 | {args.title || 'Was he a beast if music could move him so?'} 17 |
18 | ); 19 | 20 | export const Heading5 = Template.bind({}); 21 | Heading5.args = { 22 | weight: 500, 23 | }; 24 | -------------------------------------------------------------------------------- /src/stories/typography/headings/H6.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 3 | 4 | import { H6 } from '../../../components/typography/headlines/H6'; 5 | 6 | export default { 7 | title: 'Example/H6', 8 | component: H6, 9 | argTypes: { 10 | weight: { options: [500, 700, 900], control: { type: 'radio' } }, 11 | }, 12 | } as ComponentMeta; 13 | 14 | const Template: ComponentStory = args => ( 15 |
16 | {args.title || 'Was he a beast if music could move him so?'} 17 |
18 | ); 19 | 20 | export const Heading6 = Template.bind({}); 21 | Heading6.args = { 22 | weight: 500, 23 | }; 24 | -------------------------------------------------------------------------------- /src/styled-components/animations.tsx: -------------------------------------------------------------------------------- 1 | import { keyframes } from 'styled-components'; 2 | 3 | export const rotate = keyframes` 4 | from { 5 | transform: rotate(0deg); 6 | } 7 | 8 | to { 9 | transform: rotate(360deg); 10 | } 11 | `; 12 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "lib/esm", 4 | "module": "esnext", 5 | "target": "es5", 6 | "lib": ["es6", "dom", "es2016", "es2017"], 7 | "jsx": "react", 8 | "declaration": true, 9 | "moduleResolution": "node", 10 | "noUnusedLocals": true, 11 | "noUnusedParameters": true, 12 | "esModuleInterop": true, 13 | "noImplicitReturns": true, 14 | "noImplicitThis": true, 15 | "noImplicitAny": true, 16 | "strictNullChecks": true, 17 | "allowSyntheticDefaultImports": true 18 | }, 19 | "include": ["src"], 20 | "exclude": ["node_modules", "lib", "src/stories/"] 21 | } 22 | --------------------------------------------------------------------------------