diff --git a/app/docs/icons/available-icons.tsx b/app/docs/icons/available-icons.tsx
index ba6ed50..e37c243 100644
--- a/app/docs/icons/available-icons.tsx
+++ b/app/docs/icons/available-icons.tsx
@@ -14,6 +14,19 @@ import { CalendarIcon } from '@/components/core/calendar-icon';
import { MobileStoreIcon } from '@/components/core/mobile-store-icon';
import { BalanceIcon } from '@/components/core/balance-icon';
import { BuildingIcon } from '@/components/core/building-icon';
+import { GlobalIcon } from '@/components/core/global-icon';
+import { UserIcon } from '@/components/core/user-icon';
+import { GlobalSearchIcon } from '@/components/core/global-search-icon';
+import { ToolsIcon } from '@/components/core/tools-icon';
+import { TrophyIcon } from '@/components/core/trophy-icon';
+import { MicrophoneIcon } from '@/components/core/microphone-icon';
+import { LikeIcon } from '@/components/core/like-icon';
+import { BellIcon } from '@/components/core/bell-icon';
+import { HeartIcon } from '@/components/core/heart-icon';
+import { TrashIcon } from '@/components/core/trash-icon';
+import { ShareIcon } from '@/components/core/share-icon';
+import { PaperPlaneIcon } from '@/components/core/paper-plane-icon';
+import { MailStackIcon } from '@/components/core/mail-stack-icon';
import PhoneIconBasic from './phone-icon-basic';
import RocketIconBasic from './rocket-icon-basic';
@@ -30,6 +43,19 @@ import CalendarIconBasic from './calendar-icon-basic';
import MobileStoreIconBasic from './mobile-store-icon-basic';
import BalanceIconBasic from './balance-icon-basic';
import BuildingIconBasic from './building-icon-basic';
+import GlobalIconBasic from './global-icon-basic';
+import UserIconBasic from './user-icon-basic';
+import GlobalSearchIconBasic from './global-search-icon-basic';
+import ToolsIconBasic from './tools-icon-basic';
+import TrophyIconBasic from './trophy-icon-basic';
+import MicrophoneIconBasic from './microphone-icon-basic';
+import LikeIconBasic from './like-icon-basic';
+import BellIconBasic from './bell-icon-basic';
+import HeartIconBasic from './heart-icon-basic';
+import TrashIconBasic from './trash-icon-basic';
+import ShareIconBasic from './share-icon-basic';
+import PaperPlaneIconBasic from './paper-plane-icon-basic';
+import MailStackIconBasic from './mail-stack-icon-basic';
export type IconDefinition = {
name: string;
@@ -153,4 +179,107 @@ export const AVAILABLE_ICONS: IconDefinition[] = [
example: ,
filePath: 'app/docs/icons/building-icon-basic.tsx',
},
+ {
+ name: 'Global Icon',
+ installName: 'global-icon',
+ component: ,
+ example: ,
+ filePath: 'app/docs/icons/global-icon-basic.tsx',
+ },
+ {
+ name: 'User Icon',
+ installName: 'user-icon',
+ component: ,
+ example: ,
+ filePath: 'app/docs/icons/user-icon-basic.tsx',
+ },
+ {
+ name: 'Global Search Icon',
+ installName: 'global-search-icon',
+ component: (
+
+ ),
+ example: ,
+ filePath: 'app/docs/icons/global-search-icon-basic.tsx',
+ },
+ {
+ name: 'Tools Icon',
+ installName: 'tools-icon',
+ component: (
+
+ ),
+ example: ,
+ filePath: 'app/docs/icons/tools-icon-basic.tsx',
+ },
+ {
+ name: 'Trophy Icon',
+ installName: 'trophy-icon',
+ component: ,
+ example: ,
+ filePath: 'app/docs/icons/trophy-icon-basic.tsx',
+ },
+ {
+ name: 'Microphone Icon',
+ installName: 'microphone-icon',
+ component: (
+
+ ),
+ example: ,
+ filePath: 'app/docs/icons/microphone-icon-basic.tsx',
+ },
+ {
+ name: 'Like Icon',
+ installName: 'like-icon',
+ component: ,
+ example: ,
+ filePath: 'app/docs/icons/like-icon-basic.tsx',
+ },
+ {
+ name: 'Bell Icon',
+ installName: 'bell-icon',
+ component: (
+
+ ),
+ example: ,
+ filePath: 'app/docs/icons/bell-icon-basic.tsx',
+ },
+ {
+ name: 'Heart Icon',
+ installName: 'heart-icon',
+ component: ,
+ example: ,
+ filePath: 'app/docs/icons/heart-icon-basic.tsx',
+ },
+ {
+ name: 'Trash Icon',
+ installName: 'trash-icon',
+ component: ,
+ example: ,
+ filePath: 'app/docs/icons/trash-icon-basic.tsx',
+ },
+ {
+ name: 'Share Icon',
+ installName: 'share-icon',
+ component: ,
+ example: ,
+ filePath: 'app/docs/icons/share-icon-basic.tsx',
+ },
+ {
+ name: 'Paper Plane Icon',
+ installName: 'paper-plane-icon',
+ component: (
+
+ ),
+ example: ,
+ filePath: 'app/docs/icons/paper-plane-icon-basic.tsx',
+ },
+ {
+ name: 'Mail Stack Icon',
+ installName: 'mail-stack-icon',
+ component: (
+
+ ),
+ example: ,
+ filePath: 'app/docs/icons/mail-stack-icon-basic.tsx',
+ },
];
diff --git a/app/docs/icons/bell-icon-basic.tsx b/app/docs/icons/bell-icon-basic.tsx
new file mode 100644
index 0000000..69a0963
--- /dev/null
+++ b/app/docs/icons/bell-icon-basic.tsx
@@ -0,0 +1,25 @@
+'use client';
+
+import { BellIcon } from '@/components/core/bell-icon';
+
+export default function BellIconBasic() {
+ return (
+
+
+
+
+
+
+
+ Hover to see animations. Center shows ringing bell with custom colors.
+
+
+
+
+
+
+
+
+ Hover to see animations. Center shows bouncing pins with custom colors.
+
+
+
+
+
+
+
+
+ Hover to see animations. Center shows rotating globe with custom colors.
+
+
+
+
+
+
+
+
+ Hover to see animations. Center shows beating heart with custom colors.
+
+
+
+
+
+
+
+
+ Hover to see animations. Center shows "like" reaction with
+ custom colors.
+
+
+
+
+
+
+
+
+ Hover to see animations. Center shows sliding stack with custom colors.
+
+
+
+
+
+
+
+
+ Hover to see animations. Center shows shaking mic with custom colors.
+
+
+
+
+ Hover to see animations. Center shows flying plane with custom colors.
+
+
+
+
+
+
+
+
+ Hover to see animations. Center shows rotating graph with custom colors.
+
+
+
+
+
+
+
+
+ Hover to see animations. Center shows "repair" with custom
+ colors.
+
+
+
+
+
+
+
+
+ Hover to see animations. Center shows lid flipping with custom colors.
+
+
+
+
+
+
+
+
+ Hover to see animations. Center shows pulsing star with custom colors.
+
+
+
+
+
+
+
+
+ Hover to see animations. Center shows "hi" wave with custom
+ colors.
+
+
setIsHovered(true)}
+ onMouseLeave={() => setIsHovered(false)}
+ >
+
+
setIsHovered(true)}
+ onMouseLeave={() => setIsHovered(false)}
+ >
+
+
setIsHovered(true)}
+ onMouseLeave={() => setIsHovered(false)}
+ >
+
+
setIsHovered(true)}
+ onMouseLeave={() => setIsHovered(false)}
+ >
+
+
setIsHovered(true)}
+ onMouseLeave={() => setIsHovered(false)}
+ >
+
+
setIsHovered(true)}
+ onMouseLeave={() => setIsHovered(false)}
+ >
+
+
setIsHovered(true)}
+ onMouseLeave={() => setIsHovered(false)}
+ >
+
+
setIsHovered(true)}
+ onMouseLeave={() => setIsHovered(false)}
+ >
+
+
setIsHovered(true)}
+ onMouseLeave={() => setIsHovered(false)}
+ >
+
+
setIsHovered(true)}
+ onMouseLeave={() => setIsHovered(false)}
+ >
+
+ {/* FINAL CLEAN VERSION: Overwriting the whole SVG content with verified paths */}
+
+
setIsHovered(true)}
+ onMouseLeave={() => setIsHovered(false)}
+ >
+
+
setIsHovered(true)}
+ onMouseLeave={() => setIsHovered(false)}
+ >
+
+
setIsHovered(true)}
+ onMouseLeave={() => setIsHovered(false)}
+ >
+
+
\n
\n \n \n \n
\n
\n Hover to see animations. Center shows ringing bell with custom colors.\n
\n
\n
\n \n \n \n
\n
\n Hover to see animations. Center shows bouncing pins with custom colors.\n
\n
\n
\n \n \n \n
\n
\n Hover to see animations. Center shows rotating globe with custom colors.\n
\n
\n
\n \n \n \n
\n
\n Hover to see animations. Center shows beating heart with custom colors.\n
\n
\n
\n \n \n \n
\n
\n Hover to see animations. Center shows "like" reaction with\n custom colors.\n
\n
\n
\n \n \n \n
\n
\n Hover to see animations. Center shows sliding stack with custom colors.\n
\n
\n
\n \n \n \n
\n
\n Hover to see animations. Center shows shaking mic with custom colors.\n
\n
\n \n
\n\n {/* Connecting Lines and Nodes */}\n \n {nodes.map((node, i) => {\n // Center of canvas\n const cx = size / 2;\n const cy = size / 2;\n\n // Node position\n const nx = node.x * size;\n const ny = node.y * size;\n\n return (\n \n {/* Line from center to node */}\n \n {/* Node circle */}\n \n \n );\n })}\n \n \n );\n}\n",
+ "content": "'use client';\n\nimport { motion, useAnimation } from 'motion/react';\nimport { User } from 'lucide-react';\nimport { cn } from '@/lib/utils';\nimport { useEffect, useState } from 'react';\n\ninterface NetworkIconProps {\n className?: string;\n color?: string;\n size?: number;\n isAnimating?: boolean;\n startOnHover?: boolean;\n animationType?: 'pulse' | 'expand';\n}\n\nexport function NetworkIcon({\n className,\n color = 'currentColor',\n size = 24,\n isAnimating = false,\n startOnHover = true,\n animationType = 'expand',\n}: NetworkIconProps) {\n const controls = useAnimation();\n const [isHovered, setIsHovered] = useState(false);\n const shouldAnimate = isAnimating || (startOnHover && isHovered);\n\n // Calculate sizes relative to the main size\n const userSize = size * 0.5;\n const nodeSize = size * 0.15;\n\n useEffect(() => {\n if (shouldAnimate) {\n if (animationType === 'expand') {\n controls.start({\n scale: [1, 1.1, 1],\n opacity: [1, 0.8, 1],\n transition: {\n duration: 1.5,\n repeat: Infinity,\n repeatType: 'loop',\n ease: 'easeInOut',\n },\n });\n } else if (animationType === 'pulse') {\n controls.start({\n opacity: [0.5, 1, 0.5],\n scale: [1, 1.05, 1],\n transition: {\n duration: 2,\n repeat: Infinity,\n repeatType: 'loop',\n ease: 'easeInOut',\n },\n });\n }\n } else {\n controls.stop();\n controls.set({ scale: 1, opacity: 1 });\n }\n }, [shouldAnimate, animationType, controls]);\n\n // Node positions (normalized 0-1, centered at 0.5)\n // Top Left, Top Right, Bottom Left, Bottom Right\n const nodes = [\n { x: 0.2, y: 0.2 },\n { x: 0.8, y: 0.2 },\n { x: 0.2, y: 0.8 },\n { x: 0.8, y: 0.8 },\n ];\n\n return (\n setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n >\n {/* Central User Icon */}\n \n \n
\n\n {/* Connecting Lines and Nodes */}\n \n {nodes.map((node, i) => {\n // Center of canvas\n const cx = size / 2;\n const cy = size / 2;\n\n // Node position\n const nx = node.x * size;\n const ny = node.y * size;\n\n return (\n \n {/* Line from center to node */}\n \n {/* Node circle */}\n \n \n );\n })}\n \n \n );\n}\n",
"type": "registry:ui"
}
]
diff --git a/public/e/paper-plane-icon-basic.json b/public/e/paper-plane-icon-basic.json
new file mode 100644
index 0000000..f4c8ef1
--- /dev/null
+++ b/public/e/paper-plane-icon-basic.json
@@ -0,0 +1,18 @@
+{
+ "name": "paper-plane-icon-basic",
+ "type": "registry:ui",
+ "componentName": "paper-plane-icon-basic",
+ "description": "Basic usage of the Paper Plane Icon.",
+ "files": [
+ {
+ "path": "paper-plane-icon-basic.tsx",
+ "content": "'use client';\n\nimport { PaperPlaneIcon } from '@/components/core/paper-plane-icon';\n\nexport default function PaperPlaneIconBasic() {\n return (\n \n
\n
\n Hover to see animations. Center shows flying plane with custom colors.\n
\n
\n
\n \n \n \n
\n
\n Hover to see animations. Center shows rotating graph with custom colors.\n
\n
\n
\n \n \n \n
\n
\n Hover to see animations. Center shows "repair" with custom\n colors.\n
\n
\n
\n \n \n \n
\n
\n Hover to see animations. Center shows lid flipping with custom colors.\n
\n
\n
\n \n \n \n
\n
\n Hover to see animations. Center shows pulsing star with custom colors.\n
\n
\n
\n \n \n \n
\n
\n Hover to see animations. Center shows "hi" wave with custom\n colors.\n
\n