Files

Francesco Sansalvadore 3b11b9e1d7 update functions page (#22111 )

* 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

2024-04-10 11:51:26 +02:00

2.9 KiB

Raw Permalink Blame History

./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>

2.9 KiB Raw Permalink Blame History