From 0631444d37790122c40d7825e6165c273868eab8 Mon Sep 17 00:00:00 2001 From: Danny White <3104761+dnywh@users.noreply.github.com> Date: Tue, 25 Nov 2025 19:41:32 +1100 Subject: [PATCH 01/33] feat(studio): fancy bucket icons (#40766) * swap icons * docs improvements * better upgrade icons * add sentry * Nit --------- Co-authored-by: Joshen Lim --- apps/design-system/content/docs/icons.mdx | 14 ++-- ...pty-state-initial-state-presentational.tsx | 4 +- .../NotOrganizationOwnerWarning.tsx | 34 -------- .../ProjectCreation/OrganizationSelector.tsx | 82 +++++++++---------- .../Storage/AnalyticsBuckets/index.tsx | 4 +- .../interfaces/Storage/BucketsComingSoon.tsx | 6 +- .../interfaces/Storage/BucketsUpgradePlan.tsx | 8 +- .../interfaces/Storage/EmptyBucketState.tsx | 4 +- .../Storage/FilesBuckets/BucketTable.tsx | 4 +- .../StoragePoliciesBucketRow.tsx | 4 +- .../Storage/VectorBuckets/index.tsx | 4 +- apps/studio/components/ui/NoPermission.tsx | 7 +- .../storage/analytics/buckets/[bucketId].tsx | 4 +- .../storage/files/buckets/[bucketId].tsx | 8 +- .../storage/vectors/buckets/[bucketId].tsx | 4 +- packages/icons/__registry__/index.tsx | 64 +++++++++++---- packages/icons/src/icons/analytics-bucket.ts | 71 ++++++++++++++++ packages/icons/src/icons/bucket-add.ts | 71 ---------------- packages/icons/src/icons/bucket-plus.ts | 49 +++++++++++ packages/icons/src/icons/bucket.ts | 49 ----------- packages/icons/src/icons/files-bucket.ts | 38 +++++++++ packages/icons/src/icons/index.ts | 8 +- packages/icons/src/icons/sentry.ts | 4 +- packages/icons/src/icons/vector-bucket.ts | 38 +++++++++ .../icons/src/raw-icons/analytics-bucket.svg | 7 ++ packages/icons/src/raw-icons/bucket-add.svg | 7 -- packages/icons/src/raw-icons/bucket-plus.svg | 5 ++ packages/icons/src/raw-icons/bucket.svg | 5 -- packages/icons/src/raw-icons/files-bucket.svg | 4 + packages/icons/src/raw-icons/sentry.svg | 1 + .../icons/src/raw-icons/vector-bucket.svg | 4 + 31 files changed, 349 insertions(+), 267 deletions(-) delete mode 100644 apps/studio/components/interfaces/ProjectCreation/NotOrganizationOwnerWarning.tsx create mode 100644 packages/icons/src/icons/analytics-bucket.ts delete mode 100644 packages/icons/src/icons/bucket-add.ts create mode 100644 packages/icons/src/icons/bucket-plus.ts delete mode 100644 packages/icons/src/icons/bucket.ts create mode 100644 packages/icons/src/icons/files-bucket.ts create mode 100644 packages/icons/src/icons/vector-bucket.ts create mode 100644 packages/icons/src/raw-icons/analytics-bucket.svg delete mode 100644 packages/icons/src/raw-icons/bucket-add.svg create mode 100644 packages/icons/src/raw-icons/bucket-plus.svg delete mode 100644 packages/icons/src/raw-icons/bucket.svg create mode 100644 packages/icons/src/raw-icons/files-bucket.svg create mode 100644 packages/icons/src/raw-icons/sentry.svg create mode 100644 packages/icons/src/raw-icons/vector-bucket.svg diff --git a/apps/design-system/content/docs/icons.mdx b/apps/design-system/content/docs/icons.mdx index 5e020a680d4..7dc1dbf5a67 100644 --- a/apps/design-system/content/docs/icons.mdx +++ b/apps/design-system/content/docs/icons.mdx @@ -49,7 +49,7 @@ function app() { ### Adding new custom icons -To add a new custom icon to the Supabase icon library: +Follow these steps to add a new custom icon to the Supabase icon library. 1. **Create SVG file**: Add your SVG file to `packages/icons/src/raw-icons/` with a kebab-case name (e.g., `my-new-icon.svg`). Make sure it has follows these exact requirements: @@ -60,16 +60,18 @@ To add a new custom icon to the Supabase icon library: - Any unnecessary elements like ``, ``, and `` wrappers have been removed - SVG structure is as simple as possible with just `` elements -Just leave attributes like `stroke-width` as they are. The conversion to camel-case (for React compatibility) is handled by the below build process. +Leave attributes like `stroke-width` as they are. The conversion to camel-case for React compatibility (e.g. `strokeWidth`) is handled by the below build process. 2. **Build the component**: Run `npm run build:icons` from inside the `packages/icons` directory 3. **Use the icon**: Import and use like any other icon: - ```jsx - import { MyNewIcon } from 'icons' - ; - ``` +```tsx +import { MyNewIcon } from 'icons' +; +``` + +The icon name is automatically made available in camel-case, determined by the kebab-case input SVG. For example, `my-new-icon.svg` will become available as `MyNewIcon`. ### SVG design guidelines diff --git a/apps/design-system/registry/default/example/empty-state-initial-state-presentational.tsx b/apps/design-system/registry/default/example/empty-state-initial-state-presentational.tsx index 81ace8d4713..4200a1e3b4f 100644 --- a/apps/design-system/registry/default/example/empty-state-initial-state-presentational.tsx +++ b/apps/design-system/registry/default/example/empty-state-initial-state-presentational.tsx @@ -1,4 +1,4 @@ -import { BucketAdd } from 'icons' +import { BucketPlus } from 'icons' import { Plus } from 'lucide-react' import { Button } from 'ui' @@ -6,7 +6,7 @@ export default function EmptyStateInitialStatePresentational() { return (