mirror of
https://github.com/walkxcode/dashboard-icons.git
synced 2025-10-31 08:47:57 +01:00
1d44dcd6fe
* feat(web): add og image for /icons page * refactor(web): change description to fit project Signed-off-by: Bjorn Lammers <bjorn@lammers.media> * feat: Add daily release workflow for CF * refactor(web): Update descriptions and consistency (#1264) * refactor(web): Update descriptions and consistency * revert: Issue templates * refactor(web): More extensive search placeholder --------- Signed-off-by: Bjorn Lammers <bjorn@lammers.media> Co-authored-by: Thomas Camlong <thomas@ajnart.fr> * feat(icons): add greenlight (#1275) Co-authored-by: Dashboard Icons Manager <193821040+dashboard-icons-manager[bot]@users.noreply.github.com> * chore: Move SEO audit to /web Signed-off-by: Bjorn Lammers <bjorn@lammers.media> * feat(web/icons): implement fixed representative icons for OpenGraph image - Added a predefined list of representative icons to be used in the OpenGraph image. - Updated the logic to display the number of icons based on the rounded total instead of a fixed selection. --------- Signed-off-by: Bjorn Lammers <bjorn@lammers.media> Co-authored-by: Bjorn Lammers <bjorn@lammers.media> Co-authored-by: dashboard-icons-manager[bot] <193821040+dashboard-icons-manager[bot]@users.noreply.github.com>
Dashboard Icons Web App
A web application to browse, search, and download icons from the Dashboard Icons collection.
Features
- Browse through a curated collection of beautiful dashboard icons
- Search icons by name, aliases, or categories
- View icon details including author, formats, and variants
- Download icons in different formats (SVG, PNG, WebP)
- Copy icon URLs directly to your clipboard
- Responsive design that works on mobile, tablet, and desktop
- Dark mode support
Tech Stack
- Next.js 15 - React framework with App Router
- TypeScript v5 - Type-safe JavaScript
- Tailwind CSS - Utility-first CSS framework
- Shadcn UI - Reusable components built with Radix UI and Tailwind
Project Structure
src/
├── app/ # Next.js App Router
│ ├── api/ # API routes
│ │ └── icons/ # Icons browsing and detail pages
│ │ ├── [icon]/ # Dynamic icon detail page
│ │ │ ├── components/ # Icon-specific components
│ │ │ ├── error.tsx # Error handling
│ │ │ ├── loading.tsx # Loading state
│ │ │ └── page.tsx # Icon detail page
│ │ ├── components/ # Icons page components
│ │ ├── loading.tsx # Loading state
│ │ └── page.tsx # Icons browse page
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout
│ ├── page.tsx # Homepage
│ └── theme-provider.tsx # Theme provider component
├── components/ # Shared components
│ ├── ui/ # UI components (from shadcn/ui)
│ ├── header.tsx # App header
│ └── theme-switcher.tsx # Theme switcher
├── lib/ # Utility functions
│ ├── api.ts # API utilities
│ └── utils.ts # General utilities
└── types/ # TypeScript type definitions
├── icons.ts # Icon-related types
└── index.ts # Type exports
Development
Prerequisites
- Node.js 18+
- pnpm
Installation
- Clone the repository
- Install dependencies:
pnpm install - Create a
.envfile with the following variables:GITHUB_TOKEN=your_github_token - Start the development server:
pnpm dev
Build
pnpm build
Deployment
The application is optimized for deployment on Vercel.
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.