Files
supabase/packages/icons/README.md
Danny WhiteandJoshen Lim 5ff03b2971 feat: custom bucket icons (#39280)
* chore: separate interfaces per bucket type

* chore: reuse existing bucket creation modal for files

* chore: allow external trigger for new bucket modal

* chore: minor fixes

* chore: full-size empty state

* chore: files other tabs

* fix: show tab bar when on file subroute

* chore: use existing table component to list buckets

* fix: tests

* fix: build error

* chore: remove future bucket type components from PR

* fix: dependency

* Couple of refactors to simplify implementation

* Fix TS

* chore: move s3 settings out to sidebar

* fix: minor nits

* fix: reuse existing loading spinners from schema visualiser

* fix: loading for files

* fix: prevent loading of table for zero buckets

* chore: improved loading state

* chore: shimmer on table

* chore: copywriting on S3

* chore: improve empty states

* fix: deprecated input instructions

* fix: filter/search bucket table

* chore: tidy

* fix: tests

* first commit

* improve documentation and fix icon build error

* change svg kebab case to camel case for React

* copy nits

* fix svg codeblock color

* add bucket (normal) icon

* add bucket icon to policies

* add bucket icon to other storage bucket surfaces

* fix spacing on empty state

* fix inconsistent icons in home sections

Make 1:1 with what we have in the sidebar with optically-correct strokeWidth.

* fix icons

Like the previous commit, this makes sure we use the same product icons as in the sidebar.

* clearer bucket add icon naming

* remove unused layouts

* fix naming collision

* Tinnnnyyy nit

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-10-08 13:14:03 +11:00

32 lines
840 B
Markdown

# ./packages/icons
This package contains custom Supabase icons that can be used alongside other icon libraries.
## Documentation
**For complete documentation, usage examples, and guidelines, see the [Design System](../../apps/design-system/content/docs/icons.mdx)**
## Quick start
```jsx
import { BucketAdd, Database, Auth } from 'icons'
function MyComponent() {
return (
<>
<BucketAdd size={24} className="text-foreground-muted" />
<Database size={16} strokeWidth={1} />
<Auth size={20} />
</>
)
}
```
### Adding new custom icons
1. Add your SVG file to `src/raw-icons/` (kebab-case name)
2. Run `npm run build:icons` in this directory
3. Import and use your new icon
For detailed instructions, examples, and troubleshooting, see the [Design System](../../apps/design-system/content/docs/icons.mdx).