From e423be523ee88327636c4ba8607a297cdf30d0ab Mon Sep 17 00:00:00 2001 From: Sarah Gerrard Date: Wed, 17 Dec 2025 04:16:09 +0000 Subject: [PATCH 01/27] book icon update --- package.json | 3 +- pnpm-lock.yaml | 12 + src/libraries/ai.tsx | 4 +- src/libraries/config.tsx | 4 +- src/libraries/db.tsx | 4 +- src/libraries/devtools.tsx | 4 +- src/libraries/form.tsx | 4 +- src/libraries/pacer.tsx | 4 +- src/libraries/query.tsx | 4 +- src/libraries/ranger.tsx | 4 +- src/libraries/router.tsx | 4 +- src/libraries/start.tsx | 4 +- src/libraries/store.tsx | 4 +- src/libraries/table.tsx | 4 +- src/libraries/virtual.tsx | 4 +- tmp/react-icons-usage.txt | 437 +++++++++++++++++++++++++++++++++++++ 16 files changed, 477 insertions(+), 27 deletions(-) create mode 100644 tmp/react-icons-usage.txt diff --git a/package.json b/package.json index 21f618b5f..b419953bd 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "private": true, "sideEffects": false, "repository": "https://github.com/TanStack/tanstack.com.git", - "packageManager": "pnpm@9.4.0", + "packageManager": "pnpm@10.26.0", "type": "module", "scripts": { "dev": "pnpm run with-env vite dev", @@ -59,6 +59,7 @@ "hast-util-to-string": "^3.0.1", "html-react-parser": "^5.1.10", "lru-cache": "^7.13.1", + "lucide-react": "^0.561.0", "mermaid": "^11.11.0", "postgres": "^3.4.7", "react": "^19.2.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c4ac35f19..c9bfa4dcd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -125,6 +125,9 @@ importers: lru-cache: specifier: ^7.13.1 version: 7.18.3 + lucide-react: + specifier: ^0.561.0 + version: 0.561.0(react@19.2.0) mermaid: specifier: ^11.11.0 version: 11.11.0 @@ -5157,6 +5160,11 @@ packages: resolution: {integrity: sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==} engines: {node: '>=12'} + lucide-react@0.561.0: + resolution: {integrity: sha512-Y59gMY38tl4/i0qewcqohPdEbieBy7SovpBL9IFebhc2mDd8x4PZSOsiFRkpPcOq6bj1r/mjH/Rk73gSlIJP2A==} + peerDependencies: + react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0 + luxon@3.5.0: resolution: {integrity: sha512-rh+Zjr6DNfUYR3bPwJEnuwDdqMbxZW7LOQfUN4B54+Cl+0o5zaU9RJ6bcidfDtC1cWCZXQ+nvX8bf6bAji37QQ==} engines: {node: '>=12'} @@ -12439,6 +12447,10 @@ snapshots: lru-cache@7.18.3: {} + lucide-react@0.561.0(react@19.2.0): + dependencies: + react: 19.2.0 + luxon@3.5.0: {} magic-string@0.30.17: diff --git a/src/libraries/ai.tsx b/src/libraries/ai.tsx index cb4872724..981ffe45d 100644 --- a/src/libraries/ai.tsx +++ b/src/libraries/ai.tsx @@ -1,6 +1,6 @@ import { Library } from '.' import { FaGithub, FaBolt, FaCogs } from 'react-icons/fa' -import { BiBookAlt } from 'react-icons/bi' +import { Book } from 'lucide-react' import { twMerge } from 'tailwind-merge' import { FaPlug } from 'react-icons/fa6' @@ -32,7 +32,7 @@ export const aiProject = { defaultDocs: 'getting-started/overview', menu: [ { - icon: , + icon: , label: 'Docs', to: '/ai/latest/docs', }, diff --git a/src/libraries/config.tsx b/src/libraries/config.tsx index d53028e79..0ae1dca3f 100644 --- a/src/libraries/config.tsx +++ b/src/libraries/config.tsx @@ -1,5 +1,5 @@ import { FaGithub, FaBolt, FaCogs } from 'react-icons/fa' -import { BiBookAlt } from 'react-icons/bi' +import { Book } from 'lucide-react' import { VscWand } from 'react-icons/vsc' import { twMerge } from 'tailwind-merge' @@ -29,7 +29,7 @@ export const configProject = { frameworks: [], menu: [ { - icon: , + icon: , label: 'Docs', to: '/config/latest/docs', }, diff --git a/src/libraries/db.tsx b/src/libraries/db.tsx index 164da9563..e26f27ded 100644 --- a/src/libraries/db.tsx +++ b/src/libraries/db.tsx @@ -1,6 +1,6 @@ import { BsCollectionFill } from 'react-icons/bs' import { FaGithub, FaBolt, FaCogs } from 'react-icons/fa' -import { BiBookAlt } from 'react-icons/bi' +import { Book } from 'lucide-react' import { twMerge } from 'tailwind-merge' const repo = 'tanstack/db' @@ -31,7 +31,7 @@ export const dbProject = { defaultDocs: 'overview', menu: [ { - icon: , + icon: , label: 'Docs', to: '/db/latest/docs', }, diff --git a/src/libraries/devtools.tsx b/src/libraries/devtools.tsx index 86e7684de..2f4d6e109 100644 --- a/src/libraries/devtools.tsx +++ b/src/libraries/devtools.tsx @@ -1,5 +1,5 @@ import { FaGithub, FaBolt, FaCogs } from 'react-icons/fa' -import { BiBookAlt } from 'react-icons/bi' +import { Book } from 'lucide-react' import { VscWand } from 'react-icons/vsc' import { twMerge } from 'tailwind-merge' @@ -30,7 +30,7 @@ export const devtoolsProject = { frameworks: ['react', 'preact', 'solid', 'vanilla'], menu: [ { - icon: , + icon: , label: 'Docs', to: '/devtools/latest/docs', }, diff --git a/src/libraries/form.tsx b/src/libraries/form.tsx index b2f3b81bc..633771cdb 100644 --- a/src/libraries/form.tsx +++ b/src/libraries/form.tsx @@ -1,6 +1,6 @@ import { VscPreview, VscWand } from 'react-icons/vsc' import { FaGithub, FaBolt, FaCogs } from 'react-icons/fa' -import { BiBookAlt } from 'react-icons/bi' +import { Book } from 'lucide-react' import { twMerge } from 'tailwind-merge' const repo = 'tanstack/form' @@ -30,7 +30,7 @@ export const formProject = { scarfId: '72ec4452-5d77-427c-b44a-57515d2d83aa', menu: [ { - icon: , + icon: , label: 'Docs', to: '/form/latest/docs', }, diff --git a/src/libraries/pacer.tsx b/src/libraries/pacer.tsx index 3cb75631a..9ffee6d8b 100644 --- a/src/libraries/pacer.tsx +++ b/src/libraries/pacer.tsx @@ -1,6 +1,6 @@ import { VscPreview, VscWand } from 'react-icons/vsc' import { FaGithub } from 'react-icons/fa' -import { BiBookAlt } from 'react-icons/bi' +import { Book } from 'lucide-react' import { GiF1Car } from 'react-icons/gi' import { twMerge } from 'tailwind-merge' import { FaTimeline } from 'react-icons/fa6' @@ -33,7 +33,7 @@ export const pacerProject = { defaultDocs: 'overview', menu: [ { - icon: , + icon: , label: 'Docs', to: '/pacer/latest/docs', }, diff --git a/src/libraries/query.tsx b/src/libraries/query.tsx index df1fa1e70..cb8242993 100644 --- a/src/libraries/query.tsx +++ b/src/libraries/query.tsx @@ -1,7 +1,7 @@ import { handleRedirects } from '~/utils/handleRedirects.server' import { FaGithub, FaBolt, FaCogs } from 'react-icons/fa' import { VscPreview, VscWand } from 'react-icons/vsc' -import { BiBookAlt } from 'react-icons/bi' +import { Book } from 'lucide-react' import { twMerge } from 'tailwind-merge' const repo = 'tanstack/query' @@ -60,7 +60,7 @@ export const queryProject = { }, menu: [ { - icon: , + icon: , label: 'Docs', to: '/query/latest/docs/framework/react/overview', }, diff --git a/src/libraries/ranger.tsx b/src/libraries/ranger.tsx index 7e5c7f830..4c4f4b25c 100644 --- a/src/libraries/ranger.tsx +++ b/src/libraries/ranger.tsx @@ -1,6 +1,6 @@ import { VscPreview } from 'react-icons/vsc' import { FaGithub } from 'react-icons/fa' -import { BiBookAlt } from 'react-icons/bi' +import { Book } from 'lucide-react' import { CgTimelapse } from 'react-icons/cg' import { TbZoomQuestion } from 'react-icons/tb' import { RiLightbulbFlashLine } from 'react-icons/ri' @@ -33,7 +33,7 @@ export const rangerProject = { scarfId: 'dd278e06-bb3f-420c-85c6-6e42d14d8f61', menu: [ { - icon: , + icon: , label: 'Docs', to: '/ranger/latest/docs/overview', }, diff --git a/src/libraries/router.tsx b/src/libraries/router.tsx index 0352dee4f..185693155 100644 --- a/src/libraries/router.tsx +++ b/src/libraries/router.tsx @@ -1,6 +1,6 @@ import { FaGithub } from 'react-icons/fa' import { VscPreview } from 'react-icons/vsc' -import { BiBookAlt } from 'react-icons/bi' +import { Book } from 'lucide-react' import { RiLightbulbFlashLine } from 'react-icons/ri' import { CgTimelapse } from 'react-icons/cg' import { TbZoomQuestion } from 'react-icons/tb' @@ -44,7 +44,7 @@ export const routerProject = { showCloudflareUrl: true, menu: [ { - icon: , + icon: , label: 'Docs', to: '/router/latest/docs/framework/react/overview', }, diff --git a/src/libraries/start.tsx b/src/libraries/start.tsx index 34c8fc426..582830e0c 100644 --- a/src/libraries/start.tsx +++ b/src/libraries/start.tsx @@ -1,6 +1,6 @@ import { FaGithub, FaYinYang } from 'react-icons/fa' import { VscPreview } from 'react-icons/vsc' -import { BiBookAlt } from 'react-icons/bi' +import { Book } from 'lucide-react' import { PiRocketLaunchDuotone, PiTreeStructureBold } from 'react-icons/pi' import { TbServerBolt } from 'react-icons/tb' import { twMerge } from 'tailwind-merge' @@ -40,7 +40,7 @@ export const startProject = { hideStackblitzUrl: true, menu: [ { - icon: , + icon: , label: 'Docs', to: '/start/latest/docs/framework/react/overview', }, diff --git a/src/libraries/store.tsx b/src/libraries/store.tsx index 91cf4cf81..901597c61 100644 --- a/src/libraries/store.tsx +++ b/src/libraries/store.tsx @@ -1,6 +1,6 @@ import { VscPreview, VscWand } from 'react-icons/vsc' import { FaGithub } from 'react-icons/fa' -import { BiBookAlt } from 'react-icons/bi' +import { Book } from 'lucide-react' import { twMerge } from 'tailwind-merge' const repo = 'tanstack/store' @@ -31,7 +31,7 @@ export const storeProject = { defaultDocs: 'overview', menu: [ { - icon: , + icon: , label: 'Docs', to: '/store/latest/docs', }, diff --git a/src/libraries/table.tsx b/src/libraries/table.tsx index 429ef5bf2..928af7e28 100644 --- a/src/libraries/table.tsx +++ b/src/libraries/table.tsx @@ -1,7 +1,7 @@ import { handleRedirects } from '~/utils/handleRedirects.server' import { VscPreview } from 'react-icons/vsc' import { FaGithub, FaBolt, FaCogs } from 'react-icons/fa' -import { BiBookAlt } from 'react-icons/bi' +import { Book } from 'lucide-react' import { IoIosBody } from 'react-icons/io' import { twMerge } from 'tailwind-merge' @@ -53,7 +53,7 @@ export const tableProject = { }, menu: [ { - icon: , + icon: , label: 'Docs', to: '/table/latest/docs/introduction', }, diff --git a/src/libraries/virtual.tsx b/src/libraries/virtual.tsx index 7fec9021b..bb225c214 100644 --- a/src/libraries/virtual.tsx +++ b/src/libraries/virtual.tsx @@ -1,6 +1,6 @@ import { VscPreview } from 'react-icons/vsc' import { FaGithub, FaBolt, FaCogs } from 'react-icons/fa' -import { BiBookAlt } from 'react-icons/bi' +import { Book } from 'lucide-react' import { IoIosBody } from 'react-icons/io' import { twMerge } from 'tailwind-merge' @@ -33,7 +33,7 @@ export const virtualProject = { legacyPackages: ['react-virtual'], menu: [ { - icon: , + icon: , label: 'Docs', to: '/virtual/latest/docs/introduction', }, diff --git a/tmp/react-icons-usage.txt b/tmp/react-icons-usage.txt new file mode 100644 index 000000000..d61b1e71a --- /dev/null +++ b/tmp/react-icons-usage.txt @@ -0,0 +1,437 @@ +Package bi + BiBookAlt + - src/libraries/ai.tsx + - src/libraries/config.tsx + - src/libraries/db.tsx + - src/libraries/devtools.tsx + - src/libraries/form.tsx + - src/libraries/pacer.tsx + - src/libraries/query.tsx + - src/libraries/ranger.tsx + - src/libraries/router.tsx + - src/libraries/start.tsx + - src/libraries/store.tsx + - src/libraries/table.tsx + - src/libraries/virtual.tsx + BiCommand + - src/components/SearchButton.tsx +Package bs + BsArrowsCollapseVertical + - src/components/Doc.tsx + BsArrowsExpandVertical + - src/components/Doc.tsx + BsCollectionFill + - src/libraries/db.tsx +Package cg + CgClose + - src/components/DocsLayout.tsx + - src/routes/admin/route.tsx + CgMenuLeft + - src/components/CodeExplorerTopBar.tsx + - src/components/DocsLayout.tsx + - src/routes/admin/route.tsx + CgTimelapse + - src/libraries/ranger.tsx + - src/libraries/router.tsx +Package fa + FaArrowDown + - src/routes/admin/stats.tsx + FaArrowLeft + - src/components/DocsLayout.tsx + - src/routes/_libraries/blog.$.tsx + - src/routes/_libraries/feed.$id.tsx + - src/routes/admin/roles.$roleId.tsx + FaArrowRight + - src/components/DocsLayout.tsx + - src/routes/_libraries/dashboard.tsx + FaArrowUp + - src/routes/admin/stats.tsx + FaAward + - src/components/FeedbackLeaderboard.tsx + - src/components/UserFeedbackSection.tsx + - src/routes/_libraries/account/feedback.tsx + FaBolt + - src/libraries/ai.tsx + - src/libraries/config.tsx + - src/libraries/db.tsx + - src/libraries/devtools.tsx + - src/libraries/form.tsx + - src/libraries/query.tsx + - src/libraries/table.tsx + - src/libraries/virtual.tsx + FaBook + - src/routes/_libraries/start.$version.index.tsx + FaChartLine + - src/routes/admin/route.tsx + - src/routes/admin/stats.tsx + FaCheck + - src/components/CopyMarkdownButton.tsx + - src/components/FeedbackModerationList.tsx + - src/components/FrameworkCard.tsx + FaCheckCircle + - src/components/FeatureGrid.tsx + - src/routes/_libraries/ads.tsx + - src/routes/_libraries/config.$version.index.tsx + - src/routes/_libraries/devtools.$version.index.tsx + - src/routes/_libraries/learn.tsx + FaChevronDown + - src/components/DocFeedbackNote.tsx + FaChevronLeft + - src/components/PaginationControls.tsx + FaChevronRight + - src/components/PaginationControls.tsx + FaChevronUp + - src/components/DocFeedbackNote.tsx + FaCogs + - src/libraries/ai.tsx + - src/libraries/config.tsx + - src/libraries/db.tsx + - src/libraries/devtools.tsx + - src/libraries/form.tsx + - src/libraries/query.tsx + - src/libraries/table.tsx + - src/libraries/virtual.tsx + FaComment + - src/components/DocFeedbackFloatingButton.tsx + - src/components/DocFeedbackNote.tsx + - src/components/DocFeedbackProvider.tsx + - src/components/FeedbackModerationList.tsx + - src/components/NotesModerationList.tsx + - src/components/UserFeedbackSection.tsx + FaComments + - src/routes/admin/route.tsx + FaCompress + - src/components/CodeExplorerTopBar.tsx + FaCopy + - src/components/CopyMarkdownButton.tsx + - src/components/FrameworkCard.tsx + FaCube + - src/components/OpenSourceStats.tsx + - src/routes/admin/github-stats.tsx + FaDiscord + - src/components/DocsLayout.tsx + - src/components/Navbar.tsx + - src/routes/$libraryId/$version.docs.framework.index.tsx + FaDownload + - src/components/OpenSourceStats.tsx + - src/routes/_libraries/brand-guide.tsx + - src/routes/admin/npm-stats.tsx + FaEdit + - src/components/Doc.tsx + - src/components/FeedEntry.tsx + - src/components/FeedEntryTimeline.tsx + - src/routes/_libraries/blog.$.tsx + - src/routes/admin/roles.index.tsx + - src/routes/admin/users.tsx + FaExclamationTriangle + - src/components/FeedbackModerationList.tsx + - src/components/NotesModerationList.tsx + FaExpand + - src/components/CodeExplorerTopBar.tsx + FaExternalLinkAlt + - src/components/NotesModerationList.tsx + - src/components/UserFeedbackSection.tsx + - src/routes/$libraryId/$version.docs.framework.$framework.examples.$.tsx + - src/routes/_libraries/account/feedback.tsx + - src/routes/_libraries/account/notes.tsx + FaEye + - src/components/FeedEntry.tsx + - src/components/FeedEntryTimeline.tsx + FaEyeSlash + - src/components/FeedEntry.tsx + - src/components/FeedEntryTimeline.tsx + - src/routes/admin/stats.tsx + FaGithub + - src/components/DocsLayout.tsx + - src/components/Navbar.tsx + - src/libraries/ai.tsx + - src/libraries/config.tsx + - src/libraries/db.tsx + - src/libraries/devtools.tsx + - src/libraries/form.tsx + - src/libraries/pacer.tsx + - src/libraries/query.tsx + - src/libraries/ranger.tsx + - src/libraries/router.tsx + - src/libraries/start.tsx + - src/libraries/store.tsx + - src/libraries/table.tsx + - src/libraries/virtual.tsx + - src/routes/$libraryId/$version.docs.framework.index.tsx + - src/routes/_libraries/ads.tsx + - src/routes/_libraries/login.tsx + - src/routes/_libraries/start.$version.index.tsx + - src/routes/admin/github-stats.tsx + - src/routes/admin/index.tsx + - src/routes/admin/route.tsx + FaGoogle + - src/routes/_libraries/ads.tsx + - src/routes/_libraries/login.tsx + FaHome + - src/routes/admin/route.tsx + FaInstagram + - src/components/Navbar.tsx + FaLightbulb + - src/components/DocFeedbackFloatingButton.tsx + - src/components/DocFeedbackNote.tsx + - src/components/DocFeedbackProvider.tsx + - src/components/FeedbackModerationList.tsx + - src/components/UserFeedbackSection.tsx + FaListUl + - src/routes/admin/stats.tsx + FaLock + - src/routes/admin/index.tsx + - src/routes/admin/roles.$roleId.tsx + - src/routes/admin/roles.index.tsx + - src/routes/admin/users.tsx + FaMedal + - src/components/FeedbackLeaderboard.tsx + FaMinus + - src/routes/admin/stats.tsx + FaMoon + - src/components/ThemeToggle.tsx + FaNpm + - src/routes/admin/index.tsx + - src/routes/admin/npm-stats.tsx + - src/routes/admin/route.tsx + FaPlus + - src/components/DocFeedbackFloatingButton.tsx + - src/routes/admin/feed.index.tsx + - src/routes/admin/roles.index.tsx + FaRegCopy + - src/components/Markdown.tsx + - src/routes/_libraries/brand-guide.tsx + FaRss + - src/routes/admin/index.tsx + - src/routes/admin/route.tsx + FaSave + - src/components/DocFeedbackNote.tsx + - src/components/admin/FeedEntryEditor.tsx + - src/routes/admin/roles.index.tsx + - src/routes/admin/users.tsx + FaShieldAlt + - src/routes/admin/index.tsx + - src/routes/admin/route.tsx + FaSignOutAlt + - src/routes/_libraries/account/index.tsx + FaSpinner + - src/routes/stats/npm/index.tsx + FaStar + - src/components/FeedEntry.tsx + - src/components/FeedEntryTimeline.tsx + - src/components/OpenSourceStats.tsx + - src/routes/admin/github-stats.tsx + FaStickyNote + - src/routes/admin/route.tsx + FaSun + - src/components/ThemeToggle.tsx + FaSync + - src/components/admin/FeedSyncStatus.tsx + - src/routes/admin/github-stats.tsx + - src/routes/admin/npm-stats.tsx + FaTimes + - src/components/DocFeedbackNote.tsx + - src/components/FeedbackModerationList.tsx + - src/components/admin/FeedEntryEditor.tsx + - src/routes/admin/roles.index.tsx + - src/routes/admin/users.tsx + FaTrash + - src/components/DocFeedbackNote.tsx + - src/components/FeedEntry.tsx + - src/components/FeedEntryTimeline.tsx + - src/routes/admin/roles.$roleId.tsx + - src/routes/admin/roles.index.tsx + FaTrophy + - src/components/FeedbackLeaderboard.tsx + FaUser + - src/routes/admin/roles.$roleId.tsx + - src/routes/admin/route.tsx + - src/routes/admin/users.tsx + FaUsers + - src/components/OpenSourceStats.tsx + - src/routes/admin/github-stats.tsx + - src/routes/admin/index.tsx + - src/routes/admin/roles.$roleId.tsx + - src/routes/admin/roles.index.tsx + - src/routes/admin/route.tsx + - src/routes/admin/stats.tsx + FaYinYang + - src/libraries/start.tsx +Package fa6 + FaCaretDown + - src/components/TocMobile.tsx + FaCaretRight + - src/components/TocMobile.tsx + FaPlug + - src/libraries/ai.tsx + FaTimeline + - src/libraries/pacer.tsx +Package gi + GiF1Car + - src/libraries/pacer.tsx +Package hi + HiCheck + - src/components/Select.tsx + HiChevronDown + - src/components/Select.tsx + HiOutlineMail + - src/routes/_libraries/paid-support.tsx + - src/routes/_libraries/workshops.tsx +Package io + IoIosBody + - src/libraries/table.tsx + - src/libraries/virtual.tsx +Package lu + LuBookOpen + - src/components/Navbar.tsx + LuCheckCircle2 + - src/routes/_libraries/workshops.tsx + LuCircle + - src/routes/merch.tsx + LuCode + - src/components/Navbar.tsx + - src/routes/_libraries/workshops.tsx + LuCode2 + - src/routes/_libraries/workshops.tsx + LuHammer + - src/components/Navbar.tsx + LuHelpCircle + - src/components/FeedFilters.tsx + - src/components/Navbar.tsx + LuList + - src/components/FilterComponents.tsx + LuLock + - src/components/Navbar.tsx + LuMapPin + - src/routes/_libraries/learn.tsx + - src/routes/_libraries/workshops.tsx + LuMenu + - src/components/Navbar.tsx + LuMusic + - src/components/Navbar.tsx + LuPaintbrush + - src/components/Navbar.tsx + LuRocket + - src/routes/_libraries/workshops.tsx + LuRotateCcw + - src/components/FeedFilters.tsx + - src/components/FilterComponents.tsx + LuRss + - src/components/Navbar.tsx + LuSettings + - src/routes/_libraries/workshops.tsx + LuShieldCheck + - src/components/Navbar.tsx + LuShirt + - src/components/Navbar.tsx + - src/routes/merch.tsx + LuShoppingBag + - src/routes/merch.tsx + LuSmartphone + - src/routes/merch.tsx + LuStar + - src/routes/_libraries/learn.tsx + - src/routes/_libraries/workshops.tsx + LuTable + - src/components/FilterComponents.tsx + LuTag + - src/routes/merch.tsx + LuTrendingUp + - src/components/Navbar.tsx + LuUser + - src/components/Navbar.tsx + LuUsers + - src/components/Navbar.tsx + - src/routes/_libraries/learn.tsx + - src/routes/_libraries/workshops.tsx + LuVideo + - src/routes/_libraries/learn.tsx + - src/routes/_libraries/workshops.tsx + LuX + - src/components/Navbar.tsx +Package md + MdAdd + - src/routes/stats/npm/index.tsx + MdClose + - src/components/SearchModal.tsx + - src/routes/_libraries/maintainers.tsx + - src/routes/_libraries/partners.tsx + - src/routes/stats/npm/index.tsx + MdExpandMore + - src/components/FilterComponents.tsx + MdFilterList + - src/routes/_libraries/maintainers.tsx + - src/routes/_libraries/partners.tsx + MdFormatListBulleted + - src/routes/$libraryId/$version.docs.contributors.tsx + - src/routes/_libraries/maintainers.tsx + - src/routes/_libraries/paid-support.tsx + MdMoreVert + - src/routes/stats/npm/index.tsx + MdPushPin + - src/routes/stats/npm/index.tsx + MdSearch + - src/components/SearchButton.tsx + - src/components/SearchModal.tsx + - src/routes/stats/npm/index.tsx + MdViewList + - src/routes/$libraryId/$version.docs.contributors.tsx + - src/routes/_libraries/maintainers.tsx + - src/routes/_libraries/paid-support.tsx + MdViewModule + - src/routes/$libraryId/$version.docs.contributors.tsx + - src/routes/_libraries/maintainers.tsx + - src/routes/_libraries/paid-support.tsx + MdVisibility + - src/routes/stats/npm/index.tsx + MdVisibilityOff + - src/routes/stats/npm/index.tsx +Package pi + PiBaseballCapBold + - src/routes/merch.tsx + PiHandWavingLight + - src/routes/_libraries/dashboard.tsx + PiRocketLaunchDuotone + - src/libraries/start.tsx + PiTreeStructureBold + - src/libraries/start.tsx +Package ri + RiLightbulbFlashLine + - src/libraries/ranger.tsx + - src/libraries/router.tsx +Package tb + TbBrandBluesky + - src/components/Navbar.tsx + TbBrandX + - src/components/Navbar.tsx + - src/routes/_libraries/start.$version.index.tsx + TbFidgetSpinner + - src/components/Spinner.tsx + TbGhost + - src/components/NotFound.tsx + TbHeartHandshake + - src/components/PartnershipCallout.tsx + TbServerBolt + - src/libraries/start.tsx + TbZoomQuestion + - src/libraries/ranger.tsx + - src/libraries/router.tsx +Package vsc + VscPreview + - src/libraries/form.tsx + - src/libraries/pacer.tsx + - src/libraries/query.tsx + - src/libraries/ranger.tsx + - src/libraries/router.tsx + - src/libraries/start.tsx + - src/libraries/store.tsx + - src/libraries/table.tsx + - src/libraries/virtual.tsx + - src/routes/_libraries/start.$version.index.tsx + VscWand + - src/libraries/config.tsx + - src/libraries/devtools.tsx + - src/libraries/form.tsx + - src/libraries/pacer.tsx + - src/libraries/query.tsx + - src/libraries/store.tsx From faafd978ecb77347393a48747c796f2e293cb877 Mon Sep 17 00:00:00 2001 From: LadyBluenotes Date: Tue, 16 Dec 2025 20:27:33 -0800 Subject: [PATCH 02/27] fix book icon --- src/styles/app.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/styles/app.css b/src/styles/app.css index b6ea0da1c..6ef5fa9a5 100644 --- a/src/styles/app.css +++ b/src/styles/app.css @@ -660,3 +660,11 @@ mark { background-color: rgba(59, 130, 246, 0.05); outline-color: rgba(59, 130, 246, 0.3); } + +/* Icons */ + +.lucide-book { + height: 1em; + width: 1em; +} + From 077e78ac011790056fecd1ca02d599ffd35b7e75 Mon Sep 17 00:00:00 2001 From: Sarah Gerrard Date: Wed, 17 Dec 2025 04:36:31 +0000 Subject: [PATCH 03/27] update command icon --- src/components/SearchButton.tsx | 4 ++-- tmp/react-icons-usage.txt | 17 ----------------- 2 files changed, 2 insertions(+), 19 deletions(-) diff --git a/src/components/SearchButton.tsx b/src/components/SearchButton.tsx index fa1c64061..41ae3bf7f 100644 --- a/src/components/SearchButton.tsx +++ b/src/components/SearchButton.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { BiCommand } from 'react-icons/bi' +import { Command } from 'lucide-react' import { MdSearch } from 'react-icons/md' import { twMerge } from 'tailwind-merge' import { useSearchContext } from '~/contexts/SearchContext' @@ -24,7 +24,7 @@ export function SearchButton({ className }: SearchButtonProps) { Search...
- + K + + K
) diff --git a/tmp/react-icons-usage.txt b/tmp/react-icons-usage.txt index d61b1e71a..a91835277 100644 --- a/tmp/react-icons-usage.txt +++ b/tmp/react-icons-usage.txt @@ -1,20 +1,3 @@ -Package bi - BiBookAlt - - src/libraries/ai.tsx - - src/libraries/config.tsx - - src/libraries/db.tsx - - src/libraries/devtools.tsx - - src/libraries/form.tsx - - src/libraries/pacer.tsx - - src/libraries/query.tsx - - src/libraries/ranger.tsx - - src/libraries/router.tsx - - src/libraries/start.tsx - - src/libraries/store.tsx - - src/libraries/table.tsx - - src/libraries/virtual.tsx - BiCommand - - src/components/SearchButton.tsx Package bs BsArrowsCollapseVertical - src/components/Doc.tsx From bc13d2cf5197fa23729be1d6ea0acb2ac3d09e12 Mon Sep 17 00:00:00 2001 From: LadyBluenotes Date: Tue, 16 Dec 2025 20:51:53 -0800 Subject: [PATCH 04/27] replace react-icons/bs --- src/components/Doc.tsx | 12 ++++++------ src/libraries/db.tsx | 4 ++-- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/Doc.tsx b/src/components/Doc.tsx index 488fa8333..4ffa39c9c 100644 --- a/src/components/Doc.tsx +++ b/src/components/Doc.tsx @@ -1,8 +1,5 @@ import * as React from 'react' -import { - BsArrowsCollapseVertical, - BsArrowsExpandVertical, -} from 'react-icons/bs' +import { FoldHorizontal, UnfoldHorizontal } from 'lucide-react' import { FaEdit } from 'react-icons/fa' import { twMerge } from 'tailwind-merge' import { useWidthToggle } from '~/components/DocsLayout' @@ -146,9 +143,12 @@ function DocContent({ title={isFullWidth ? 'Constrain width' : 'Expand width'} > {isFullWidth ? ( - + ) : ( - + )} )} diff --git a/src/libraries/db.tsx b/src/libraries/db.tsx index e26f27ded..fb3840dc3 100644 --- a/src/libraries/db.tsx +++ b/src/libraries/db.tsx @@ -1,4 +1,4 @@ -import { BsCollectionFill } from 'react-icons/bs' +import { GalleryVerticalEnd } from 'lucide-react' import { FaGithub, FaBolt, FaCogs } from 'react-icons/fa' import { Book } from 'lucide-react' import { twMerge } from 'tailwind-merge' @@ -49,7 +49,7 @@ export const dbProject = { featureHighlights: [ { title: 'Collections', - icon: , + icon: , description: (
Collections are typed sets of objects. Sync or load data into them. From 0da013324a2641d5fbe4e0b2c04ab4ea11ea9c5f Mon Sep 17 00:00:00 2001 From: LadyBluenotes Date: Tue, 16 Dec 2025 21:13:32 -0800 Subject: [PATCH 05/27] migrate to close icons to lucide-react x --- src/components/Doc.tsx | 3 +- src/components/DocsLayout.tsx | 6 +-- src/components/SearchButton.tsx | 2 +- src/components/SearchModal.tsx | 5 ++- src/routes/_libraries/maintainers.tsx | 4 +- src/routes/_libraries/partners.tsx | 5 ++- src/routes/admin/route.tsx | 6 +-- src/routes/stats/npm/index.tsx | 65 +++------------------------ src/styles/app.css | 3 ++ 9 files changed, 25 insertions(+), 74 deletions(-) diff --git a/src/components/Doc.tsx b/src/components/Doc.tsx index 4ffa39c9c..f024479c0 100644 --- a/src/components/Doc.tsx +++ b/src/components/Doc.tsx @@ -143,11 +143,10 @@ function DocContent({ title={isFullWidth ? 'Constrain width' : 'Expand width'} > {isFullWidth ? ( - + ) : ( )} diff --git a/src/components/DocsLayout.tsx b/src/components/DocsLayout.tsx index 68d7e155b..7feb69b36 100644 --- a/src/components/DocsLayout.tsx +++ b/src/components/DocsLayout.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { CgClose, CgMenuLeft } from 'react-icons/cg' +import { X, TextAlignStart } from 'lucide-react' import { FaArrowLeft, FaArrowRight, FaDiscord, FaGithub } from 'react-icons/fa' import { Link, useMatches, useParams } from '@tanstack/react-router' import { useLocalStorage } from '~/utils/useLocalStorage' @@ -292,8 +292,8 @@ export function DocsLayout({ >
- - + + Documentation
diff --git a/src/components/SearchButton.tsx b/src/components/SearchButton.tsx index 41ae3bf7f..65c365ca9 100644 --- a/src/components/SearchButton.tsx +++ b/src/components/SearchButton.tsx @@ -24,7 +24,7 @@ export function SearchButton({ className }: SearchButtonProps) { Search...
- + K + + K
) diff --git a/src/components/SearchModal.tsx b/src/components/SearchModal.tsx index a19e88bd9..87fbe5a73 100644 --- a/src/components/SearchModal.tsx +++ b/src/components/SearchModal.tsx @@ -12,7 +12,8 @@ import { Pagination, } from 'react-instantsearch' import { liteClient } from 'algoliasearch/lite' -import { MdClose, MdSearch } from 'react-icons/md' +import { X } from 'lucide-react' +import { MdSearch } from 'react-icons/md' import { Link, useRouterState } from '@tanstack/react-router' import { useSearchContext } from '~/contexts/SearchContext' import { libraries } from '~/libraries' @@ -312,7 +313,7 @@ const submitIconComponent = () => { } const resetIconComponent = () => { - return + return } export function SearchModal() { diff --git a/src/routes/_libraries/maintainers.tsx b/src/routes/_libraries/maintainers.tsx index 2c98ae898..4ae30d4c5 100644 --- a/src/routes/_libraries/maintainers.tsx +++ b/src/routes/_libraries/maintainers.tsx @@ -2,8 +2,8 @@ import { createFileRoute } from '@tanstack/react-router' import { z } from 'zod' import { useState } from 'react' import * as React from 'react' +import { X } from 'lucide-react' import { - MdClose, MdFilterList, MdViewList, MdViewModule, @@ -324,7 +324,7 @@ function MaintainersFilter({ onClick={() => toggleLibrary(libraryId)} className="hover:bg-black/10 dark:hover:bg-white/10 rounded p-0.5 transition-colors" > - + ) diff --git a/src/routes/_libraries/partners.tsx b/src/routes/_libraries/partners.tsx index a69d2a313..dadb1a95f 100644 --- a/src/routes/_libraries/partners.tsx +++ b/src/routes/_libraries/partners.tsx @@ -6,7 +6,8 @@ import { z } from 'zod' import { Library } from '~/libraries' import { useState } from 'react' import * as React from 'react' -import { MdClose, MdFilterList } from 'react-icons/md' +import { X } from 'lucide-react' +import { MdFilterList } from 'react-icons/md' import { startProject } from '~/libraries/start' import { routerProject } from '~/libraries/router' import { queryProject } from '~/libraries/query' @@ -253,7 +254,7 @@ function PartnersFilter({ onClick={() => toggleLibrary(libraryId)} className="hover:bg-blue-200 dark:hover:bg-blue-800 rounded p-0.5 transition-colors" > - + ) diff --git a/src/routes/admin/route.tsx b/src/routes/admin/route.tsx index 3fccc242a..59d206e10 100644 --- a/src/routes/admin/route.tsx +++ b/src/routes/admin/route.tsx @@ -6,7 +6,7 @@ import { createFileRoute, redirect, } from '@tanstack/react-router' -import { CgClose, CgMenuLeft } from 'react-icons/cg' +import { X, TextAlignStart } from 'lucide-react' import { FaHome, FaUser, @@ -166,8 +166,8 @@ export function AdminLayout({ children }: { children: React.ReactNode }) { >
- - + + Admin Menu
diff --git a/src/routes/stats/npm/index.tsx b/src/routes/stats/npm/index.tsx index 39a57a498..99aa7af9f 100644 --- a/src/routes/stats/npm/index.tsx +++ b/src/routes/stats/npm/index.tsx @@ -2,8 +2,8 @@ import * as React from 'react' import { Link, createFileRoute } from '@tanstack/react-router' import { z } from 'zod' import { useDebouncedValue, useThrottledCallback } from '@tanstack/react-pacer' +import { X } from 'lucide-react' import { - MdClose, MdVisibility, MdVisibilityOff, MdAdd, @@ -1657,7 +1657,7 @@ function RouteComponent() { }} className="p-1 text-gray-400 hover:text-red-500" > - + @@ -1682,7 +1682,7 @@ function RouteComponent() { onClick={() => handleRemovePackageName(index)} className="ml-auto pl-0.5 sm:pl-1 text-gray-500 hover:text-red-500" > - + {packageError && ( @@ -1707,7 +1707,7 @@ function RouteComponent() { onClick={() => setCombiningPackage(null)} className="p-0.5 sm:p-1 hover:text-red-500" > - + Downloads last {binOption.single} - {/* - Period Growth - - - Period Growth % - */} @@ -1834,20 +1828,9 @@ function RouteComponent() { return null } - // const flooredStartData = - // binOption.bin.floor(startDate) - const firstPackage = packageGroupDownloads.packages[0] - // const rangeFilteredDownloads = - // packageGroupDownloads.packages.map((p) => { - // return { - // ...p, - // downloads: p.downloads.filter( - // (d) => d.day >= startDate - // ), - // } - // }) + // Sort downloads by date const sortedDownloads = packageGroupDownloads.packages @@ -1958,7 +1941,7 @@ function RouteComponent() { } className="p-0.5 text-gray-500 hover:text-red-500" > - + @@ -1971,42 +1954,6 @@ function RouteComponent() { {formatNumber(stat!.binDownloads)} - {/* 0 - ? 'text-green-500' - : stat!.growth < 0 - ? 'text-red-500' - : 'text-gray-500' - }`} - > -
- {stat!.growth > 0 ? ( - - ) : ( - - )} - {formatNumber(Math.abs(stat!.growth))} -
- - 0 - ? 'text-green-500' - : stat!.growthPercentage < 0 - ? 'text-red-500' - : 'text-gray-500' - }`} - > -
- {stat!.growthPercentage > 0 ? ( - - ) : ( - - )} - {Math.abs(stat!.growthPercentage).toFixed(1)}% -
- */} ))} diff --git a/src/styles/app.css b/src/styles/app.css index 6ef5fa9a5..357084d18 100644 --- a/src/styles/app.css +++ b/src/styles/app.css @@ -668,3 +668,6 @@ mark { width: 1em; } +.lucide { + stroke-width: 2.25; +} From c443ae2d0e1c532a40b323c853acc1914071eb9e Mon Sep 17 00:00:00 2001 From: LadyBluenotes Date: Tue, 16 Dec 2025 21:46:22 -0800 Subject: [PATCH 06/27] discord, close, and github icons plus some others --- src/components/CodeExplorerTopBar.tsx | 24 +++++++++++----- src/components/DocsLayout.tsx | 15 +++++----- src/components/Navbar.tsx | 3 +- src/components/icons/DiscordIcon.tsx | 25 +++++++++++++++++ src/components/icons/GithubIcon.tsx | 25 +++++++++++++++++ src/libraries/ai.tsx | 3 +- src/libraries/config.tsx | 3 +- src/libraries/db.tsx | 3 +- src/libraries/devtools.tsx | 3 +- src/libraries/form.tsx | 3 +- src/libraries/pacer.tsx | 4 +-- src/libraries/query.tsx | 3 +- src/libraries/ranger.tsx | 3 +- src/libraries/router.tsx | 4 +-- src/libraries/start.tsx | 3 +- src/libraries/store.tsx | 3 +- src/libraries/table.tsx | 3 +- src/libraries/virtual.tsx | 3 +- .../$version.docs.framework.index.tsx | 3 +- src/routes/_libraries/ads.tsx | 3 +- src/routes/_libraries/login.tsx | 3 +- .../_libraries/start.$version.index.tsx | 3 +- src/routes/admin/github-stats.tsx | 3 +- src/routes/admin/index.tsx | 3 +- src/routes/admin/route.tsx | 3 +- tmp/react-icons-usage.txt | 28 ------------------- 26 files changed, 116 insertions(+), 66 deletions(-) create mode 100644 src/components/icons/DiscordIcon.tsx create mode 100644 src/components/icons/GithubIcon.tsx diff --git a/src/components/CodeExplorerTopBar.tsx b/src/components/CodeExplorerTopBar.tsx index b998ca205..131df7b59 100644 --- a/src/components/CodeExplorerTopBar.tsx +++ b/src/components/CodeExplorerTopBar.tsx @@ -1,6 +1,5 @@ import React from 'react' -import { FaExpand, FaCompress } from 'react-icons/fa' -import { CgMenuLeft } from 'react-icons/cg' +import { ArrowLeftFromLine, ArrowRightFromLine, Maximize, Minimize, TextAlignStart } from 'lucide-react' interface CodeExplorerTopBarProps { activeTab: 'code' | 'sandbox' @@ -23,16 +22,27 @@ export function CodeExplorerTopBar({
{activeTab === 'code' ? ( + isSidebarOpen ? + : + ( + + ) ) : (
- +
)}
diff --git a/src/components/DocsLayout.tsx b/src/components/DocsLayout.tsx index 7feb69b36..ced5b062b 100644 --- a/src/components/DocsLayout.tsx +++ b/src/components/DocsLayout.tsx @@ -1,6 +1,7 @@ import * as React from 'react' -import { X, TextAlignStart } from 'lucide-react' -import { FaArrowLeft, FaArrowRight, FaDiscord, FaGithub } from 'react-icons/fa' +import { X, TextAlignStart, ArrowLeft, ArrowRight } from 'lucide-react' +import { GithubIcon } from '~/components/icons/GithubIcon' +import { DiscordIcon } from '~/components/icons/DiscordIcon' import { Link, useMatches, useParams } from '@tanstack/react-router' import { useLocalStorage } from '~/utils/useLocalStorage' import { last } from '~/utils/utils' @@ -79,7 +80,7 @@ const useMenuConfig = ({ { label: (
- GitHub + GitHub
), to: `https://github.com/${repo}`, @@ -87,7 +88,7 @@ const useMenuConfig = ({ { label: (
- Discord + Discord
), to: 'https://tlinz.com/discord', @@ -155,8 +156,6 @@ export function DocsLayout({ from: '/$libraryId/$version/docs', }) const { _splat } = useParams({ strict: false }) - // const frameworkConfig = useFrameworkConfig({ frameworks }) - // const versionConfig = useVersionConfig({ versions }) const menuConfig = useMenuConfig({ config, frameworks, repo }) const matches = useMatches() @@ -363,7 +362,7 @@ export function DocsLayout({ className="py-1 px-2 bg-white/70 text-black dark:bg-gray-500/40 dark:text-white shadow-lg shadow-black/20 flex items-center justify-center backdrop-blur-sm z-20 rounded-lg overflow-hidden" >
- + {prevItem.label}
@@ -383,7 +382,7 @@ export function DocsLayout({ > {nextItem.label} {' '} - +
) : null} diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index f79f09714..bbe8ee2c7 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -36,6 +36,7 @@ import { } from '~/components/AuthComponents' import { libraries } from '~/libraries' import { useCapabilities } from '~/hooks/useCapabilities' +import { GithubIcon } from '~/components/icons/GithubIcon' export function Navbar({ children }: { children: React.ReactNode }) { const matches = useMatches() @@ -506,7 +507,7 @@ export function Navbar({ children }: { children: React.ReactNode }) { }, { label: 'GitHub', - icon: , + icon: , to: 'https://github.com/tanstack', }, { diff --git a/src/components/icons/DiscordIcon.tsx b/src/components/icons/DiscordIcon.tsx new file mode 100644 index 000000000..ac2a6d00d --- /dev/null +++ b/src/components/icons/DiscordIcon.tsx @@ -0,0 +1,25 @@ +import * as React from 'react' + +import type { IconProps } from './GithubIcon' + +export function DiscordIcon({ + className, + width = '1em', + height = '1em', + ...props + }: IconProps) { + return ( + + + + ) +} diff --git a/src/components/icons/GithubIcon.tsx b/src/components/icons/GithubIcon.tsx new file mode 100644 index 000000000..f5048f61c --- /dev/null +++ b/src/components/icons/GithubIcon.tsx @@ -0,0 +1,25 @@ +import * as React from 'react' + +export type IconProps = React.SVGProps + +export function GithubIcon({ + className, + width = '1em', + height = '1em', + ...props + }: IconProps) { + return ( + + + + ) +} diff --git a/src/libraries/ai.tsx b/src/libraries/ai.tsx index 981ffe45d..d40cf11c4 100644 --- a/src/libraries/ai.tsx +++ b/src/libraries/ai.tsx @@ -3,6 +3,7 @@ import { FaGithub, FaBolt, FaCogs } from 'react-icons/fa' import { Book } from 'lucide-react' import { twMerge } from 'tailwind-merge' import { FaPlug } from 'react-icons/fa6' +import { GithubIcon } from '~/components/icons/GithubIcon' const repo = 'tanstack/ai' @@ -37,7 +38,7 @@ export const aiProject = { to: '/ai/latest/docs', }, { - icon: , + icon: , label: 'Github', to: `https://github.com/${repo}`, }, diff --git a/src/libraries/config.tsx b/src/libraries/config.tsx index 0ae1dca3f..a8ef847a0 100644 --- a/src/libraries/config.tsx +++ b/src/libraries/config.tsx @@ -2,6 +2,7 @@ import { FaGithub, FaBolt, FaCogs } from 'react-icons/fa' import { Book } from 'lucide-react' import { VscWand } from 'react-icons/vsc' import { twMerge } from 'tailwind-merge' +import { GithubIcon } from '~/components/icons/GithubIcon' const repo = 'tanstack/config' @@ -34,7 +35,7 @@ export const configProject = { to: '/config/latest/docs', }, { - icon: , + icon: , label: 'Github', to: `https://github.com/${repo}`, }, diff --git a/src/libraries/db.tsx b/src/libraries/db.tsx index fb3840dc3..8e4df24e9 100644 --- a/src/libraries/db.tsx +++ b/src/libraries/db.tsx @@ -2,6 +2,7 @@ import { GalleryVerticalEnd } from 'lucide-react' import { FaGithub, FaBolt, FaCogs } from 'react-icons/fa' import { Book } from 'lucide-react' import { twMerge } from 'tailwind-merge' +import { GithubIcon } from '~/components/icons/GithubIcon' const repo = 'tanstack/db' @@ -41,7 +42,7 @@ export const dbProject = { // to: '/db/latest/docs/framework/react/examples/todo', // }, { - icon: , + icon: , label: 'Github', to: `https://github.com/${repo}`, }, diff --git a/src/libraries/devtools.tsx b/src/libraries/devtools.tsx index 2f4d6e109..d2f6d1239 100644 --- a/src/libraries/devtools.tsx +++ b/src/libraries/devtools.tsx @@ -2,6 +2,7 @@ import { FaGithub, FaBolt, FaCogs } from 'react-icons/fa' import { Book } from 'lucide-react' import { VscWand } from 'react-icons/vsc' import { twMerge } from 'tailwind-merge' +import { GithubIcon } from '~/components/icons/GithubIcon' const repo = 'tanstack/devtools' @@ -35,7 +36,7 @@ export const devtoolsProject = { to: '/devtools/latest/docs', }, { - icon: , + icon: , label: 'Github', to: `https://github.com/${repo}`, }, diff --git a/src/libraries/form.tsx b/src/libraries/form.tsx index 633771cdb..1f10ef420 100644 --- a/src/libraries/form.tsx +++ b/src/libraries/form.tsx @@ -2,6 +2,7 @@ import { VscPreview, VscWand } from 'react-icons/vsc' import { FaGithub, FaBolt, FaCogs } from 'react-icons/fa' import { Book } from 'lucide-react' import { twMerge } from 'tailwind-merge' +import { GithubIcon } from '~/components/icons/GithubIcon' const repo = 'tanstack/form' @@ -40,7 +41,7 @@ export const formProject = { to: '/form/latest/docs/framework/react/examples/simple', }, { - icon: , + icon: , label: 'Github', to: `https://github.com/${repo}`, }, diff --git a/src/libraries/pacer.tsx b/src/libraries/pacer.tsx index 9ffee6d8b..e4085d19a 100644 --- a/src/libraries/pacer.tsx +++ b/src/libraries/pacer.tsx @@ -1,5 +1,5 @@ import { VscPreview, VscWand } from 'react-icons/vsc' -import { FaGithub } from 'react-icons/fa' +import { GithubIcon } from '~/components/icons/GithubIcon' import { Book } from 'lucide-react' import { GiF1Car } from 'react-icons/gi' import { twMerge } from 'tailwind-merge' @@ -43,7 +43,7 @@ export const pacerProject = { to: '/pacer/latest/docs/framework/react/examples/debounce', }, { - icon: , + icon: , label: 'Github', to: `https://github.com/${repo}`, }, diff --git a/src/libraries/query.tsx b/src/libraries/query.tsx index cb8242993..7ebc1226a 100644 --- a/src/libraries/query.tsx +++ b/src/libraries/query.tsx @@ -3,6 +3,7 @@ import { FaGithub, FaBolt, FaCogs } from 'react-icons/fa' import { VscPreview, VscWand } from 'react-icons/vsc' import { Book } from 'lucide-react' import { twMerge } from 'tailwind-merge' +import { GithubIcon } from '~/components/icons/GithubIcon' const repo = 'tanstack/query' @@ -70,7 +71,7 @@ export const queryProject = { to: '/query/latest/docs/framework/react/examples/basic', }, { - icon: , + icon: , label: 'GitHub', to: `https://github.com/${repo}`, }, diff --git a/src/libraries/ranger.tsx b/src/libraries/ranger.tsx index 4c4f4b25c..fff3b6e43 100644 --- a/src/libraries/ranger.tsx +++ b/src/libraries/ranger.tsx @@ -5,6 +5,7 @@ import { CgTimelapse } from 'react-icons/cg' import { TbZoomQuestion } from 'react-icons/tb' import { RiLightbulbFlashLine } from 'react-icons/ri' import { twMerge } from 'tailwind-merge' +import { GithubIcon } from '~/components/icons/GithubIcon' const repo = 'tanstack/ranger' @@ -43,7 +44,7 @@ export const rangerProject = { to: '/ranger/latest/docs/framework/react/examples/basic', }, { - icon: , + icon: , label: 'Github', to: `https://github.com/${repo}`, }, diff --git a/src/libraries/router.tsx b/src/libraries/router.tsx index 185693155..94a2b3ede 100644 --- a/src/libraries/router.tsx +++ b/src/libraries/router.tsx @@ -1,4 +1,3 @@ -import { FaGithub } from 'react-icons/fa' import { VscPreview } from 'react-icons/vsc' import { Book } from 'lucide-react' import { RiLightbulbFlashLine } from 'react-icons/ri' @@ -6,6 +5,7 @@ import { CgTimelapse } from 'react-icons/cg' import { TbZoomQuestion } from 'react-icons/tb' import { twMerge } from 'tailwind-merge' import { redirect } from '@tanstack/react-router' +import { GithubIcon } from '~/components/icons/GithubIcon' const repo = 'tanstack/router' @@ -54,7 +54,7 @@ export const routerProject = { to: '/router/latest/docs/framework/react/examples/kitchen-sink-file-based', }, { - icon: , + icon: , label: 'GitHub', to: `https://github.com/${repo}`, }, diff --git a/src/libraries/start.tsx b/src/libraries/start.tsx index 582830e0c..9fe74c704 100644 --- a/src/libraries/start.tsx +++ b/src/libraries/start.tsx @@ -5,6 +5,7 @@ import { PiRocketLaunchDuotone, PiTreeStructureBold } from 'react-icons/pi' import { TbServerBolt } from 'react-icons/tb' import { twMerge } from 'tailwind-merge' import { redirect } from '@tanstack/react-router' +import { GithubIcon } from '~/components/icons/GithubIcon' const repo = 'tanstack/router' @@ -50,7 +51,7 @@ export const startProject = { to: '/start/latest/docs/framework/react/examples/start-basic', }, { - icon: , + icon: , label: 'GitHub', to: `https://github.com/${repo}`, }, diff --git a/src/libraries/store.tsx b/src/libraries/store.tsx index 901597c61..18851f41b 100644 --- a/src/libraries/store.tsx +++ b/src/libraries/store.tsx @@ -2,6 +2,7 @@ import { VscPreview, VscWand } from 'react-icons/vsc' import { FaGithub } from 'react-icons/fa' import { Book } from 'lucide-react' import { twMerge } from 'tailwind-merge' +import { GithubIcon } from '~/components/icons/GithubIcon' const repo = 'tanstack/store' @@ -41,7 +42,7 @@ export const storeProject = { to: '/store/latest/docs/framework/react/examples/simple', }, { - icon: , + icon: , label: 'Github', to: `https://github.com/${repo}`, }, diff --git a/src/libraries/table.tsx b/src/libraries/table.tsx index 928af7e28..9b23c23b8 100644 --- a/src/libraries/table.tsx +++ b/src/libraries/table.tsx @@ -4,6 +4,7 @@ import { FaGithub, FaBolt, FaCogs } from 'react-icons/fa' import { Book } from 'lucide-react' import { IoIosBody } from 'react-icons/io' import { twMerge } from 'tailwind-merge' +import { GithubIcon } from '~/components/icons/GithubIcon' const repo = 'tanstack/table' @@ -63,7 +64,7 @@ export const tableProject = { to: '/table/latest/docs/framework/react/examples/basic', }, { - icon: , + icon: , label: 'Github', to: `https://github.com/${repo}`, }, diff --git a/src/libraries/virtual.tsx b/src/libraries/virtual.tsx index bb225c214..c4830dd3b 100644 --- a/src/libraries/virtual.tsx +++ b/src/libraries/virtual.tsx @@ -3,6 +3,7 @@ import { FaGithub, FaBolt, FaCogs } from 'react-icons/fa' import { Book } from 'lucide-react' import { IoIosBody } from 'react-icons/io' import { twMerge } from 'tailwind-merge' +import { GithubIcon } from '~/components/icons/GithubIcon' const repo = 'tanstack/virtual' @@ -43,7 +44,7 @@ export const virtualProject = { to: '/virtual/latest/docs/framework/react/examples/dynamic', }, { - icon: , + icon: , label: 'Github', to: `https://github.com/${repo}`, }, diff --git a/src/routes/$libraryId/$version.docs.framework.index.tsx b/src/routes/$libraryId/$version.docs.framework.index.tsx index b2decd37a..84372a49f 100644 --- a/src/routes/$libraryId/$version.docs.framework.index.tsx +++ b/src/routes/$libraryId/$version.docs.framework.index.tsx @@ -6,6 +6,7 @@ import { DocTitle } from '~/components/DocTitle' import { getLibrary } from '~/libraries' import { getFrameworkOptions } from '~/libraries/frameworks' import { FrameworkCard } from '~/components/FrameworkCard' +import { GithubIcon } from '~/components/icons/GithubIcon' export const Route = createFileRoute('/$libraryId/$version/docs/framework/')({ component: RouteComponent, @@ -102,7 +103,7 @@ function RouteComponent() { rel="noopener noreferrer" className="inline-flex items-center gap-2 px-6 py-3 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 rounded-lg hover:bg-gray-800 dark:hover:bg-gray-200 transition-colors" > - + Start Discussion diff --git a/src/routes/_libraries/ads.tsx b/src/routes/_libraries/ads.tsx index 0a69cca3f..1a59d4672 100644 --- a/src/routes/_libraries/ads.tsx +++ b/src/routes/_libraries/ads.tsx @@ -8,6 +8,7 @@ import { useCurrentUserQuery } from '~/hooks/useCurrentUser' import { useToast } from '~/components/ToastProvider' import { useEffect, useState } from 'react' import { setInterestedInHidingAds } from '~/utils/users.server' +import { GithubIcon } from '~/components/icons/GithubIcon' export const Route = createFileRoute('/_libraries/ads')({ component: RouteComp, @@ -202,7 +203,7 @@ function SignInForm() { } className="w-full bg-black/80 hover:bg-black text-white dark:text-black dark:bg-white/95 dark:hover:bg-white font-semibold py-2 px-4 rounded-md transition-colors" > - Sign in with GitHub + Sign in with GitHub - ))} - - - */} - - {/* {[''].includes(framework) ? ( -
-
- Looking for the @tanstack/{framework}-query{' '} - example? We could use your help to build the{' '} - @tanstack/{framework}-query adapter! Join the{' '} - - TanStack Discord Server - {' '} - and let's get to work! -
-
- ) : ( -
- -
- )} */} - Date: Tue, 16 Dec 2025 22:33:32 -0800 Subject: [PATCH 09/27] replace FontAwesome icons with Lucide icons for consistency --- src/components/CopyMarkdownButton.tsx | 5 +++-- src/components/DocFeedbackNote.tsx | 8 +++----- src/components/FeedbackModerationList.tsx | 4 ++-- src/components/FrameworkCard.tsx | 5 +++-- src/components/PaginationControls.tsx | 6 +++--- src/components/Select.tsx | 5 +++-- src/routes/_libraries/start.$version.index.tsx | 5 ++--- src/routes/admin/route.tsx | 6 ++---- src/routes/admin/stats.tsx | 7 ++----- tmp/react-icons-usage.txt | 13 ------------- 10 files changed, 23 insertions(+), 41 deletions(-) diff --git a/src/components/CopyMarkdownButton.tsx b/src/components/CopyMarkdownButton.tsx index 04062db22..4c7c54728 100644 --- a/src/components/CopyMarkdownButton.tsx +++ b/src/components/CopyMarkdownButton.tsx @@ -1,9 +1,10 @@ 'use client' import { useState, useTransition } from 'react' -import { FaCheck, FaCopy } from 'react-icons/fa' +import { FaCopy } from 'react-icons/fa' import { type MouseEventHandler, useEffect, useRef } from 'react' import { useToast } from '~/components/ToastProvider' +import { Check } from 'lucide-react' export function useCopyButton( onCopy: () => void | Promise, @@ -115,7 +116,7 @@ export function CopyMarkdownButton({
{checked ? ( <> - Copied to Clipboard + Copied to Clipboard ) : ( <> diff --git a/src/components/DocFeedbackNote.tsx b/src/components/DocFeedbackNote.tsx index cc1e4b5d3..a1e96c3cb 100644 --- a/src/components/DocFeedbackNote.tsx +++ b/src/components/DocFeedbackNote.tsx @@ -4,8 +4,6 @@ import { FaComment, FaLightbulb, FaTrash, - FaChevronDown, - FaChevronUp, FaSave, FaTimes, } from 'react-icons/fa' @@ -15,8 +13,8 @@ import { updateDocFeedback, updateDocFeedbackCollapsed, } from '~/utils/docFeedback.functions' -import { useToast } from '~/components/ToastProvider' import type { DocFeedback } from '~/db/schema' +import { ChevronDown, ChevronUp } from 'lucide-react' interface DocFeedbackNoteProps { note: DocFeedback @@ -394,9 +392,9 @@ export function DocFeedbackNote({ } > {note.isCollapsed ? ( - + ) : ( - + )}
diff --git a/src/components/FeedbackModerationList.tsx b/src/components/FeedbackModerationList.tsx index aa7e32511..3bce0259a 100644 --- a/src/components/FeedbackModerationList.tsx +++ b/src/components/FeedbackModerationList.tsx @@ -1,7 +1,6 @@ import * as React from 'react' import { twMerge } from 'tailwind-merge' import { - FaCheck, FaTimes, FaComment, FaLightbulb, @@ -20,6 +19,7 @@ import { PaginationControls } from './PaginationControls' import { Spinner } from './Spinner' import type { DocFeedback } from '~/db/schema' import { calculatePoints } from '~/utils/docFeedback.client' +import { Check } from 'lucide-reactd' interface FeedbackModerationListProps { data: @@ -235,7 +235,7 @@ export function FeedbackModerationList({ className="px-3 py-1 text-xs font-medium text-white bg-green-600 hover:bg-green-700 rounded transition-colors" title="Approve" > - + @@ -175,7 +175,7 @@ export function PaginationControls({ className="flex items-center px-2 py-1 text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded hover:bg-gray-50 hover:text-gray-900 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-white disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-white dark:disabled:hover:bg-gray-800 gap-1 transition-colors" > Next - + diff --git a/src/components/Select.tsx b/src/components/Select.tsx index b38e1ad18..d87053b7d 100644 --- a/src/components/Select.tsx +++ b/src/components/Select.tsx @@ -1,7 +1,8 @@ import { Fragment } from 'react' import { Listbox, Transition } from '@headlessui/react' -import { HiCheck, HiChevronDown } from 'react-icons/hi' +import { HiCheck } from 'react-icons/hi' +import { ChevronDown } from 'lucide-react' export type SelectOption = { label: string @@ -57,7 +58,7 @@ export function Select({ ) : null} {selectedOption.label} -