@nice2dev/icons-social 1.0.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +165 -0
- package/dist/index.cjs +5884 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.ts +650 -0
- package/dist/index.mjs +5884 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +64 -0
package/README.md
ADDED
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
# @nice2dev/icons-social
|
|
2
|
+
|
|
3
|
+
Social media, messaging, reactions, and profile icons for Nice2Dev UI library.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
pnpm add @nice2dev/icons-social
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Features
|
|
12
|
+
|
|
13
|
+
- 🎨 **60 Social Icons** - Comprehensive set of social media and communication icons
|
|
14
|
+
- 🎭 **3 Variants** - Filled, outlined, and duotone rendering modes
|
|
15
|
+
- ✨ **9 Animations** - Built-in SMIL animations (pulse, grow, shake, spin, bounce, fade, flip, slide, glow)
|
|
16
|
+
- 🏷️ **Brand Colors** - Pre-configured brand colors for platform icons
|
|
17
|
+
- 📦 **Tree-shakeable** - Import only what you need
|
|
18
|
+
- 🔷 **TypeScript** - Full type safety with comprehensive types
|
|
19
|
+
|
|
20
|
+
## Icon Categories
|
|
21
|
+
|
|
22
|
+
### Platform Icons (15)
|
|
23
|
+
|
|
24
|
+
Social media platform icons with brand colors:
|
|
25
|
+
|
|
26
|
+
| Icon | Brand Color |
|
|
27
|
+
| --------------- | ----------- |
|
|
28
|
+
| `FacebookIcon` | #1877f2 |
|
|
29
|
+
| `TwitterIcon` | #1da1f2 |
|
|
30
|
+
| `InstagramIcon` | #e4405f |
|
|
31
|
+
| `LinkedInIcon` | #0077b5 |
|
|
32
|
+
| `YouTubeIcon` | #ff0000 |
|
|
33
|
+
| `TikTokIcon` | #000000 |
|
|
34
|
+
| `SnapchatIcon` | #fffc00 |
|
|
35
|
+
| `PinterestIcon` | #bd081c |
|
|
36
|
+
| `RedditIcon` | #ff4500 |
|
|
37
|
+
| `DiscordIcon` | #5865f2 |
|
|
38
|
+
| `SlackIcon` | Multi-color |
|
|
39
|
+
| `TwitchIcon` | #9146ff |
|
|
40
|
+
| `GitHubIcon` | #181717 |
|
|
41
|
+
| `DribbbleIcon` | #ea4c89 |
|
|
42
|
+
| `BehanceIcon` | #1769ff |
|
|
43
|
+
|
|
44
|
+
### Messaging Icons (15)
|
|
45
|
+
|
|
46
|
+
Communication and messaging icons:
|
|
47
|
+
|
|
48
|
+
`ChatIcon`, `ChatBubbleIcon`, `ChatDotsIcon`, `MessageIcon`, `MessageSquareIcon`, `SendIcon`, `InboxIcon`, `MailIcon`, `MailOpenIcon`, `ReplyIcon`, `ReplyAllIcon`, `ForwardIcon`, `AttachmentIcon`, `EmojiIcon`, `StickerIcon`
|
|
49
|
+
|
|
50
|
+
### Reaction Icons (15)
|
|
51
|
+
|
|
52
|
+
Social media engagement and reaction icons:
|
|
53
|
+
|
|
54
|
+
`LikeIcon`, `DislikeIcon`, `LoveIcon`, `HahaIcon`, `WowIcon`, `SadIcon`, `AngryIcon`, `ClapIcon`, `FireIcon`, `ThumbsUpIcon`, `ThumbsDownIcon`, `CelebrateIcon`, `SupportIcon`, `InsightfulIcon`, `CuriousIcon`
|
|
55
|
+
|
|
56
|
+
### Profile Icons (15)
|
|
57
|
+
|
|
58
|
+
User profile and social relationship icons:
|
|
59
|
+
|
|
60
|
+
`UserIcon`, `UserCircleIcon`, `UserPlusIcon`, `UserMinusIcon`, `UserCheckIcon`, `UsersIcon`, `UsersGroupIcon`, `FriendIcon`, `FollowIcon`, `UnfollowIcon`, `BlockIcon`, `VerifiedIcon`, `BadgeIcon`, `AvatarIcon`, `ProfileIcon`
|
|
61
|
+
|
|
62
|
+
## Usage
|
|
63
|
+
|
|
64
|
+
### Basic Usage
|
|
65
|
+
|
|
66
|
+
```tsx
|
|
67
|
+
import { FacebookIcon, LoveIcon, ChatIcon, UserIcon } from '@nice2dev/icons-social';
|
|
68
|
+
|
|
69
|
+
// Platform icon with brand color
|
|
70
|
+
<FacebookIcon size={32} />
|
|
71
|
+
|
|
72
|
+
// Reaction with animation
|
|
73
|
+
<LoveIcon animation="pulse" />
|
|
74
|
+
|
|
75
|
+
// Messaging icon
|
|
76
|
+
<ChatIcon variant="outlined" />
|
|
77
|
+
|
|
78
|
+
// Profile icon
|
|
79
|
+
<UserIcon size={24} color="#333" />
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
### Icon Variants
|
|
83
|
+
|
|
84
|
+
```tsx
|
|
85
|
+
import { TwitterIcon } from '@nice2dev/icons-social';
|
|
86
|
+
|
|
87
|
+
// Filled (default)
|
|
88
|
+
<TwitterIcon variant="filled" />
|
|
89
|
+
|
|
90
|
+
// Outlined
|
|
91
|
+
<TwitterIcon variant="outlined" />
|
|
92
|
+
|
|
93
|
+
// Duotone
|
|
94
|
+
<TwitterIcon variant="duotone" accentColor="#444" />
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
### Animations
|
|
98
|
+
|
|
99
|
+
```tsx
|
|
100
|
+
import { LikeIcon } from '@nice2dev/icons-social';
|
|
101
|
+
|
|
102
|
+
<LikeIcon animation="pulse" /> // Pulsing effect
|
|
103
|
+
<LikeIcon animation="grow" /> // Size growth
|
|
104
|
+
<LikeIcon animation="shake" /> // Shake/wiggle
|
|
105
|
+
<LikeIcon animation="spin" /> // 360° rotation
|
|
106
|
+
<LikeIcon animation="bounce" /> // Bouncing effect
|
|
107
|
+
<LikeIcon animation="fade" /> // Fade in/out
|
|
108
|
+
<LikeIcon animation="flip" /> // 3D flip
|
|
109
|
+
<LikeIcon animation="slide" /> // Slide motion
|
|
110
|
+
<LikeIcon animation="glow" /> // Glowing effect
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
### Grouped Imports
|
|
114
|
+
|
|
115
|
+
```tsx
|
|
116
|
+
import { platformIcons, messagingIcons, reactionIcons, profileIcons } from '@nice2dev/icons-social';
|
|
117
|
+
|
|
118
|
+
// Access all platform icons
|
|
119
|
+
const { FacebookIcon, TwitterIcon } = platformIcons;
|
|
120
|
+
|
|
121
|
+
// Use in icon picker
|
|
122
|
+
const allReactions = Object.values(reactionIcons);
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
### Custom Colors
|
|
126
|
+
|
|
127
|
+
```tsx
|
|
128
|
+
import { SendIcon } from '@nice2dev/icons-social';
|
|
129
|
+
|
|
130
|
+
// Override default colors
|
|
131
|
+
<SendIcon color="#333333" accentColor="#0066ff" />;
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
## Props
|
|
135
|
+
|
|
136
|
+
| Prop | Type | Default | Description |
|
|
137
|
+
| ------------- | ------------------------------------- | ---------------- | ---------------------------------- |
|
|
138
|
+
| `size` | `number` | `24` | Icon size in pixels |
|
|
139
|
+
| `color` | `string` | `'currentColor'` | Primary icon color |
|
|
140
|
+
| `accentColor` | `string` | - | Secondary/accent color for duotone |
|
|
141
|
+
| `variant` | `'filled' \| 'outlined' \| 'duotone'` | `'filled'` | Icon style variant |
|
|
142
|
+
| `animation` | `SocialIconAnimation` | - | Animation type |
|
|
143
|
+
| `className` | `string` | - | Additional CSS class |
|
|
144
|
+
| `style` | `CSSProperties` | - | Inline styles |
|
|
145
|
+
|
|
146
|
+
## TypeScript
|
|
147
|
+
|
|
148
|
+
```tsx
|
|
149
|
+
import type {
|
|
150
|
+
SocialIconProps,
|
|
151
|
+
SocialIconAnimation,
|
|
152
|
+
PlatformIconName,
|
|
153
|
+
MessagingIconName,
|
|
154
|
+
ReactionIconName,
|
|
155
|
+
ProfileIconName,
|
|
156
|
+
} from '@nice2dev/icons-social';
|
|
157
|
+
|
|
158
|
+
// Type-safe icon selection
|
|
159
|
+
const iconName: PlatformIconName = 'Facebook';
|
|
160
|
+
const animation: SocialIconAnimation = 'pulse';
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
## License
|
|
164
|
+
|
|
165
|
+
MIT © Nice2Dev
|