# @surrealdb/ui

The SurrealDB UI Kit defines the design system and UI primitives for use throughout all frontend projects at SurrealDB.

## Getting Started

To install dependencies:

```bash
bun install
```

Start the Storybook development server:

```bash
bun run storybook:dev
```

## Icon tool

The icon tool is used to convert the SVG icons to a format that can be used in the UI Kit.

### Requirements
- Install [picosvg](https://github.com/googlefonts/picosvg)
- Export an SVG zip and locate it in the root of the project.

```bash
bun run icons
```

This will generate the `src/constants/icons.ts` file.

## Notes

### Optimise pictos
```
mkdir -p out                   
for f in *.png; do 
  magick "$f" \             
    -resize 500x500 \
    -background none \   
    -gravity center \                                    
    -extent 500x500 \
    "out/${f%.*}.webp"
done
```