From 00300d31bd8629520335cd9737be650c60d3f23a Mon Sep 17 00:00:00 2001 From: Karsa Date: Fri, 2 Oct 2026 13:46:27 +0200 Subject: [PATCH] fix(site): persist icon customizer (#4944) * fix(docs): persist icon customizer settings Persist icon color, size, stroke width, and absolute stroke width between page navigations and reloads. Keep a shared icon style state across the homepage and icons page, clamp the homepage preview size to its supported range, and apply persisted absolute stroke settings after mount. * fix(docs): avoid icon customizer hydration flicker Initialize persisted icon settings synchronously and apply absolute stroke width before the first rendered state. * fix(docs): restore icon styles before first paint Apply stored icon styles from a head script before hydration, defer customizer visibility until mount, and render persisted switches on the client to avoid stale SSR classes. Keep absolute stroke state synchronized globally and cover prepaint initialization with regression tests. * fix(site): persist icon customizer * fix(packages/react): update vulnerable @tanstack packages * fix(docs): persist icon customizer settings Persist icon color, size, stroke width, and absolute stroke width between page navigations and reloads. Keep a shared icon style state across the homepage and icons page, clamp the homepage preview size to its supported range, and apply persisted absolute stroke settings after mount. * fix(docs): avoid icon customizer hydration flicker Initialize persisted icon settings synchronously and apply absolute stroke width before the first rendered state. * fix(docs): restore icon styles before first paint Apply stored icon styles from a head script before hydration, defer customizer visibility until mount, and render persisted switches on the client to avoid stale SSR classes. Keep absolute stroke state synchronized globally and cover prepaint initialization with regression tests. * fix(site): persist icon customizer * fix(packages/react): update vulnerable @tanstack packages * fix(site): generalize usePersistedIconStyle to reduce code duplication in icon customizers * fix(site): home size slider now uses max="256", matching the sidebar * fix(site): fix linting issues in iconStyleHead.js * fix(site): make Switch.vue hydration safe * fix(site): fix home icon customizer color input width * fix(site): make home icon customizer not persistent * fix(site): fix duplicate ids in sidebar icon customizer as well * fix(site): various minor fixes to the customizer bl * fix(site): revert "[default]" placeholder --------- Co-authored-by: epifaniofrancisco --- docs/.vitepress/config.ts | 9 +- .../theme/components/base/ColorPicker.vue | 5 +- .../theme/components/base/ResetButton.vue | 9 +- .../theme/components/base/Switch.vue | 10 +- .../components/home/HomeIconCustomizer.vue | 99 ++---- .../home/HomeIconCustomizerIcons.vue | 44 +-- .../icons/SidebarIconCustomizer.vue | 72 +---- .../theme/composables/useIconStyle.test.mts | 113 +++++++ .../theme/composables/useIconStyle.ts | 90 +++++- docs/.vitepress/theme/iconStyleHead.js | 24 ++ .../lucide-react/tanstack-start/package.json | 4 +- pnpm-lock.yaml | 286 +++++++++++++----- 12 files changed, 528 insertions(+), 237 deletions(-) create mode 100644 docs/.vitepress/theme/composables/useIconStyle.test.mts create mode 100644 docs/.vitepress/theme/iconStyleHead.js diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 21024d431..547a14faa 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -15,6 +15,10 @@ const defaultSandpackCSS = await readFile( fileURLToPath(new URL('./theme/sandpack-default.css', import.meta.url)), 'utf-8', ); +const iconStyleHeadScript = await readFile( + fileURLToPath(new URL('./theme/iconStyleHead.js', import.meta.url)), + 'utf-8', +); const title = 'Lucide'; const socialTitle = 'Lucide Icons'; @@ -84,7 +88,10 @@ export default defineConfig({ }) as unknown as UserConfig['vite']['plugins'][0], ], }, - head: getHeadConfig({ title, description, socialTitle }), + head: [ + ...getHeadConfig({ title, description, socialTitle }), + ['script', {}, iconStyleHeadScript], + ], transformPageData, themeConfig: { logo: { diff --git a/docs/.vitepress/theme/components/base/ColorPicker.vue b/docs/.vitepress/theme/components/base/ColorPicker.vue index d523ba952..b5df35e34 100644 --- a/docs/.vitepress/theme/components/base/ColorPicker.vue +++ b/docs/.vitepress/theme/components/base/ColorPicker.vue @@ -1,5 +1,4 @@