mirror of
https://github.com/supabase/supabase.git
synced 2026-10-18 23:59:08 +03:00
b8243e06d8
* init site * add nav menu * add props table component * init all the examples • also includes moving a bunch of ./ui files to ./ui-patterns * update package • might need to remove some of these * Update rehype-component.ts * move nav * more changes * add new source information to contentlayer * fix copy buttons * add text-confirm. start new concept of "fragments" * move base path. add homepage. add theme selection * added colors * add form-item-layout * temporary fix code blocks in light mode. they currently don't switch theme to theme * start adding code themes * Update dark.json * update code block themes * fix animations * add cdmk search * export registry of icons in ./icons package * add comments * add icon copy stuff * Update icons.tsx * more docs * more docs. cleaned up colors and icons docs * Update theming.mdx * add more docs * update * add package * Update tailwind.config.js * update content * Update drawer-demo.tsx * Update aspect-ratio-demo.tsx * add new blocks * Update source-panel.tsx * Update source-panel.tsx * Update source-panel.tsx * add new source block * Update source-panel.tsx * Update _app.tsx * Update page.tsx * Delete layout-old.tsx * remove old themes * remove old ui registry * comment out nav items * Update package-lock.json * Update AssistantChatForm.tsx * move back * move again * update * Update index.tsx * Update package-lock.json * Update package-lock.json * Update package-lock.json * update package * udpate prettier * fix tag issues * Update package-lock.json * update to contentlayer2 * update package-lock.json * fix type errors * ignore spelling * Update avoid-typos.yml * Update avoid-typos.yml * Update package-lock.json * Use ui type definitions. * move tsconfig base stuff. fix content layer issue * Update package-lock.json * Update package-lock.json --------- Co-authored-by: Alaister Young <a@alaisteryoung.com> Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
./packages/icons
This package is for custom Supabase icons They can be used alongside any other icon packages
example use
import { ReplaceCode, InsertCode } from 'icons'
function app() {
return (
<>
<ReplaceCode className="text-light" strokeWidth={1} size={16} />
<InsertCode className="text-light" strokeWidth={1} size={16} />
</>
)
}
adding new icons
Add new icons into ./src/raw-icons
Make sure there are no inline stroke/border/fill colors (see below)
run this in ./packages/build-icons
npm run build
This will output icons into ./src/icons and update import names/paths
Design spec
Icons should:
- always be exported 24x24px,
- and have an icon inside that frame that's around 18x18px(ish)
❌ bad example
Notice the stroke, stroke-linecap, fills, etc. These need to be in the parent
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect <-- silly backgrounds figma adds in
width="24"
height="24"
fill="#1E1E1E"
/>
<path <-- silly backgrounds figma adds in
d="M-20439
-11141C-20439..."
fill="#404040"
/>
<path
d="M-20437 -11142H12131V-11144H-20437V-11142ZM12132 ...."
fill="white"
fill-opacity="0.1"
/>
<path
d="M22.8437 8.69499L19.5369 12.0018L22.8438 15.3086..."
stroke="#EDEDED"
stroke-linecap="round"
stroke-linejoin="round"
/>
<rect
x="0.5"
y="14.0625"
width="16"
height="8"
rx="1"
stroke="#EDEDED"
stroke-linejoin="round"
/>
<rect
x="0.5"
y="1.9375"
width="16"
height="8"
rx="1"
stroke="#EDEDED"
stroke-linejoin="round"
/>
</svg>
✅ Good example
We've now cleaned it up, and the parent SVG element now has all the attributes for color and stroke width styling. We have also removed the redundant elements that figma adds in like background / artboard backgrounds.
<svg
width="24"
height="24"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
fill="none"
stroke="currentColor"
stroke-width="1"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M-20439 -11141C-20439..." />
<path d="M-20437 -11142H12131V-11144H-20437V-11142ZM12132 ...."/>
<path d="M22.8437 8.69499L19.5369 12.0018L22.8438 15.3086..." />
<rect x="0.5" y="14.0625" width="16" height="8" rx="1" />
<rect x="0.5" y="1.9375" width="16" height="8" rx="1" />
</svg>