@nice2dev/icons-education 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 +225 -0
- package/dist/index.cjs +13233 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.ts +1760 -0
- package/dist/index.mjs +13233 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +75 -0
package/README.md
ADDED
|
@@ -0,0 +1,225 @@
|
|
|
1
|
+
# @nice2dev/icons-education
|
|
2
|
+
|
|
3
|
+
Animated education icons for learning applications. Part of the Nice2Dev UI component library.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- ๐ญ **60 Unique Icons** โ School, Science, Math, and Arts categories
|
|
8
|
+
- โจ **SMIL Animations** โ 9 built-in animation types (pulse, grow, shake, spin, bounce, fade, flip, slide, glow)
|
|
9
|
+
- ๐จ **3 Variants** โ Filled, outlined, and duotone styles
|
|
10
|
+
- โก **Tree-shakeable** โ Import only what you need
|
|
11
|
+
- ๐ฆ **Lazy Loading** โ Icon collections support dynamic imports
|
|
12
|
+
- ๐ง **TypeScript** โ Full type safety with strict typing
|
|
13
|
+
- โฟ **Accessible** โ ARIA attributes and keyboard support
|
|
14
|
+
|
|
15
|
+
## Installation
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
# npm
|
|
19
|
+
npm install @nice2dev/icons-education
|
|
20
|
+
|
|
21
|
+
# pnpm
|
|
22
|
+
pnpm add @nice2dev/icons-education
|
|
23
|
+
|
|
24
|
+
# yarn
|
|
25
|
+
yarn add @nice2dev/icons-education
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
## Quick Start
|
|
29
|
+
|
|
30
|
+
```tsx
|
|
31
|
+
import { GraduationCapIcon, AtomIcon, CalculatorIcon, PaletteIcon } from '@nice2dev/icons-education';
|
|
32
|
+
|
|
33
|
+
function App() {
|
|
34
|
+
return (
|
|
35
|
+
<div>
|
|
36
|
+
{/* Static icon */}
|
|
37
|
+
<GraduationCapIcon size={24} />
|
|
38
|
+
|
|
39
|
+
{/* Animated icon */}
|
|
40
|
+
<AtomIcon animation="spin" size={32} />
|
|
41
|
+
|
|
42
|
+
{/* Custom styling */}
|
|
43
|
+
<PaletteIcon variant="duotone" color="#3b82f6" accentColor="#93c5fd" animation="grow" />
|
|
44
|
+
</div>
|
|
45
|
+
);
|
|
46
|
+
}
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
## Icon Categories
|
|
50
|
+
|
|
51
|
+
### School (15 icons)
|
|
52
|
+
|
|
53
|
+
| Icon | Name | Description |
|
|
54
|
+
| ---- | ------------------- | -------------------------- |
|
|
55
|
+
| ๐ | `GraduationCapIcon` | Graduation cap/mortarboard |
|
|
56
|
+
| ๐ | `BookIcon` | Closed book |
|
|
57
|
+
| ๐ | `BookOpenIcon` | Open book |
|
|
58
|
+
| ๐ | `LibraryIcon` | Library/bookshelf |
|
|
59
|
+
| ๐ | `BackpackIcon` | School backpack |
|
|
60
|
+
| โ๏ธ | `PencilIcon` | Writing pencil |
|
|
61
|
+
| ๐๏ธ | `PenFancyIcon` | Fancy pen |
|
|
62
|
+
| ๐ | `RulerIcon` | Measuring ruler |
|
|
63
|
+
| ๐งน | `EraserIcon` | Eraser |
|
|
64
|
+
| โ๏ธ | `ScissorsIcon` | Scissors |
|
|
65
|
+
| ๐ | `NotebookIcon` | Notebook |
|
|
66
|
+
| ๐ | `HomeworkIcon` | Homework/assignment |
|
|
67
|
+
| ๐ | `DiplomaIcon` | Diploma |
|
|
68
|
+
| ๐
| `CertificateIcon` | Certificate |
|
|
69
|
+
| ๐ | `BellIcon` | School bell |
|
|
70
|
+
|
|
71
|
+
### Science (15 icons)
|
|
72
|
+
|
|
73
|
+
| Icon | Name | Description |
|
|
74
|
+
| ---- | ---------------- | ------------------ |
|
|
75
|
+
| โ๏ธ | `AtomIcon` | Atom structure |
|
|
76
|
+
| ๐ฌ | `MicroscopeIcon` | Microscope |
|
|
77
|
+
| ๐ญ | `TelescopeIcon` | Telescope |
|
|
78
|
+
| ๐งช | `FlaskIcon` | Lab flask |
|
|
79
|
+
| ๐งซ | `BeakerIcon` | Beaker |
|
|
80
|
+
| ๐งฌ | `DNAIcon` | DNA helix |
|
|
81
|
+
| โ๏ธ | `MoleculeIcon` | Molecule |
|
|
82
|
+
| ๐งฒ | `MagnetIcon` | Magnet |
|
|
83
|
+
| ๐ช | `PlanetIcon` | Planet with ring |
|
|
84
|
+
| ๐ | `RocketIcon` | Rocket |
|
|
85
|
+
| ๐ฌ | `LabIcon` | Laboratory |
|
|
86
|
+
| ๐งซ | `PetriDishIcon` | Petri dish |
|
|
87
|
+
| โ๏ธ | `ChemicalIcon` | Chemical/test tube |
|
|
88
|
+
| โข๏ธ | `RadiationIcon` | Radiation symbol |
|
|
89
|
+
| ๐ฆ | `BiologyIcon` | Biology/cell |
|
|
90
|
+
|
|
91
|
+
### Math (15 icons)
|
|
92
|
+
|
|
93
|
+
| Icon | Name | Description |
|
|
94
|
+
| ---- | ---------------- | ----------------- |
|
|
95
|
+
| ๐งฎ | `CalculatorIcon` | Calculator |
|
|
96
|
+
| ฯ | `PiIcon` | Pi symbol |
|
|
97
|
+
| ฮฃ | `SigmaIcon` | Sigma/summation |
|
|
98
|
+
| โ | `InfinityIcon` | Infinity symbol |
|
|
99
|
+
| ฦ | `FunctionIcon` | Function notation |
|
|
100
|
+
| ๐ | `GraphIcon` | Graph/chart |
|
|
101
|
+
| โณ | `GeometryIcon` | Geometry shapes |
|
|
102
|
+
| โญ | `CompassIcon` | Drawing compass |
|
|
103
|
+
| ๐ | `ProtractorIcon` | Protractor |
|
|
104
|
+
| ๐งฎ | `AbacusIcon` | Abacus |
|
|
105
|
+
| xยฒ | `FormulaIcon` | Math formula |
|
|
106
|
+
| % | `PercentIcon` | Percent symbol |
|
|
107
|
+
| รท | `DivisionIcon` | Division symbol |
|
|
108
|
+
| ยฑ | `PlusMinusIcon` | Plus-minus symbol |
|
|
109
|
+
| = | `EqualsIcon` | Equals sign |
|
|
110
|
+
|
|
111
|
+
### Arts (15 icons)
|
|
112
|
+
|
|
113
|
+
| Icon | Name | Description |
|
|
114
|
+
| ---- | --------------- | -------------- |
|
|
115
|
+
| ๐จ | `PaletteIcon` | Artist palette |
|
|
116
|
+
| ๐๏ธ | `BrushIcon` | Paint brush |
|
|
117
|
+
| ๐ผ๏ธ | `EaselIcon` | Art easel |
|
|
118
|
+
| ๐ผ๏ธ | `CanvasIcon` | Canvas |
|
|
119
|
+
| ๐ต | `MusicNoteIcon` | Music note |
|
|
120
|
+
| ๐น | `PianoIcon` | Piano keys |
|
|
121
|
+
| ๐ธ | `GuitarIcon` | Guitar |
|
|
122
|
+
| ๐ญ | `DramaIcon` | Drama masks |
|
|
123
|
+
| ๐ญ | `TheaterIcon` | Theater stage |
|
|
124
|
+
| ๐ฟ | `SculptureIcon` | Sculpture |
|
|
125
|
+
| ๐ท | `CameraIcon` | Camera |
|
|
126
|
+
| ๐ฌ | `FilmIcon` | Film reel |
|
|
127
|
+
| ๐ | `DanceIcon` | Dance figure |
|
|
128
|
+
| โ๏ธ | `CraftsIcon` | Arts & crafts |
|
|
129
|
+
| ๐บ | `PotteryIcon` | Pottery |
|
|
130
|
+
|
|
131
|
+
## Animation Types
|
|
132
|
+
|
|
133
|
+
```tsx
|
|
134
|
+
import { AtomIcon } from '@nice2dev/icons-education';
|
|
135
|
+
|
|
136
|
+
// Available animations
|
|
137
|
+
<AtomIcon animation="pulse" /> // Pulsing opacity
|
|
138
|
+
<AtomIcon animation="grow" /> // Scale up/down
|
|
139
|
+
<AtomIcon animation="shake" /> // Horizontal shake
|
|
140
|
+
<AtomIcon animation="spin" /> // 360ยฐ rotation
|
|
141
|
+
<AtomIcon animation="bounce" /> // Vertical bounce
|
|
142
|
+
<AtomIcon animation="fade" /> // Fade in/out
|
|
143
|
+
<AtomIcon animation="flip" /> // Y-axis flip
|
|
144
|
+
<AtomIcon animation="slide" /> // Horizontal slide
|
|
145
|
+
<AtomIcon animation="glow" /> // Drop shadow glow
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
### Animation Duration
|
|
149
|
+
|
|
150
|
+
```tsx
|
|
151
|
+
<AtomIcon animation="spin" animationDuration="fast" /> // 0.5s
|
|
152
|
+
<AtomIcon animation="spin" animationDuration="normal" /> // 1s (default)
|
|
153
|
+
<AtomIcon animation="spin" animationDuration="slow" /> // 2s
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
## Icon Variants
|
|
157
|
+
|
|
158
|
+
```tsx
|
|
159
|
+
import { GraduationCapIcon } from '@nice2dev/icons-education';
|
|
160
|
+
|
|
161
|
+
// Filled (default)
|
|
162
|
+
<GraduationCapIcon variant="filled" />
|
|
163
|
+
|
|
164
|
+
// Outlined
|
|
165
|
+
<GraduationCapIcon variant="outlined" />
|
|
166
|
+
|
|
167
|
+
// Duotone (two-color)
|
|
168
|
+
<GraduationCapIcon
|
|
169
|
+
variant="duotone"
|
|
170
|
+
color="#3b82f6"
|
|
171
|
+
accentColor="#93c5fd"
|
|
172
|
+
/>
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
## Props Reference
|
|
176
|
+
|
|
177
|
+
| Prop | Type | Default | Description |
|
|
178
|
+
| ------------------- | ------------------------------------- | ---------------- | ------------------------------------------ |
|
|
179
|
+
| `size` | `number \| string` | `24` | Icon size in pixels or CSS string |
|
|
180
|
+
| `color` | `string` | `'currentColor'` | Primary icon color |
|
|
181
|
+
| `accentColor` | `string` | `color` | Secondary/accent color for duotone |
|
|
182
|
+
| `variant` | `'filled' \| 'outlined' \| 'duotone'` | `'filled'` | Icon style variant |
|
|
183
|
+
| `animation` | `EducationIconAnimation` | `'none'` | Animation type |
|
|
184
|
+
| `animationDuration` | `'slow' \| 'normal' \| 'fast'` | `'normal'` | Animation speed |
|
|
185
|
+
| `animate` | `boolean` | `true` | Whether animation should play |
|
|
186
|
+
| `strokeWidth` | `number` | `2` | Stroke width for outlined variant |
|
|
187
|
+
| `className` | `string` | `undefined` | Additional CSS class |
|
|
188
|
+
| `title` | `string` | `undefined` | Accessible title (also enables aria-label) |
|
|
189
|
+
| `style` | `CSSProperties` | `undefined` | Inline styles |
|
|
190
|
+
|
|
191
|
+
## Dynamic Imports
|
|
192
|
+
|
|
193
|
+
For code-splitting, use the icon collections:
|
|
194
|
+
|
|
195
|
+
```tsx
|
|
196
|
+
import { SchoolIcons } from '@nice2dev/icons-education';
|
|
197
|
+
|
|
198
|
+
// Dynamically load an icon
|
|
199
|
+
const loadGraduationCapIcon = async () => {
|
|
200
|
+
const GraduationCapIcon = await SchoolIcons.GraduationCap();
|
|
201
|
+
return GraduationCapIcon;
|
|
202
|
+
};
|
|
203
|
+
```
|
|
204
|
+
|
|
205
|
+
## TypeScript
|
|
206
|
+
|
|
207
|
+
All icons are fully typed:
|
|
208
|
+
|
|
209
|
+
```tsx
|
|
210
|
+
import type {
|
|
211
|
+
EducationIconProps,
|
|
212
|
+
EducationIconAnimation,
|
|
213
|
+
SchoolIconName,
|
|
214
|
+
ScienceIconName,
|
|
215
|
+
MathIconName,
|
|
216
|
+
ArtsIconName,
|
|
217
|
+
} from '@nice2dev/icons-education';
|
|
218
|
+
|
|
219
|
+
// Type-safe icon name unions
|
|
220
|
+
type AllIconNames = SchoolIconName | ScienceIconName | MathIconName | ArtsIconName;
|
|
221
|
+
```
|
|
222
|
+
|
|
223
|
+
## License
|
|
224
|
+
|
|
225
|
+
MIT ยฉ Nice2Dev
|