[ { "path": ".github/pull_request_template.md", "content": "## I have read the [CONTRIBUTING.md](https://github.com/pqoqubbw/icons/blob/main/CONTRIBUTING.md) file.\n\nYES/NO\n\n## What kind of change does this PR introduce?\n\nBug fix, feature, docs update, ...\n\n## What is the new behavior?\n\nFeel free to include screenshots if it includes visual changes.\n\n## Demo\n\nPlease attach a short video demo of the changes.\n\n## Additional context\n\nAdd any other context or screenshots.\n" }, { "path": ".github/workflows/ci.yml", "content": "name: CI\n\non:\n pull_request:\n branches: [main]\n push:\n branches: [main]\n\njobs:\n check-imports:\n name: Check Imports\n runs-on: ubuntu-latest\n\n steps:\n - name: Checkout\n uses: actions/checkout@v4\n\n - name: Setup pnpm\n uses: pnpm/action-setup@v4\n with:\n version: 9\n\n - name: Setup Node.js\n uses: actions/setup-node@v4\n with:\n node-version: '20'\n cache: 'pnpm'\n\n - name: Install dependencies\n run: pnpm install --frozen-lockfile\n\n - name: Check imports\n run: pnpm check-imports\n\n check-duplicates:\n name: Check Duplicates\n runs-on: ubuntu-latest\n\n steps:\n - name: Checkout\n uses: actions/checkout@v4\n\n - name: Setup pnpm\n uses: pnpm/action-setup@v4\n with:\n version: 9\n\n - name: Setup Node.js\n uses: actions/setup-node@v4\n with:\n node-version: '20'\n cache: 'pnpm'\n\n - name: Install dependencies\n run: pnpm install --frozen-lockfile\n\n - name: Check duplicates\n run: pnpm check-duplicates\n" }, { "path": ".gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.*\n.yarn/*\n!.yarn/patches\n!.yarn/plugins\n!.yarn/releases\n!.yarn/versions\n\n_app/*\n\npackage-lock.json\nyarn.lock\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# env files (can opt-in for commiting if needed)\n.env*\n\n# vercel\n.vercel\n.cursor\n\n# typescript\n*.tsbuildinfo\nnext-env.d.ts\n\n# proprietary fonts (not licensed for public distribution)\n# fonts are downloaded at build time from Vercel Blob Storage\n/fonts/*.woff\n/fonts/*.woff2\n/fonts/*.ttf\n/fonts/*.otf\n/fonts/*EULA.pdf\n/fonts/Grilli-Type-EULA.pdf\n" }, { "path": ".vscode/settings.json", "content": "{\n \"cSpell.words\": [\"Downvote\", \"LUCIDE\", \"nuqs\", \"pqoqubbw\", \"Upvote\"],\n \"typescript.tsdk\": \"node_modules/typescript/lib\",\n \"css.lint.unknownAtRules\": \"ignore\",\n \"editor.defaultFormatter\": \"biomejs.biome\",\n \"editor.formatOnSave\": true,\n \"biome.enabled\": true,\n \"editor.codeActionsOnSave\": {\n \"source.organizeImports.biome\": \"explicit\",\n \"source.fixAll.biome\": \"explicit\"\n },\n \"[typescript]\": {\n \"editor.defaultFormatter\": \"biomejs.biome\"\n },\n \"[typescriptreact]\": {\n \"editor.defaultFormatter\": \"biomejs.biome\"\n },\n \"[javascript]\": {\n \"editor.defaultFormatter\": \"biomejs.biome\"\n },\n \"[javascriptreact]\": {\n \"editor.defaultFormatter\": \"biomejs.biome\"\n },\n \"[json]\": {\n \"editor.defaultFormatter\": \"biomejs.biome\"\n },\n \"[jsonc]\": {\n \"editor.defaultFormatter\": \"biomejs.biome\"\n }\n}\n" }, { "path": "CONTRIBUTING.md", "content": "# Contributing\n\n**IMPORTANT:** This project only accepts contributions based on [lucide icons](https://lucide.dev/). Pull requests containing custom icons or icons from other icon packs will be closed.\n\n**Animation Quality:** Pull requests with simple path length animations (`strokeDasharray`/`strokeDashoffset` \"drawing\" effect) will likely be rejected. This type of animation looks generic and doesn't add meaningful interaction. We're looking for creative, purposeful animations that enhance the icon's meaning.\n\nWe welcome contributions to our project! Please follow these steps to contribute:\n\n1. Fork the repository on GitHub.\n\n2. Clone your forked repository to your local machine:\n\n ```\n git clone https://github.com/pqoqubbw/icons.git\n ```\n\n3. Navigate to the project directory:\n\n ```\n cd icons\n ```\n\n4. Create a new branch for your feature or bug fix:\n\n ```\n git checkout -b your-branch-name\n ```\n\n5. Install the project dependencies:\n\n ```\n pnpm install\n ```\n\n6. **Create your animated icon:**\n\n a. Navigate to the `/icons/` directory and create a new file with the icon name in lowercase, using hyphens for spaces (following Lucide naming convention):\n\n ```\n /icons/[icon-name].tsx\n ```\n\n For example: `heart-icon.tsx`, `arrow-up.tsx`, `user-profile.tsx`\n\n b. Copy and paste the following template code into your new file:\n\n ```tsx\n 'use client';\n\n import { useAnimation } from 'motion/react';\n import type { HTMLAttributes } from 'react';\n import { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';\n import { cn } from '@/lib/utils';\n\n export interface [YourIconName]IconHandle {\n startAnimation: () => void;\n stopAnimation: () => void;\n }\n\n interface [YourIconName]IconProps extends HTMLAttributes {\n size?: number;\n }\n\n const [YourIconName]Icon = forwardRef<[YourIconName]IconHandle, [YourIconName]IconProps>(\n ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {\n const controls = useAnimation();\n const isControlledRef = useRef(false);\n\n useImperativeHandle(ref, () => {\n isControlledRef.current = true;\n return {\n startAnimation: () => controls.start('animate'),\n stopAnimation: () => controls.start('normal'),\n };\n });\n\n const handleMouseEnter = useCallback(\n (e: React.MouseEvent) => {\n if (!isControlledRef.current) {\n controls.start('animate');\n } else {\n onMouseEnter?.(e);\n }\n },\n [controls, onMouseEnter]\n );\n\n const handleMouseLeave = useCallback(\n (e: React.MouseEvent) => {\n if (!isControlledRef.current) {\n controls.start('normal');\n } else {\n onMouseLeave?.(e);\n }\n },\n [controls, onMouseLeave]\n );\n\n return (\n \n \n {/* your svg code here */}\n \n \n );\n }\n );\n\n [YourIconName]Icon.displayName = '[YourIconName]Icon';\n\n export { [YourIconName]Icon };\n ```\n\n c. Replace `[YourIconName]` with your icon name in **PascalCase** (e.g., `HeartIcon`, `ArrowUp`, `UserProfile`).\n\n d. Find your icon on [lucide.dev](https://lucide.dev/), copy the SVG path elements, and replace the `{/* your svg code here */}` comment with the actual SVG content.\n\n e. Add your animation logic using Framer Motion's `motion` components and the `controls` object to create engaging hover animations.\n\n7. **Add your icon to the icon list:**\n\n a. Open the `icons/index.tsx` file.\n\n b. Import your new icon component at the top of the file:\n\n ```tsx\n import { [YourIconName]Icon } from './[icon-name]';\n ```\n\n c. Add your icon to the `ICON_LIST` array at the very beginning (top) of the list in this format:\n\n ```tsx\n {\n name: '[icon-name]',\n icon: [YourIconName]Icon,\n keywords: ['keyword1', 'keyword2', 'keyword3'],\n },\n ```\n\n For example:\n\n ```tsx\n {\n name: 'smile-plus',\n icon: SmilePlusIcon,\n keywords: ['smile', 'plus', 'emotion', 'face'],\n },\n ```\n\n Note: Use the exact icon name, keywords, and other data from the [lucide.dev](https://lucide.dev/) website for your specific icon.\n\n8. **Update the registry (for new icons):**\n\n After creating a new icon, you need to update the registry so it can be used with the shadcn CLI:\n\n ```\n pnpm run gen-cli\n ```\n\n This command will automatically sync your new icon to the registry and build the necessary JSON files.\n\n9. Build the project to check for errors:\n\n```\npnpm build\n```\n\n10. Test the application to ensure your changes work as expected:\n\n ```\n pnpm lint\n ```\n\n11. Commit your changes:\n\n ```\n git commit -m \"Add [icon-name] animated icon\"\n ```\n\n12. Push your changes to your fork:\n\n ```\n git push origin your-branch-name\n ```\n\n13. Open a pull request on the original repository with a clear description of the icon you've added and the animation you've implemented.\n\nThank you for contributing to our project!\n" }, { "path": "LICENSE", "content": "MIT License\n\nCopyright (c) 2024-2026 pqoqubbw\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README.md", "content": "\n \"Vercel\n\n
\n\n## `lucide-animated` is beautifully crafted animated icons.\n![preview](./public/og.png)\n\n**Demo** → [lucide-animated](https://lucide-animated.com)\n\n**Sponsorship** → [lucide-animated/sponsorship](https://lucide-animated.com/sponsorship)\n\n#### Svelte icons: [movingicons.dev](https://www.movingicons.dev/) by [@jis3r](https://github.com/jis3r)\n#### Vue icons: [imfenghuang.github.io/icons](https://imfenghuang.github.io/icons/) by [@imfenghuang](https://github.com/imfenghuang)\n#### Angular icons: [ajitzero/animated-icons](https://github.com/ajitzero/animated-icons) by [@ajitzero](https://github.com/ajitzero)\n#### Flutter icons: [flutter_lucide_animated](https://pub.dev/packages/flutter_lucide_animated) by [@ravikovind](https://github.com/ravikovind)\n\n\n## Contributing\n\nWe welcome contributions to `lucide-animated`! Please read our [contributing guidelines](CONTRIBUTING.md) on how to submit improvements and new icons.\n\n## Terms of Use\n\nFeel free to use these components in personal and commercial projects. However, while the tutorials and demos are available for your use as-is, they cannot be redistributed or resold. Let’s keep things fair and respect each other’s work.\n\nIf you have any questions or just want to say hi, feel free to reach out to me on X 👉 [@pqoqubbw](https://x.com/pqoqubbw).\n\n## Notes\n\nThis project is a work in progress, and i'm continuously working to improve and expand this collection. I’d love to hear your feedback or see your contributions as the project evolves!\n" }, { "path": "actions/get-icon-content.ts", "content": "\"use server\";\n\nimport { promises as fs } from \"node:fs\";\nimport path from \"node:path\";\n\nconst ICONS_DIRECTORY = \"icons\";\n\nexport async function getIconContent(name: string): Promise {\n const iconsDir = path.join(process.cwd(), ICONS_DIRECTORY);\n const content = await fs.readFile(\n path.join(iconsDir, `${name}.tsx`),\n \"utf-8\"\n );\n return content;\n}\n" }, { "path": "actions/get-icons.ts", "content": "import { ICON_LIST } from \"@/icons\";\n\ntype Icon = {\n name: string;\n keywords: string[];\n};\n\nconst getIcons = (): Icon[] => {\n return ICON_LIST.map(({ name, keywords }) => ({\n name,\n keywords,\n }));\n};\n\nexport { getIcons };\nexport type { Icon };\n" }, { "path": "actions/open-in-v0.ts", "content": "\"use server\";\n\nimport { SITE } from \"@/constants\";\nimport { getIconForV0 } from \"@/helpers/get-icon-for-v0\";\n\nexport async function openInV0Action(name: string) {\n try {\n const template = await getIconForV0(name);\n\n if (!template) {\n throw new Error(`Icon ${name} not found.`);\n }\n\n const payload = {\n ...template,\n meta: {\n project: SITE.NAME,\n author: SITE.AUTHOR.NAME,\n url: SITE.URL,\n },\n source: {\n title: SITE.NAME,\n url: SITE.URL,\n file: `${name}.tsx`,\n },\n };\n\n const response = await fetch(\"https://v0.dev/chat/api/templates/open\", {\n method: \"POST\",\n body: JSON.stringify({\n version: 3,\n template: payload,\n }),\n headers: {\n \"x-v0-edit-secret\": process.env.V0_API_KEY ?? \"\",\n \"Content-Type\": \"application/json\",\n },\n });\n\n if (!response.ok) {\n if (response.status === 403) {\n throw new Error(\"Unauthorized\");\n }\n\n console.error(\n \"Eror fetching /api/templates/open:\",\n await response.text()\n );\n\n throw new Error(\"Something went wrong. Please try again later.\");\n }\n\n const result = await response.json();\n\n return {\n error: null,\n url: result.url,\n };\n } catch (error) {\n console.error(error);\n\n if (error instanceof Error) {\n return { error: error.message, url: null };\n }\n\n return { error: \"Something went wrong. Please try again later.\", url: \"\" };\n }\n}\n" }, { "path": "app/globals.css", "content": "@import \"tailwindcss\";\n@import \"tw-animate-css\";\n@plugin \"@toolwind/corner-shape\";\n\n@custom-variant dark (&:is(.dark *));\n\n@theme inline {\n --color-background: var(--background);\n --color-foreground: var(--foreground);\n --color-primary: var(--primary);\n --color-secondary: var(--secondary);\n\n --radius-lg: var(--radius);\n --radius-md: calc(var(--radius) - 2px);\n --radius-sm: calc(var(--radius) - 4px);\n}\n\n:root {\n --background: #f2f2f2;\n --foreground: #000;\n --primary: #ee4822;\n --secondary: #3f3f47;\n\n --radius: 0.4rem;\n}\n\n.dark {\n --background: #171717;\n --foreground: #fff;\n --secondary-bg: #262626;\n --secondary: #d4d4d4;\n}\n\n@layer base {\n * {\n scrollbar-width: thin;\n scrollbar-color: var(--color-neutral-700) transparent;\n }\n\n html {\n scroll-behavior: smooth;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n -webkit-tap-highlight-color: transparent;\n }\n\n html[data-base-ui-scroll-locked] {\n scroll-behavior: auto;\n }\n\n body {\n background-color: var(--background);\n color: var(--foreground);\n overscroll-behavior: none;\n }\n\n ::selection {\n background-color: var(--primary);\n color: white;\n }\n\n .root {\n isolation: isolate;\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n }\n\n ::-webkit-scrollbar {\n width: 2px;\n }\n\n ::-webkit-scrollbar-track {\n background: transparent;\n }\n\n ::-webkit-scrollbar-thumb {\n background: var(--color-neutral-700);\n border-radius: 6px;\n }\n\n kbd {\n @apply flex size-5 items-center justify-center rounded-[4px] select-none;\n @apply font-sans text-xs uppercase;\n @apply bg-neutral-200 text-neutral-500 dark:bg-neutral-800 dark:text-neutral-300;\n @apply cursor-pointer transition-transform duration-100 active:scale-95;\n }\n}\n" }, { "path": "app/icon.tsx", "content": "import { ImageResponse } from \"next/og\";\n\nexport const runtime = \"edge\";\n\nexport const size = {\n width: 31,\n height: 30,\n};\n\nexport const contentType = \"image/png\";\n\nexport default function Icon() {\n return new ImageResponse(\n \n \n \n \n \n \n ,\n {\n ...size,\n }\n );\n}\n" }, { "path": "app/icons/[slug]/icon-card.tsx", "content": "\"use client\";\n\nimport { useMemo, useRef } from \"react\";\nimport type { Icon } from \"@/actions/get-icons\";\n\nimport { Card, CardActions } from \"@/components/card\";\nimport { ICON_LIST } from \"@/icons\";\n\ntype Props = {\n icon: Icon;\n};\n\nconst IconCard = ({ icon }: Props) => {\n const animationRef = useRef<{\n startAnimation: () => void;\n stopAnimation: () => void;\n }>(null);\n\n const IconComponent = useMemo(() => {\n return ICON_LIST.find((item) => item.name === icon.name)?.icon;\n }, [icon.name]);\n\n if (!IconComponent) {\n return null;\n }\n\n return (\n animationRef.current?.startAnimation()}\n onMouseLeave={() => animationRef.current?.stopAnimation()}\n >\n svg]:size-12 [&>svg]:text-neutral-800 dark:[&>svg]:text-neutral-100\"\n ref={animationRef}\n />\n \n \n );\n};\n\nexport { IconCard };\n" }, { "path": "app/icons/[slug]/page.tsx", "content": "import { ArrowLeftIcon } from \"lucide-react\";\nimport type { Metadata } from \"next\";\nimport Link from \"next/link\";\nimport { notFound } from \"next/navigation\";\n\nimport { CliBlock } from \"@/components/cli-block\";\nimport { LINK, SITE } from \"@/constants\";\nimport { ICON_LIST } from \"@/icons\";\nimport { kebabToPascalCase } from \"@/lib/kebab-to-pascal\";\nimport { BreadcrumbJsonLd } from \"@/seo/json-ld\";\nimport { baseMetadata } from \"@/seo/metadata\";\nimport { IconCard } from \"./icon-card\";\nimport { SimilarIcons } from \"./similar-icons\";\n\ntype Props = {\n params: Promise<{ slug: string }>;\n};\n\nconst getIconBySlug = (slug: string) => {\n return ICON_LIST.find((icon) => icon.name === slug);\n};\n\nexport const generateStaticParams = () => {\n return ICON_LIST.map((icon) => ({\n slug: icon.name,\n }));\n};\n\nexport const generateMetadata = async ({\n params,\n}: Props): Promise => {\n const { slug } = await params;\n const icon = getIconBySlug(slug);\n\n if (!icon) {\n return {\n title: \"Icon Not Found\",\n };\n }\n\n const pascalName = kebabToPascalCase(slug);\n const [keyword] = pascalName.split(\"Icon\");\n\n const title = `${keyword} Icon - Animated React Icon`;\n const description = `Free animated ${icon.name} icon for React. Smooth Motion-powered animation, copy-paste ready. Keywords: ${icon.keywords.slice(0, 5).join(\", \")}.`;\n\n return {\n title,\n description,\n alternates: {\n canonical: `/icons/${slug}`,\n },\n openGraph: {\n ...baseMetadata.openGraph,\n title: `${pascalName} | ${SITE.NAME}`,\n description,\n url: `${SITE.URL}/icons/${slug}`,\n type: \"website\",\n },\n twitter: {\n ...baseMetadata.twitter,\n title: `${pascalName} | ${SITE.NAME}`,\n description,\n },\n keywords: [\n ...icon.keywords,\n \"animated icon\",\n \"react icon\",\n \"motion icon\",\n `${icon.name} animation`,\n `${icon.name} react`,\n ],\n };\n};\n\nconst IconJsonLd = ({ icon }: { icon: (typeof ICON_LIST)[number] }) => {\n const pascalName = kebabToPascalCase(icon.name);\n\n const jsonLd = {\n \"@context\": \"https://schema.org\",\n \"@type\": \"SoftwareSourceCode\",\n name: pascalName,\n description: `Animated ${icon.name} icon component for React`,\n codeRepository: LINK.GITHUB,\n programmingLanguage: [\"TypeScript\", \"React\"],\n license: LINK.LICENSE,\n isPartOf: {\n \"@type\": \"SoftwareSourceCode\",\n name: SITE.NAME,\n url: SITE.URL,\n },\n keywords: icon.keywords.join(\", \"),\n };\n\n return (\n \n );\n};\n\nconst IconPage = async ({ params }: Props) => {\n const { slug } = await params;\n const icon = getIconBySlug(slug);\n\n if (!icon) {\n notFound();\n }\n\n const pascalName = kebabToPascalCase(slug);\n\n return (\n <>\n \n \n\n
\n \n \n Back to all icons\n \n\n
\n \n\n
\n

\n {pascalName}\n

\n

\n Animated {icon.name.replace(/-/g, \" \")} icon for React\n

\n
\n
\n\n \n\n
\n

Keywords

\n
\n {icon.keywords.map((keyword, index) => (\n \n {keyword}\n \n ))}\n
\n
\n\n \n
\n \n );\n};\n\nexport default IconPage;\n" }, { "path": "app/icons/[slug]/similar-icons.tsx", "content": "\"use client\";\n\nimport Link from \"next/link\";\nimport { useMemo, useRef } from \"react\";\nimport type { Icon } from \"@/actions/get-icons\";\n\nimport { Card, CardTitle } from \"@/components/card\";\nimport { ICON_LIST } from \"@/icons\";\n\ntype Props = {\n currentIcon: Icon;\n};\n\nconst ICON_MAP = new Map(ICON_LIST.map((item) => [item.name, item.icon]));\n\nconst SimilarIconItem = ({\n icon,\n Icon,\n}: {\n icon: Icon;\n Icon: React.ElementType | undefined;\n}) => {\n const animationRef = useRef<{\n startAnimation: () => void;\n stopAnimation: () => void;\n }>(null);\n\n if (!Icon) {\n return null;\n }\n\n return (\n \n animationRef.current?.startAnimation()}\n onMouseLeave={() => animationRef.current?.stopAnimation()}\n >\n svg]:size-10 [&>svg]:text-neutral-800 dark:[&>svg]:text-neutral-100\"\n ref={animationRef}\n />\n {icon.name}\n \n \n );\n};\n\nconst SimilarIcons = ({ currentIcon }: Props) => {\n const similarIcons = useMemo(() => {\n const currentKeywords = new Set(currentIcon.keywords);\n\n const scored = ICON_LIST.filter((icon) => icon.name !== currentIcon.name)\n .map((icon) => {\n const sharedKeywords = icon.keywords.filter((kw) =>\n currentKeywords.has(kw)\n ).length;\n return { icon, score: sharedKeywords };\n })\n .filter((item) => item.score > 0)\n .sort((a, b) => b.score - a.score)\n .slice(0, 6);\n\n return scored.map((item) => item.icon);\n }, [currentIcon]);\n\n if (similarIcons.length === 0) {\n return null;\n }\n\n return (\n
\n

Similar Icons

\n
\n {similarIcons.map((icon) => (\n \n ))}\n
\n
\n );\n};\n\nexport { SimilarIcons };\n" }, { "path": "app/layout.tsx", "content": "import type { Viewport } from \"next\";\nimport localFont from \"next/font/local\";\n\nimport \"./globals.css\";\nimport { CircleXIcon, TriangleAlertIcon } from \"lucide-react\";\nimport { Geist, Geist_Mono } from \"next/font/google\";\nimport { NuqsAdapter } from \"nuqs/adapters/next/app\";\nimport { Toaster } from \"sonner\";\n\nimport { Analytics } from \"@/components/analytics\";\nimport { Footer } from \"@/components/footer\";\nimport { Header } from \"@/components/header\";\nimport { PackageNameProvider } from \"@/providers/package-name\";\nimport { ThemeProvider } from \"@/providers/theme\";\nimport { JsonLdScripts } from \"@/seo/json-ld\";\nimport { baseMetadata } from \"@/seo/metadata\";\n\nconst andaleMonoLocal = localFont({\n src: \"../fonts/ANDALEMO.woff\",\n variable: \"--font-mono\",\n display: \"swap\",\n});\n\nconst gtCinetypeLocal = localFont({\n src: \"../fonts/GT-Cinetype-Regular.woff\",\n variable: \"--font-sans\",\n display: \"swap\",\n weight: \"400\",\n});\n\nconst geistMono = Geist_Mono({\n subsets: [\"latin\"],\n variable: \"--font-mono\",\n display: \"swap\",\n});\n\nconst geist = Geist({\n subsets: [\"latin\"],\n variable: \"--font-sans\",\n display: \"swap\",\n});\n\nconst useProductionFonts =\n process.env.NODE_ENV === \"production\" ||\n process.env.USE_PRODUCTION_FONTS === \"true\";\n\nconst andaleMono = useProductionFonts ? andaleMonoLocal : geistMono;\nconst gtCinetype = useProductionFonts ? gtCinetypeLocal : geist;\n\nexport const metadata = baseMetadata;\n\nexport const viewport: Viewport = {\n width: \"device-width\",\n initialScale: 1,\n userScalable: false,\n maximumScale: 1,\n minimumScale: 1,\n};\n\nexport default function RootLayout({\n children,\n}: Readonly<{\n children: React.ReactNode;\n}>) {\n return (\n \n \n \n \n \n
\n \n \n
\n
\n \n {children}\n \n ),\n warning: (\n \n ),\n }}\n position=\"top-center\"\n toastOptions={{\n classNames: {\n toast:\n \"!bg-white !px-4 !py-4 !flex-wrap dark:!bg-black !gap-0 !border-neutral-900/5 dark:!border-neutral-100/10 supports-[corner-shape:squircle]:!corner-squircle supports-[corner-shape:squircle]:!rounded-[30px] !rounded-[14px]\",\n title: \"font-sans text-black dark:!text-white\",\n icon: \"translate-y-[-9.5px]\",\n actionButton:\n \"!mt-2 w-full flex items-center justify-center !font-sans !bg-primary focus-visible:outline-primary cursor-pointer !h-8 !text-[14px] transition-colors duration-100 hover:!bg-[color-mix(in_oklab,var(--color-primary),black_10%)] focus-visible:outline-1 focus-visible:outline-offset-1 supports-[corner-shape:squircle]:!corner-squircle supports-[corner-shape:squircle]:!rounded-[30px] !rounded-[14px]\",\n description:\n \"font-sans text-secondary dark:!text-secondary\",\n },\n }}\n />\n \n
\n \n
\n \n \n
\n \n \n );\n}\n" }, { "path": "app/llms.txt/route.ts", "content": "import { getIcons } from \"@/actions/get-icons\";\nimport { LINK, SITE } from \"@/constants\";\n\nexport function GET() {\n const icons = getIcons();\n const iconNames = icons.map((icon) => icon.name).join(\", \");\n\n const content = `# ${SITE.NAME}\n\n> Beautifully crafted animated icons\n\n${SITE.NAME} is an open-source (MIT License) collection of smooth animated icons for React projects.\n\n## Overview\n\n- Website: ${SITE.URL}\n- GitHub: ${LINK.GITHUB}\n- Author: ${SITE.AUTHOR.TWITTER} (${LINK.TWITTER})\n\n## Tech Stack\n\n- React components with TypeScript\n- Animations powered by Motion (${LINK.MOTION})\n- Based on Lucide icons (${LINK.LUCIDE})\n\n## Installation\n\n\\`\\`\\`bash\nnpx shadcn@latest add \"${SITE.URL}/r/{icon-name}.json\"\n\\`\\`\\`\n\nReplace {icon-name} with the desired icon name (kebab-case).\n\n## Available Icons (${icons.length} total)\n\n${iconNames}\n\n## Usage\n\nEach icon is a React component that animates on hover. Example:\n\n\\`\\`\\`tsx\nimport { Activity } from '@/components/icons/activity';\n\nexport function MyComponent() {\n return ;\n}\n\\`\\`\\`\n\n## Ports\n\n- Svelte: https://www.movingicons.dev/ by @jis3r\n- Vue: https://imfenghuang.github.io/icons/ by @imfenghuang\n\n## License\n\nMIT License - free for personal and commercial use.\n\n## Contributing\n\nContributions welcome! See CONTRIBUTING.md for guidelines.\n`;\n\n return new Response(content, {\n headers: {\n \"Content-Type\": \"text/plain; charset=utf-8\",\n },\n });\n}\n" }, { "path": "app/page.tsx", "content": "import { getIcons } from \"@/actions/get-icons\";\nimport { CliBlock } from \"@/components/cli-block\";\nimport { CommentBlock } from \"@/components/comment\";\nimport { IconsList } from \"@/components/list\";\nimport { LINK } from \"@/constants\";\n\nconst Home = () => {\n const icons = getIcons();\n\n return (\n
\n

\n Beautifully crafted
\n animated icons*\n

\n

\n an open-source (\n \n MIT License\n \n ) collection of smooth animated icons for your projects. feel free to\n use them, share your feedback, and let's make this library awesome\n together\n

\n

\n Crafted with{\" \"}\n \n Motion\n {\" \"}\n &{\" \"}\n \n Lucide\n \n

\n icon.name.length <= 20)} />\n \n \n
\n );\n};\n\nexport default Home;\n" }, { "path": "app/robots.ts", "content": "import type { MetadataRoute } from \"next\";\n\nimport { SITE } from \"@/constants\";\n\nexport default function robots(): MetadataRoute.Robots {\n return {\n rules: {\n userAgent: \"*\",\n allow: \"/\",\n },\n sitemap: `${SITE.URL}/sitemap.xml`,\n };\n}\n" }, { "path": "app/sitemap.ts", "content": "import type { MetadataRoute } from \"next\";\n\nimport { SITE } from \"@/constants\";\nimport { ICON_LIST } from \"@/icons\";\n\n// biome-ignore lint/suspicious/useAwait: ignore\nexport default async function sitemap(): Promise {\n const iconPages: MetadataRoute.Sitemap = ICON_LIST.map((icon) => ({\n url: `${SITE.URL}/icons/${icon.name}`,\n lastModified: new Date(),\n changeFrequency: \"monthly\",\n priority: 0.7,\n }));\n\n return [\n {\n url: SITE.URL,\n lastModified: new Date(),\n changeFrequency: \"weekly\",\n priority: 1,\n },\n {\n url: `${SITE.URL}/sponsorship`,\n lastModified: new Date(),\n changeFrequency: \"monthly\",\n priority: 0.5,\n },\n ...iconPages,\n ];\n}\n" }, { "path": "app/sponsorship/page.tsx", "content": "import { AmountSelector } from \"@/components/sponsorship/amount-selector\";\nimport { createMetadata } from \"@/seo/metadata\";\n\nexport const metadata = createMetadata({\n title: \"Sponsor lucide-animated\",\n description:\n \"Support the development of lucide-animated - free open-source animated React icons library. Your sponsorship helps maintain and grow this MIT licensed project.\",\n canonical: \"/sponsorship\",\n ogTitle: \"Sponsor lucide-animated | Support Open Source\",\n});\n\nconst SUPPORT_LIST = [\n {\n price: 5,\n link: \"https://www.creem.io/payment/prod_1G8q9yoWDEMUuMaYXjdMnk\",\n },\n {\n price: 10,\n link: \"https://www.creem.io/payment/prod_2fx79crTzRv8c6DCBiYSt4\",\n },\n {\n price: 25,\n link: \"https://www.creem.io/payment/prod_5GxIWzOFwl7JvFxtWV1x1O\",\n },\n {\n price: 50,\n link: \"https://www.creem.io/payment/prod_4wOq9XhPSA4jIt1EBdVEcR\",\n },\n {\n price: 100,\n link: \"https://www.creem.io/payment/prod_2BWHaJvZZUTYQONb5xpQIR\",\n },\n {\n price: 200,\n link: \"https://www.creem.io/payment/prod_49xErbm5DmJJZDBW7lA2lO\",\n },\n {\n price: 500,\n link: \"https://www.creem.io/payment/prod_2HSF38lRw7yMNy8Lb9f3p1\",\n },\n];\n\nconst Sponsorship = () => {\n return (\n
\n

\n Support the project\n

\n

\n this is a place for those who want to go beyond a simple thank you.\n I'm grateful for any kind of support, whether it's just a DM\n with kind words or something more. your donation is by no means required\n - this page is made just for those who asked for it. I am incredibly\n grateful for any support you choose to provide\n
\n
\n Choose amount you want to support the project with:\n

\n\n \n
\n );\n};\n\nexport { SUPPORT_LIST };\nexport default Sponsorship;\n" }, { "path": "biome.jsonc", "content": "{\n \"$schema\": \"./node_modules/@biomejs/biome/configuration_schema.json\",\n \"extends\": [\n \"ultracite/biome/core\",\n \"ultracite/biome/react\",\n \"ultracite/biome/next\"\n ],\n \"linter\": {\n \"rules\": {\n \"style\": {\n \"useBlockStatements\": \"off\",\n \"useConsistentTypeDefinitions\": \"off\",\n \"noNestedTernary\": \"off\"\n },\n \"complexity\": {\n \"noForEach\": \"off\"\n },\n \"a11y\": {\n \"noSvgWithoutTitle\": \"off\",\n \"noNoninteractiveElementInteractions\": \"off\",\n \"noStaticElementInteractions\": \"off\"\n },\n \"suspicious\": {\n \"noArrayIndexKey\": \"off\",\n \"noSparseArray\": \"off\"\n },\n \"performance\": {\n \"noNamespaceImport\": \"off\"\n }\n }\n }\n}\n" }, { "path": "components/analytics.tsx", "content": "import { OpenPanelComponent } from \"@openpanel/nextjs\";\n\nconst ANALYTIC_EVENT = {\n HEADER_GITHUB: \"header-github\",\n ICON_COPY: \"icon-copy\",\n ICON_COPY_TERMINAL: \"icon-copy-terminal\",\n ICON_OPEN_IN_V0: \"icon-open-in-v0\",\n COMMENT_ANIMATION_DEV_LINK: \"comment-link-click\",\n COMMENT_BUTTON_CLICK: \"comment-button-click\",\n} as const;\n\nconst Analytics = () => {\n if (process.env.NODE_ENV !== \"production\") return null;\n\n return (\n \n );\n};\n\nexport { Analytics, ANALYTIC_EVENT };\n" }, { "path": "components/card.tsx", "content": "\"use client\";\n\nimport { useOpenPanel } from \"@openpanel/nextjs\";\nimport { Copy, PauseIcon, PlayIcon, Terminal } from \"lucide-react\";\nimport type { RefObject } from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { toast } from \"sonner\";\nimport { getIconContent } from \"@/actions/get-icon-content\";\nimport type { Icon } from \"@/actions/get-icons\";\nimport { openInV0Action } from \"@/actions/open-in-v0\";\nimport { ANALYTIC_EVENT } from \"@/components/analytics\";\nimport type { IconStatus } from \"@/components/ui/icon-state\";\nimport { IconState } from \"@/components/ui/icon-state\";\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport { SITE } from \"@/constants\";\nimport { useTouchDevice } from \"@/hooks/use-touch-device\";\nimport { getPackageManagerPrefix } from \"@/lib/get-package-manager-prefix\";\nimport { cn } from \"@/lib/utils\";\nimport { usePackageNameContext } from \"@/providers/package-name\";\n\nconst V0Icon = ({ className }: { className?: string }) => {\n return (\n \n \n \n \n );\n};\n\ninterface CardProps extends React.ComponentPropsWithoutRef<\"div\"> {\n children: React.ReactNode;\n animationRef?: RefObject<{\n startAnimation: () => void;\n stopAnimation: () => void;\n } | null>;\n}\n\nconst Card = ({ children, animationRef, className, ...props }: CardProps) => {\n const isTouchDevice = useTouchDevice();\n const [isAnimating, setIsAnimating] = useState(false);\n const timeoutRef = useRef(null);\n\n useEffect(() => {\n return () => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n };\n }, []);\n\n const handlePlayClick = (e: React.MouseEvent) => {\n e.stopPropagation();\n\n if (isAnimating) {\n animationRef?.current?.stopAnimation();\n setIsAnimating(false);\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n timeoutRef.current = null;\n }\n } else {\n animationRef?.current?.startAnimation();\n setIsAnimating(true);\n\n timeoutRef.current = setTimeout(() => {\n setIsAnimating(false);\n animationRef?.current?.stopAnimation();\n }, 1500);\n }\n };\n\n return (\n \n {isTouchDevice && (\n \n {isAnimating ? (\n \n ) : (\n \n )}\n \n )}\n {children}\n \n );\n};\n\nconst Title = ({ children }: { children: React.ReactNode }) => {\n return (\n

\n {children}\n

\n );\n};\n\nconst CopyCLIAction = ({ name }: Pick) => {\n const op = useOpenPanel();\n const { packageName } = usePackageNameContext();\n\n const [state, setState] = useState(\"idle\");\n\n const handleCopy = async () => {\n if (state !== \"idle\") return;\n\n try {\n op.track(ANALYTIC_EVENT.ICON_COPY_TERMINAL, { icon: `${name}.tsx` });\n await navigator.clipboard.writeText(\n `${getPackageManagerPrefix(packageName)} shadcn@latest add \"${SITE.URL}/r/${name}.json\"`\n );\n setState(\"done\");\n setTimeout(() => setState(\"idle\"), 2000);\n } catch {\n toast.error(\"Failed to copy to clipboard\", {\n description: \"Please check your browser permissions.\",\n });\n setState(\"error\");\n setTimeout(() => setState(\"idle\"), 2000);\n }\n };\n\n return (\n \n \n \n \n \n \n \n Copy{\" \"}\n \n shadcn/cli\n {\" \"}\n command\n \n \n );\n};\n\nconst CopyCodeAction = ({ name }: Pick) => {\n const op = useOpenPanel();\n\n const [state, setState] = useState(\"idle\");\n\n const handleCopy = async () => {\n if (state !== \"idle\") return;\n\n try {\n setState(\"loading\");\n op.track(ANALYTIC_EVENT.ICON_COPY, { icon: `${name}.tsx` });\n\n const content = await getIconContent(name);\n\n await navigator.clipboard.writeText(content);\n setState(\"done\");\n setTimeout(() => setState(\"idle\"), 2000);\n } catch {\n toast.error(\"Failed to copy to clipboard\", {\n description: \"Please check your browser permissions.\",\n });\n setState(\"error\");\n setTimeout(() => setState(\"idle\"), 2000);\n }\n };\n\n return (\n \n \n \n \n \n \n \n Copy{\" \"}\n \n .tsx\n {\" \"}\n code\n \n \n );\n};\n\nconst OpenInV0Action = ({ name }: Pick) => {\n const op = useOpenPanel();\n\n const [state, setState] = useState(\"idle\");\n\n const handleOpenInV0 = async () => {\n if (state !== \"idle\") return;\n try {\n setState(\"loading\");\n op.track(ANALYTIC_EVENT.ICON_OPEN_IN_V0, { icon: `${name}.tsx` });\n const data = await openInV0Action(name);\n\n if (data.url) {\n const popupOpened = window.open(data.url, \"_blank\");\n if (popupOpened === null) {\n toast.warning(\"Pop-up window blocked.\", {\n description: \"Click below to continue in new tab.\",\n duration: 5000,\n action: {\n label: \"Open in new tab\",\n onClick: () => window.open(data.url, \"_blank\"),\n },\n });\n\n setState(\"error\");\n }\n } else {\n setState(\"done\");\n }\n\n setTimeout(() => setState(\"idle\"), 2000);\n } catch (_error) {\n toast.error(\"Failed to open in v0\", {\n description: \"Please try again later.\",\n });\n setState(\"error\");\n setTimeout(() => setState(\"idle\"), 2000);\n }\n };\n\n return (\n \n \n \n \n \n \n \n Open in{\" \"}\n \n v0\n \n \n \n );\n};\n\ntype ActionsProps = Pick & {\n alwaysVisible?: boolean;\n};\n\nconst Actions = ({ name, alwaysVisible = false }: ActionsProps) => {\n return (\n \n \n \n \n \n \n \n );\n};\n\nconst CardTitle = Title;\nconst CardActions = Actions;\n\nexport { Card, CardTitle, CardActions };\n" }, { "path": "components/cli-block.tsx", "content": "\"use client\";\n\nimport { ScrollArea as BaseScrollArea } from \"@base-ui/react/scroll-area\";\nimport { CopyIcon } from \"lucide-react\";\nimport { useRef, useState, useTransition } from \"react\";\nimport { toast } from \"sonner\";\nimport type { Icon } from \"@/actions/get-icons\";\nimport type { IconStatus } from \"@/components/ui/icon-state\";\n\nimport { IconState } from \"@/components/ui/icon-state\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\nimport { TextLoop } from \"@/components/ui/text-loop\";\nimport { PACKAGE_MANAGER } from \"@/constants\";\nimport { getPackageManagerPrefix } from \"@/lib/get-package-manager-prefix\";\nimport { cn } from \"@/lib/utils\";\nimport { usePackageNameContext } from \"@/providers/package-name\";\n\ntype CliBlockProps = {\n icons?: Icon[];\n staticIconName?: string;\n className?: string;\n};\n\nconst CliBlock = ({ icons, staticIconName, className }: CliBlockProps) => {\n const [state, setState] = useState(\"idle\");\n const [_, startTransition] = useTransition();\n const currentIconName = useRef(staticIconName || \"\");\n\n const { packageName, setPackageName } = usePackageNameContext();\n\n const isStatic = !!staticIconName;\n\n const handleCopyToClipboard = () => {\n startTransition(async () => {\n const iconName =\n staticIconName || currentIconName.current || icons?.[0]?.name || \"\";\n\n try {\n await navigator.clipboard.writeText(\n `${getPackageManagerPrefix(packageName)} shadcn add @lucide-animated/${iconName}`\n );\n\n setState(\"done\");\n await new Promise((resolve) => setTimeout(resolve, 2000));\n setState(\"idle\");\n } catch {\n toast.error(\"Failed to copy to clipboard\", {\n description: \"Please check your browser permissions.\",\n });\n setState(\"error\");\n await new Promise((resolve) => setTimeout(resolve, 2000));\n setState(\"idle\");\n }\n });\n };\n\n return (\n \n \n e.stopPropagation()}>\n {Object.values(PACKAGE_MANAGER).map((pm) => (\n \n {pm}\n \n ))}\n \n {Object.values(PACKAGE_MANAGER).map((pm) => (\n \n \n \n \n {getPackageManagerPrefix(pm)} shadcn add @lucide-animated/\n {staticIconName || currentIconName.current}\n \n \n {getPackageManagerPrefix(pm)}\n {\" \"}\n \n shadcn add @lucide-animated/\n \n {isStatic ? (\n \n {staticIconName}\n \n ) : (\n {\n currentIconName.current = icons?.[index]?.name || \"\";\n }}\n transition={{\n duration: 0.25,\n }}\n variants={{\n initial: {\n y: -12,\n rotateX: -90,\n opacity: 0,\n filter: \"blur(2px)\",\n },\n animate: {\n y: 0,\n rotateX: 0,\n opacity: 1,\n filter: \"blur(0px)\",\n },\n exit: {\n y: 12,\n rotateX: 90,\n opacity: 0,\n filter: \"blur(2px)\",\n },\n }}\n >\n {(icons || [])\n .filter((icon) => icon.name.length <= 20)\n .map((icon) => (\n \n {icon.name}\n \n ))}\n \n )}\n \n \n \n \n \n \n \n \n \n \n \n ))}\n \n \n );\n};\n\nexport { CliBlock };\n" }, { "path": "components/comment.client.tsx", "content": "\"use client\";\n\nimport { useOpenPanel } from \"@openpanel/nextjs\";\nimport { ExternalLinkIcon } from \"lucide-react\";\n\nimport { ANALYTIC_EVENT } from \"./analytics\";\n\nconst CommentAnimationsDevLinkClient = () => {\n const op = useOpenPanel();\n\n return (\n op.track(ANALYTIC_EVENT.COMMENT_ANIMATION_DEV_LINK)}\n rel=\"noopener external\"\n tabIndex={0}\n target=\"_blank\"\n >\n animations.dev\n \n );\n};\n\nconst CommentButtonClient = () => {\n const op = useOpenPanel();\n\n return (\n op.track(ANALYTIC_EVENT.COMMENT_BUTTON_CLICK)}\n rel=\"noopener external\"\n tabIndex={0}\n target=\"_blank\"\n >\n Take the course\n \n \n );\n};\n\nexport { CommentAnimationsDevLinkClient, CommentButtonClient };\n" }, { "path": "components/comment.tsx", "content": "import {\n CommentAnimationsDevLinkClient,\n CommentButtonClient,\n} from \"./comment.client\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"./ui/avatar\";\n\nconst CommentBlock = () => {\n return (\n
\n
\n these icons were a way to practice what i learned from the{\" \"}\n course.\n
\n it really helped me understand how to turn simple transitions into the\n polished motion you see here\n
\n
\n
\n \n \n \n DT\n \n \n

\n dmytro, creator of lucide-animated\n

\n
\n \n
\n
\n );\n};\n\nexport { CommentBlock };\n" }, { "path": "components/footer.tsx", "content": "const Footer = () => {\n return (\n
\n analytics by\n \n OpenPanel\n \n
\n );\n};\n\nexport { Footer };\n" }, { "path": "components/github-button.tsx", "content": "import { unstable_cache } from \"next/cache\";\nimport { LINK } from \"@/constants\";\n\nconst DEFAULT_STARS = 6077;\nconst CACHE_TIME = 86_400; // 1 day\n\nconst fetchGithubStars = async (): Promise => {\n try {\n const res = await fetch(\"https://api.github.com/repos/pqoqubbw/icons\", {\n headers: {\n Authorization: `Bearer ${process.env.GITHUB_TOKEN}`,\n },\n });\n\n if (!res.ok) {\n return DEFAULT_STARS;\n }\n\n const data = await res.json();\n\n return data.stargazers_count < DEFAULT_STARS\n ? DEFAULT_STARS\n : data.stargazers_count;\n } catch (error) {\n console.error(\"Failed to fetch GitHub stars:\", error);\n return DEFAULT_STARS;\n }\n};\n\nconst getGithubStars = unstable_cache(fetchGithubStars, [\"github-stars\"], {\n revalidate: CACHE_TIME,\n});\n\nconst GithubStartsButton = async () => {\n const stars =\n process.env.NODE_ENV === \"production\"\n ? await getGithubStars()\n : DEFAULT_STARS;\n\n return (\n \n \n Star on GitHub ({stars.toLocaleString()} stars)\n \n \n \n \n \n \n \n \n \n \n \n \n {stars.toLocaleString()}\n \n \n \n \n \n );\n};\n\nexport { GithubStartsButton };\n" }, { "path": "components/header.tsx", "content": "import Link from \"next/link\";\n\nimport { GithubStartsButton } from \"@/components/github-button\";\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\";\nimport { cn } from \"@/lib/utils\";\n\ntype LogoProps = {\n className?: string;\n type?: \"christmas\" | \"default\";\n};\n\nconst Logo = ({ className, type = \"default\" }: LogoProps) => {\n if (type === \"christmas\") {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n }\n\n if (type === \"default\") {\n return (\n \n \n \n \n \n \n \n );\n }\n\n return null;\n};\n\nconst Header = () => {\n return (\n
\n
\n \n \n lucide-animated\n \n
\n \n \n \n \n Sponsor Project\n \n
\n \n \n
\n
\n
\n
\n );\n};\n\nexport { Header };\n" }, { "path": "components/list.tsx", "content": "\"use client\";\n\nimport Fuse from \"fuse.js\";\nimport { useDeferredValue, useMemo, useRef, useState } from \"react\";\nimport type { Icon } from \"@/actions/get-icons\";\n\nimport { Card, CardActions, CardTitle } from \"@/components/card\";\nimport { ICON_LIST } from \"@/icons\";\nimport { SearchInput } from \"./search-input\";\n\ntype Props = {\n icons: Icon[];\n};\n\nconst ICON_MAP = new Map(ICON_LIST.map((item) => [item.name, item.icon]));\n\nconst IconItem = ({\n icon,\n Icon,\n}: {\n icon: Icon;\n Icon: React.ElementType | undefined;\n}) => {\n const animationRef = useRef<{\n startAnimation: () => void;\n stopAnimation: () => void;\n }>(null);\n\n if (!Icon) {\n return null;\n }\n\n return (\n animationRef.current?.startAnimation()}\n onMouseLeave={() => animationRef.current?.stopAnimation()}\n >\n svg]:size-10 [&>svg]:text-neutral-800 dark:[&>svg]:text-neutral-100\"\n ref={animationRef}\n />\n {icon.name}\n \n \n );\n};\n\nconst IconsList = ({ icons }: Props) => {\n const [searchValue, setSearchValue] = useState(\"\");\n const [searchOpen, setSearchOpen] = useState(false);\n const deferredSearchValue = useDeferredValue(searchValue);\n\n const fuse = useMemo(\n () =>\n new Fuse(icons, {\n keys: [\n { name: \"name\", weight: 3 },\n { name: \"keywords\", weight: 2 },\n ],\n threshold: 0.3,\n ignoreLocation: true,\n findAllMatches: true,\n isCaseSensitive: false,\n minMatchCharLength: 2,\n }),\n [icons]\n );\n\n const filteredIcons = useMemo(() => {\n if (!deferredSearchValue.trim()) return icons;\n return fuse.search(deferredSearchValue).map((result) => result.item);\n }, [fuse, icons, deferredSearchValue]);\n\n return (\n
\n \n
\n {filteredIcons.length === 0 && (\n
\n No icons found\n
\n )}\n {filteredIcons.map((icon) => (\n \n ))}\n
\n
\n );\n};\n\nexport { IconsList };\n" }, { "path": "components/search-input.tsx", "content": "import { useHotkey } from \"@tanstack/react-hotkeys\";\nimport { SearchIcon } from \"lucide-react\";\n\nimport { Portal } from \"@/components/ui/portal\";\nimport { cn } from \"@/lib/utils\";\nimport { Input } from \"./ui/input\";\n\ntype SearchInputProps = {\n searchValue: string;\n setSearchValue: (value: string) => void;\n searchOpen: boolean;\n setSearchOpen: (value: boolean) => void;\n};\n\nconst SearchInput = ({\n searchValue,\n setSearchValue,\n searchOpen,\n setSearchOpen,\n}: SearchInputProps) => {\n useHotkey(\n \"Mod+F\",\n () => {\n setSearchOpen(!searchOpen);\n setSearchValue(\"\");\n },\n {\n ignoreInputs: false,\n }\n );\n\n useHotkey(\n \"Escape\",\n () => {\n setSearchOpen(false);\n setSearchValue(\"\");\n },\n {\n ignoreInputs: false,\n }\n );\n\n return (\n <>\n \n
\n ⌘\n F\n
\n \n for the search\n \n \n {searchOpen && (\n \n
\n \n }\n onChange={(e) => setSearchValue(e.target.value)}\n placeholder=\"Search icons...\"\n role=\"search\"\n spellCheck=\"false\"\n trailingIcon={esc}\n value={searchValue}\n />\n
\n \n )}\n \n );\n};\n\nexport { SearchInput };\n" }, { "path": "components/sponsorship/amount-selector.tsx", "content": "\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport type { SUPPORT_LIST } from \"@/app/sponsorship/page\";\n\nimport { Radio, RadioGroup } from \"@/components/ui/radio\";\nimport { cn } from \"@/lib/utils\";\nimport { Stamp } from \"./stamp\";\n\nconst DESIGN_WIDTH = 1040;\nconst DESIGN_HEIGHT = 460;\n\ntype AmountSelectorProps = {\n amounts: typeof SUPPORT_LIST;\n};\n\nconst AmountSelector = ({ amounts }: AmountSelectorProps) => {\n const [selectedAmount, setSelectedAmount] = useState(\n amounts[0].price.toString()\n );\n const containerRef = useRef(null);\n const [scale, setScale] = useState(0);\n\n useEffect(() => {\n const container = containerRef.current;\n if (!container) return;\n\n const updateScale = () => {\n const width = container.offsetWidth;\n setScale(width / DESIGN_WIDTH);\n };\n\n updateScale();\n\n const resizeObserver = new ResizeObserver(updateScale);\n resizeObserver.observe(container);\n\n return () => resizeObserver.disconnect();\n }, []);\n\n const formatCurrency = (amount: number) => {\n return new Intl.NumberFormat(\"en-US\", {\n style: \"currency\",\n currency: \"USD\",\n minimumFractionDigits: 0,\n maximumFractionDigits: 0,\n }).format(amount);\n };\n\n const isLastItemOdd = amounts.length % 2 !== 0;\n const buyLink = amounts.find(\n (amount) => amount.price.toString() === selectedAmount\n )?.link;\n\n return (\n
\n setSelectedAmount(value as string)}\n value={selectedAmount}\n >\n {amounts.map((amount, index) => {\n const isLastItem = index === amounts.length - 1;\n const shouldSpanFull = isLastItem && isLastItemOdd;\n\n return (\n \n \n \n \n \n {formatCurrency(amount.price)}\n \n \n );\n })}\n \n\n \n \n
\n

\n Chill Guy Certificate\n

\n

\n Supporter\n

\n
\n \n \n \n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n

\n \n {formatCurrency(Number(selectedAmount))}\n {\" \"}\n Donation\n

\n

\n The icons will always be free and open-source, regardless of\n donations\n

\n \n Sponsor\n \n
\n \n
\n
\n
\n\n