mirror of
https://github.com/supabase/supabase.git
synced 2026-10-15 06:09:08 +03:00
Francesco Sansalvadore
3b11b9e1d7
* add products pag subnav * functions page first sections * new functions page sections * functions dx section images * functions hero layout setup * functions page hero animation * final cta * revisit functions page structure * functions realtime logs animation * functions query logs animation * function metrics chart * finish edge functions hero animation * finish edge functions metrics graph * update products cta section * edge functions page code cleanup * restore Panel * restore code block bg * pause timed sections when not in view to optimize perf * create new code window component and add functions code snippets * finish edge functions * update functions page * improve animation timing in functions page * fix type error * clean up functions page code * update swiper and fix hydration errors * fix swiper module import * fix swiper css import * image bg * edge functions page details fix * fix scroll bug * edge functions page * finalize edge functions page * add anchors and improve semantics * remove double prop * add links to docs * add link to edge runtime * fix timed panel progress bar retrigger * fix timed accordion progress bar retrigger
123 lines
2.9 KiB
Markdown
123 lines
2.9 KiB
Markdown
# ./packages/icons
|
|
|
|
This package is for custom Supabase icons
|
|
They can be used alongside any other icon packages
|
|
|
|
## example use
|
|
|
|
```jsx
|
|
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
|
|
|
|
```bash
|
|
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> so the react component can easily control it.
|
|
The SVG child elements will then respect their parent's attributes.
|
|
|
|
```svg
|
|
<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
|
|
<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>
|
|
```
|