Merge pull request #15 from pphatdev/feat/icons

Contributing to Add or Update Icons

Author: pphatdev

CONTRIBUTING.md

@@ -42,6 +42,49 @@ To add a new theme:
 2. Test the theme with `?theme=yourtheme`
 3. Submit a PR with a screenshot
 
+### Adding or Updating Icons
+
+To add a new icon or update an existing one in `public/assets/icons/`:
+
+1. **Format Requirements**:
+   - SVG format only
+   - Width and height: `48x48`
+   - Use consistent margins via viewBox (typically 8-12px)
+   - Example: `viewBox="-10 -10 44 44"` for 10px margin
+
+2. **Animation**:
+   Add the popup animation style:
+   ```xml
+   <style>
+       @keyframes popup {
+           0% {
+               opacity: 0;
+               transform: scale(0);
+           }
+           100% {
+               opacity: 1;
+               transform: scale(1);
+           }
+       }
+       #iconname-logo {
+           animation: popup 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
+       }
+   </style>
+   ```
+
+3. **Structure**:
+   - Wrap paths in a `<g>` element with unique id: `<g id="iconname-logo">`
+   - Use `fill="currentColor"` for main paths to support theming
+   - Include optional `<title>` tag for accessibility
+
+4. **File Naming**:
+   - Use lowercase with hyphens: `icon-name.svg`
+   - Match the technology/framework name
+
+5. **Testing**:
+   - Verify the icon displays correctly in the icons gallery
+   - Test with different themes to ensure colors work properly
+
 ## Development Setup
 
 ```bash

docs/example/icons.md

@@ -1,24 +1,52 @@
 # GET /icons and /icons/:name
 
+List available SVG icons or fetch a single icon.
 
-![icon-react](https://stats.pphat.top/icons/react?color=%230088CC&glow=true&glowColor=%2300FF)
-![icon-python](https://stats.pphat.top/icons/python?color=%234584B6&glow=true&glowColor=%2300FF)
-![icon-typescript](https://stats.pphat.top/icons/typescript?color=%230088CC&glow=true&glowColor=%2300FF)
-![icon-javascript](https://stats.pphat.top/icons/javascript?color=%23FFDE57&glow=true&glowColor=%2300FF)
-![icon-html](https://stats.pphat.top/icons/html?color=%23E34F26&glow=true&glowColor=%2300FF)
-![icon-css](https://stats.pphat.top/icons/css?color=%231572B6&glow=true&glowColor=%2300FF)
-![icon-nodedotjs](https://stats.pphat.top/icons/nodedotjs?color=%23339933&glow=true&glowColor=%2300FF)
-![icon-nextjs](https://stats.pphat.top/icons/nextjs?color=white&glow=true&glowColor=%2300FF)
-![icon-nuxt](https://stats.pphat.top/icons/nuxt?color=%2300C58E&glow=true&glowColor=%2300FF)
-![icon-postgresql](https://stats.pphat.top/icons/postgresql?color=%230088CC&glow=true&glowColor=%2300FF)
-![icon-mysql](https://stats.pphat.top/icons/mysql?color=%230088CC&glow=true&glowColor=%2300FF)
-![icon-tailwindcss](https://stats.pphat.top/icons/tailwindcss?color=%2338B2AC&glow=true&glowColor=%2300FF)
-![icon-markdown](https://stats.pphat.top/icons/markdown?color=orange&glow=true&glowColor=%2300FF)
-![icon-laravel](https://stats.pphat.top/icons/laravel?color=%23FF2D20&glow=true&glowColor=%2300FF)
-![icon-php](https://stats.pphat.top/icons/php?color=%23777BB4&glow=true&glowColor=%2300FF)
-![icon-cplusplus](https://stats.pphat.top/icons/cplusplus?color=%2300AACC&glow=true&glowColor=%2300FF)
-![icon-fastapi](https://stats.pphat.top/icons/fastapi?color=white&glow=true&glowColor=%2300FF)
-![icon-hugo](https://stats.pphat.top/icons/hugo?color=white&glow=true&glowColor=%2300FF)
+## Sample Icons
+
+**Normal Icon**
+
+![icon-react](https://stats.pphat.top/icons/react?color=%230088CC)
+![icon-python](https://stats.pphat.top/icons/python?color=%234584B6)
+![icon-typescript](https://stats.pphat.top/icons/typescript?color=%230088CC)
+![icon-javascript](https://stats.pphat.top/icons/javascript?color=%23FFDE57)
+![icon-html](https://stats.pphat.top/icons/html?color=%23E34F26)
+![icon-css](https://stats.pphat.top/icons/css?color=%231572B6)
+![icon-nodedotjs](https://stats.pphat.top/icons/nodedotjs?color=%23339933)
+![icon-nextjs](https://stats.pphat.top/icons/nextjs?color=white)
+![icon-nuxt](https://stats.pphat.top/icons/nuxt?color=%2300C58E)
+![icon-postgresql](https://stats.pphat.top/icons/postgresql?color=%230088CC)
+![icon-mysql](https://stats.pphat.top/icons/mysql?color=%230088CC)
+![icon-tailwindcss](https://stats.pphat.top/icons/tailwindcss?color=%2338B2AC)
+![icon-markdown](https://stats.pphat.top/icons/markdown?color=orange)
+![icon-laravel](https://stats.pphat.top/icons/laravel?color=%23FF2D20)
+![icon-php](https://stats.pphat.top/icons/php?color=%23777BB4)
+![icon-cplusplus](https://stats.pphat.top/icons/cplusplus?color=%2300AACC)
+![icon-csharp](https://stats.pphat.top/icons/csharp?color=%2300AACC)
+![icon-fastapi](https://stats.pphat.top/icons/fastapi?color=white)
+![icon-hugo](https://stats.pphat.top/icons/hugo?color=white)
+
+**Glow Effect**
+
+![icon-react](https://stats.pphat.top/icons/react?color=%230088CC&glow=true&glowColor=%230088CC)
+![icon-python](https://stats.pphat.top/icons/python?color=%234584B6&glow=true&glowColor=%234584B6)
+![icon-typescript](https://stats.pphat.top/icons/typescript?color=%230088CC&glow=true&glowColor=%230088CC)
+![icon-javascript](https://stats.pphat.top/icons/javascript?color=%23FFDE57&glow=true&glowColor=%23FFDE57)
+![icon-html](https://stats.pphat.top/icons/html?color=%23E34F26&glow=true&glowColor=%23E34F26)
+![icon-css](https://stats.pphat.top/icons/css?color=%231572B6&glow=true&glowColor=%231572B6)
+![icon-nodedotjs](https://stats.pphat.top/icons/nodedotjs?color=%23339933&glow=true&glowColor=%23339933)
+![icon-nextjs](https://stats.pphat.top/icons/nextjs?color=white&glow=true&glowColor=white)
+![icon-nuxt](https://stats.pphat.top/icons/nuxt?color=%2300C58E&glow=true&glowColor=%2300C58E)
+![icon-postgresql](https://stats.pphat.top/icons/postgresql?color=%230088CC&glow=true&glowColor=%230088CC)
+![icon-mysql](https://stats.pphat.top/icons/mysql?color=%230088CC&glow=true&glowColor=%230088CC)
+![icon-tailwindcss](https://stats.pphat.top/icons/tailwindcss?color=%2338B2AC&glow=true&glowColor=%2338B2AC)
+![icon-markdown](https://stats.pphat.top/icons/markdown?color=orange&glow=true&glowColor=orange)
+![icon-laravel](https://stats.pphat.top/icons/laravel?color=%23FF2D20&glow=true&glowColor=%23FF2D20)
+![icon-php](https://stats.pphat.top/icons/php?color=%23777BB4&glow=true&glowColor=%23777BB4)
+![icon-cplusplus](https://stats.pphat.top/icons/cplusplus?color=%2300AACC&glow=true&glowColor=%2300AACC)
+![icon-csharp](https://stats.pphat.top/icons/csharp?color=%2300AACC&glow=true&glowColor=%2300AACC)
+![icon-fastapi](https://stats.pphat.top/icons/fastapi?color=white&glow=true&glowColor=white)
+![icon-hugo](https://stats.pphat.top/icons/hugo?color=white&glow=true&glowColor=white)
 
 List available SVG icons or fetch a single icon.
 
@@ -78,7 +106,7 @@ Demo page:
 
 ![combined-react](https://stats.pphat.top/icons/react?color=%230088CC&foreground=%23FF0000)
 ![combined-github](https://stats.pphat.top/icons/github?color=blue)
-![combined-glow](https://stats.pphat.top/icons/react?color=%230088CC&glow=true&glowColor=%2300FF00)
+![combined-glow](https://stats.pphat.top/icons/react?color=%230088CC00)
 ![combined-typescript](https://stats.pphat.top/icons/typescript?glow=true&glowColor=%23FF0000)
 
 ## Error Examples