mirror of
https://github.com/supabase/supabase.git
synced 2026-05-09 00:10:05 +08:00
ed8ac5bb90
## 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).
29 lines
964 B
JavaScript
29 lines
964 B
JavaScript
/* eslint-disable import/no-extraneous-dependencies */
|
|
import { base64SVG } from '@supabase/build-icons'
|
|
|
|
export default ({ componentName, iconName, children, getSvg, deprecated, svgAttributes = {} }) => {
|
|
const svgContents = getSvg()
|
|
const svgBase64 = base64SVG(svgContents)
|
|
|
|
const hasAttrs = Object.keys(svgAttributes).length > 0
|
|
const attrsArg = hasAttrs ? `, ${JSON.stringify(svgAttributes)}` : ''
|
|
|
|
return `
|
|
import createSupabaseIcon from '../createSupabaseIcon';
|
|
|
|
/**
|
|
* @component @name ${componentName}
|
|
* @description Supabase SVG icon component, renders SVG Element with children.
|
|
*
|
|
* @preview 
|
|
*
|
|
* @param {Object} props - Supabase icons props and any valid SVG attribute
|
|
* @returns {JSX.Element} JSX Element
|
|
* ${deprecated ? '@deprecated' : ''}
|
|
*/
|
|
const ${componentName} = createSupabaseIcon('${componentName}', ${JSON.stringify(children)}${attrsArg});
|
|
|
|
export default ${componentName};
|
|
`
|
|
}
|