Commit Graph

2 Commits

Author SHA1 Message Date
Danny White ed8ac5bb90 chore(design-system): preserve icon fill or stroke (#43417)
## What kind of change does this PR introduce?

Bug fix: custom icons now respect their source SVG’s stroke/fill and
stroke-width instead of always getting a global stroke.

## What is the current behavior?

Every custom icon gets `stroke="currentColor"` and `strokeWidth={2}`
from `createSupabaseIcon`, so fill-only logos get an extra stroke and
icons designed at `stroke-width="1"` (e.g. postgres, auth) render too
thick. Call sites and the design-system grid needed workarounds
(`strokeWidth={0}`, `FILL_ONLY_ICONS`, `STROKE_WIDTH_FROM_SOURCE`).

## What is the new behavior?

The icon build reads root SVG attributes (`fill`, `stroke`,
`stroke-width`, etc.) and passes them as per-icon defaults. Fill-only
icons (chatgpt, claude, axiom, last9) have `stroke="none"` in source and
render with no stroke; stroke icons keep their source stroke-width (e.g.
postgres at 1). No `strokeWidth={0}` or allowlists needed at call sites
or in the icon grid.

| Before | After |
| --- | --- |
| <img width="1826" height="552" alt="CleanShot 2026-03-05 at 10 53
31@2x-3D63CEF0-1132-44F5-A382-730346432F1E"
src="https://github.com/user-attachments/assets/9caf73fa-351b-4ea2-a420-b3339f934742"
/> | <img width="1814" height="552" alt="CleanShot 2026-03-05 at 10 53
40@2x-514FC8BD-D30F-4D23-B209-0ECD6D13A184"
src="https://github.com/user-attachments/assets/936ea5a5-dae0-413f-8545-b90a502cea69"
/> |

## Additional context

- Added `stroke="none"` to the four fill-only source SVGs;
sentry/grafana/otlp/datadog already had `stroke-width="0"`.
- `createSupabaseIcon` only applies `color`/`strokeWidth` when the
consumer passes them, so `svgDefaults` from the build are used
otherwise.
- Removed workarounds from `icons.tsx` and GuidesSidebar; updated
icons.mdx (defaults + fill-only guidance).
2026-03-09 10:26:59 +11:00
Jonathan Summers-Muir d8ae6de7a8 feat: add new Icons package for custom made icons (#21477)
* feat: add new Icons package

* Create README.md

* add more icons

* add "Home" icon and "Postgres" icon

* reduce helpers

* remove old files

* make dev deps

* Delete package-lock.json

* Update README.md

* add to packages for other apps

* remove from db.design

* Update README.md

* Move the build-icons package in the packages folder.

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2024-02-26 09:40:56 +01:00