Files

Ivan Vasilov 051d31ef07 chore: Bump Typescript to 5.9 (#38945 )

* Move typescript version definition to pnpm-workspace.

* Bump typescript to 5.9.

* Minor fixes to satisfy the compiler.

---------

Co-authored-by: Raúl Barroso <code@raulb.dev>

2025-09-23 16:50:54 +02:00

__registry__

add loki log drain form (#29848 )

2024-10-23 13:50:33 +02:00

scripts

feat: add new Icons package for custom made icons (#21477 )

2024-02-26 09:40:56 +01:00

src

chore: Expand prettier commands to also run on packages (#32550 )

2025-01-03 16:23:32 +01:00

package.json

chore: Bump Typescript to 5.9 (#38945 )

2025-09-23 16:50:54 +02:00

README.md

update functions page (#22111 )

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

tsconfig.json

feat: add new Icons package for custom made icons (#21477 )

2024-02-26 09:40:56 +01:00

README.md

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