@nice2dev/icons-math 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.
Files changed (46) hide show
  1. package/README.md +223 -0
  2. package/dist/createMathIcon-BbQhEo0A.mjs +157 -0
  3. package/dist/createMathIcon-BbQhEo0A.mjs.map +1 -0
  4. package/dist/createMathIcon-CK9tbq5-.js +156 -0
  5. package/dist/createMathIcon-CK9tbq5-.js.map +1 -0
  6. package/dist/createMathIcon.d.ts +14 -0
  7. package/dist/createMathIcon.d.ts.map +1 -0
  8. package/dist/functions.cjs +137 -0
  9. package/dist/functions.cjs.map +1 -0
  10. package/dist/functions.d.ts +57 -0
  11. package/dist/functions.d.ts.map +1 -0
  12. package/dist/functions.mjs +137 -0
  13. package/dist/functions.mjs.map +1 -0
  14. package/dist/geometry.cjs +125 -0
  15. package/dist/geometry.cjs.map +1 -0
  16. package/dist/geometry.d.ts +56 -0
  17. package/dist/geometry.d.ts.map +1 -0
  18. package/dist/geometry.mjs +125 -0
  19. package/dist/geometry.mjs.map +1 -0
  20. package/dist/index.cjs +190 -0
  21. package/dist/index.cjs.map +1 -0
  22. package/dist/index.d.ts +114 -0
  23. package/dist/index.d.ts.map +1 -0
  24. package/dist/index.mjs +190 -0
  25. package/dist/index.mjs.map +1 -0
  26. package/dist/operators.cjs +124 -0
  27. package/dist/operators.cjs.map +1 -0
  28. package/dist/operators.d.ts +56 -0
  29. package/dist/operators.d.ts.map +1 -0
  30. package/dist/operators.mjs +124 -0
  31. package/dist/operators.mjs.map +1 -0
  32. package/dist/sets.cjs +126 -0
  33. package/dist/sets.cjs.map +1 -0
  34. package/dist/sets.d.ts +56 -0
  35. package/dist/sets.d.ts.map +1 -0
  36. package/dist/sets.mjs +126 -0
  37. package/dist/sets.mjs.map +1 -0
  38. package/dist/statistics.cjs +164 -0
  39. package/dist/statistics.cjs.map +1 -0
  40. package/dist/statistics.d.ts +56 -0
  41. package/dist/statistics.d.ts.map +1 -0
  42. package/dist/statistics.mjs +164 -0
  43. package/dist/statistics.mjs.map +1 -0
  44. package/dist/types.d.ts +59 -0
  45. package/dist/types.d.ts.map +1 -0
  46. package/package.json +78 -0
package/README.md ADDED
@@ -0,0 +1,223 @@
1
+ # @nice2dev/icons-math
2
+
3
+ Mathematics icon library for React applications. Part of the Nice2Dev UI component library.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ npm install @nice2dev/icons-math
9
+ # or
10
+ pnpm add @nice2dev/icons-math
11
+ ```
12
+
13
+ ## Features
14
+
15
+ - 75 mathematics-themed SVG icons
16
+ - TypeScript support with full type definitions
17
+ - Tree-shakeable exports
18
+ - 5 categories: operators, functions, geometry, sets, statistics
19
+ - 3 rendering variants: filled, outlined, duotone
20
+ - 9 SMIL animations: pulse, grow, shake, spin, bounce, fade, flip, slide, glow
21
+ - Accessibility support with title and desc props
22
+
23
+ ## Usage
24
+
25
+ ### Basic Usage
26
+
27
+ ```tsx
28
+ import { Plus, Integral, Triangle, Union, BarChart } from '@nice2dev/icons-math';
29
+
30
+ function App() {
31
+ return (
32
+ <div>
33
+ <Plus size={24} color="#333" />
34
+ <Integral size={32} color="blue" />
35
+ <Triangle variant="outlined" />
36
+ <Union animation="pulse" />
37
+ <BarChart title="Sales chart" />
38
+ </div>
39
+ );
40
+ }
41
+ ```
42
+
43
+ ### Import by Category
44
+
45
+ ```tsx
46
+ // Import operator icons
47
+ import { Plus, Minus, Multiply, Divide, SquareRoot } from '@nice2dev/icons-math/operators';
48
+
49
+ // Import function icons
50
+ import { Integral, Derivative, Sigma, Pi } from '@nice2dev/icons-math/functions';
51
+
52
+ // Import geometry icons
53
+ import { Triangle, Circle, Cube, Pyramid } from '@nice2dev/icons-math/geometry';
54
+
55
+ // Import set theory icons
56
+ import { Union, Intersection, EmptySet } from '@nice2dev/icons-math/sets';
57
+
58
+ // Import statistics icons
59
+ import { BarChart, BellCurve, PieChart } from '@nice2dev/icons-math/statistics';
60
+ ```
61
+
62
+ ### Icon Variants
63
+
64
+ ```tsx
65
+ import { Plus } from '@nice2dev/icons-math';
66
+
67
+ // Filled (default)
68
+ <Plus variant="filled" color="#333" />
69
+
70
+ // Outlined
71
+ <Plus variant="outlined" color="#333" />
72
+
73
+ // Duotone
74
+ <Plus variant="duotone" color="#333" secondaryColor="#999" />
75
+ ```
76
+
77
+ ### Animations
78
+
79
+ ```tsx
80
+ import { Sigma } from '@nice2dev/icons-math';
81
+
82
+ // Available animations: pulse, grow, shake, spin, bounce, fade, flip, slide, glow
83
+ <Sigma animation="spin" animationDuration={2000} />;
84
+ ```
85
+
86
+ ### Custom Icons
87
+
88
+ ```tsx
89
+ import { createMathIcon } from '@nice2dev/icons-math';
90
+
91
+ const CustomSymbol = createMathIcon(
92
+ 'CustomSymbol',
93
+ 'M12 4L4 20h16L12 4z',
94
+ '#6366f1', // optional default color
95
+ );
96
+
97
+ <CustomSymbol size={48} animation="pulse" />;
98
+ ```
99
+
100
+ ## Icon Reference
101
+
102
+ ### Operators (15 icons)
103
+
104
+ | Icon | Name | Description |
105
+ | ---- | ---------------- | ----------------------- |
106
+ | ➕ | `Plus` | Addition operator |
107
+ | ➖ | `Minus` | Subtraction operator |
108
+ | ✖️ | `Multiply` | Multiplication operator |
109
+ | ➗ | `Divide` | Division operator |
110
+ | = | `Equals` | Equals sign |
111
+ | ≠ | `NotEquals` | Not equals sign |
112
+ | < | `LessThan` | Less than symbol |
113
+ | > | `GreaterThan` | Greater than symbol |
114
+ | ≤ | `LessOrEqual` | Less than or equal |
115
+ | ≥ | `GreaterOrEqual` | Greater than or equal |
116
+ | ± | `PlusMinus` | Plus-minus symbol |
117
+ | % | `Percent` | Percent symbol |
118
+ | mod | `Modulo` | Modulo operator |
119
+ | xⁿ | `Power` | Power/Exponent |
120
+ | √ | `SquareRoot` | Square root |
121
+
122
+ ### Functions (15 icons)
123
+
124
+ | Icon | Name | Description |
125
+ | ---- | ------------ | ------------------- | ---------- | -------------- |
126
+ | f(x) | `Function` | Function notation |
127
+ | ∫ | `Integral` | Integral symbol |
128
+ | d/dx | `Derivative` | Derivative notation |
129
+ | Σ | `Summation` | Summation symbol |
130
+ | Π | `Product` | Product symbol |
131
+ | lim | `Limit` | Limit notation |
132
+ | π | `Pi` | Pi constant |
133
+ | ∞ | `Infinity` | Infinity symbol |
134
+ | Σ | `Sigma` | Sigma (capital) |
135
+ | Δ | `Delta` | Delta symbol |
136
+ | θ | `Theta` | Theta symbol |
137
+ | λ | `Lambda` | Lambda symbol |
138
+ | n! | `Factorial` | Factorial notation |
139
+ | log | `Logarithm` | Logarithm |
140
+ | | x | | `Absolute` | Absolute value |
141
+
142
+ ### Geometry (15 icons)
143
+
144
+ | Icon | Name | Description |
145
+ | ---- | --------------- | ------------------- |
146
+ | △ | `Triangle` | Triangle shape |
147
+ | □ | `Square` | Square shape |
148
+ | ○ | `Circle` | Circle shape |
149
+ | ⬜ | `Cube` | 3D Cube |
150
+ | ● | `Sphere` | 3D Sphere |
151
+ | △ | `Pyramid` | 3D Pyramid |
152
+ | ⊙ | `Cylinder` | 3D Cylinder |
153
+ | △ | `Cone` | 3D Cone |
154
+ | ⬠ | `Pentagon` | Pentagon shape |
155
+ | ⬡ | `Hexagon` | Hexagon shape |
156
+ | ∠ | `Angle` | Angle symbol |
157
+ | ∥ | `Parallel` | Parallel lines |
158
+ | ⊥ | `Perpendicular` | Perpendicular lines |
159
+ | 🧭 | `Compass` | Drawing compass |
160
+ | 📐 | `Protractor` | Protractor tool |
161
+
162
+ ### Sets (15 icons)
163
+
164
+ | Icon | Name | Description |
165
+ | ---- | ------------------ | -------------------- |
166
+ | ∪ | `Union` | Set union |
167
+ | ∩ | `Intersection` | Set intersection |
168
+ | ⊂ | `Subset` | Subset symbol |
169
+ | ⊃ | `Superset` | Superset symbol |
170
+ | ∈ | `Element` | Element of |
171
+ | ∉ | `NotElement` | Not element of |
172
+ | ∅ | `EmptySet` | Empty set |
173
+ | U | `Universal` | Universal set |
174
+ | ′ | `Complement` | Set complement |
175
+ | \ | `Difference` | Set difference |
176
+ | △ | `SymmetricDiff` | Symmetric difference |
177
+ | × | `CartesianProduct` | Cartesian product |
178
+ | P(A) | `PowerSet` | Power set |
179
+ | {} | `SetBraces` | Set braces |
180
+ | → | `Mapping` | Function mapping |
181
+
182
+ ### Statistics (15 icons)
183
+
184
+ | Icon | Name | Description |
185
+ | ---- | ------------- | --------------------- |
186
+ | 📊 | `BarChart` | Bar chart |
187
+ | 📊 | `Histogram` | Histogram |
188
+ | 📈 | `BellCurve` | Normal distribution |
189
+ | ⚬ | `Scatter` | Scatter plot |
190
+ | 📈 | `LineGraph` | Line graph |
191
+ | 🥧 | `PieChart` | Pie chart |
192
+ | ⊞ | `BoxPlot` | Box plot |
193
+ | x̄ | `Mean` | Mean symbol |
194
+ | M | `Median` | Median representation |
195
+ | Mo | `Mode` | Mode representation |
196
+ | σ | `StandardDev` | Standard deviation |
197
+ | σ² | `Variance` | Variance |
198
+ | r | `Correlation` | Correlation |
199
+ | 📈 | `Regression` | Regression line |
200
+ | P(A) | `Probability` | Probability |
201
+
202
+ ## Props
203
+
204
+ All icons accept the following props:
205
+
206
+ | Prop | Type | Default | Description |
207
+ | ------------------- | ------------------------------------- | ---------------- | --------------------------- |
208
+ | `size` | `number \| string` | `24` | Icon size in pixels |
209
+ | `color` | `string` | `'currentColor'` | Primary icon color |
210
+ | `secondaryColor` | `string` | - | Secondary color for duotone |
211
+ | `variant` | `'filled' \| 'outlined' \| 'duotone'` | `'filled'` | Rendering variant |
212
+ | `animation` | `MathIconAnimation` | - | Animation effect |
213
+ | `animationDuration` | `number` | `1000` | Animation duration (ms) |
214
+ | `title` | `string` | - | Accessible title |
215
+ | `desc` | `string` | - | Accessible description |
216
+ | `className` | `string` | - | CSS class name |
217
+ | `style` | `CSSProperties` | - | Inline styles |
218
+
219
+ Plus all standard SVG attributes.
220
+
221
+ ## License
222
+
223
+ MIT License - see LICENSE file for details.
@@ -0,0 +1,157 @@
1
+ import { jsx, Fragment, jsxs } from "react/jsx-runtime";
2
+ function getMathAnimation(animation, duration = 1e3) {
3
+ const dur = `${duration}ms`;
4
+ switch (animation) {
5
+ case "pulse":
6
+ return /* @__PURE__ */ jsx("animate", { attributeName: "opacity", values: "1;0.5;1", dur, repeatCount: "indefinite" });
7
+ case "grow":
8
+ return /* @__PURE__ */ jsx(
9
+ "animateTransform",
10
+ {
11
+ attributeName: "transform",
12
+ type: "scale",
13
+ values: "1;1.2;1",
14
+ dur,
15
+ repeatCount: "indefinite"
16
+ }
17
+ );
18
+ case "shake":
19
+ return /* @__PURE__ */ jsx(
20
+ "animateTransform",
21
+ {
22
+ attributeName: "transform",
23
+ type: "translate",
24
+ values: "0,0;-2,0;2,0;0,0",
25
+ dur,
26
+ repeatCount: "indefinite"
27
+ }
28
+ );
29
+ case "spin":
30
+ return /* @__PURE__ */ jsx(
31
+ "animateTransform",
32
+ {
33
+ attributeName: "transform",
34
+ type: "rotate",
35
+ values: "0 12 12;360 12 12",
36
+ dur,
37
+ repeatCount: "indefinite"
38
+ }
39
+ );
40
+ case "bounce":
41
+ return /* @__PURE__ */ jsx(
42
+ "animateTransform",
43
+ {
44
+ attributeName: "transform",
45
+ type: "translate",
46
+ values: "0,0;0,-3;0,0",
47
+ dur,
48
+ repeatCount: "indefinite"
49
+ }
50
+ );
51
+ case "fade":
52
+ return /* @__PURE__ */ jsx("animate", { attributeName: "opacity", values: "0;1;0", dur, repeatCount: "indefinite" });
53
+ case "flip":
54
+ return /* @__PURE__ */ jsx(
55
+ "animateTransform",
56
+ {
57
+ attributeName: "transform",
58
+ type: "rotate",
59
+ values: "0 12 12;180 12 12;360 12 12",
60
+ dur,
61
+ repeatCount: "indefinite"
62
+ }
63
+ );
64
+ case "slide":
65
+ return /* @__PURE__ */ jsx(
66
+ "animateTransform",
67
+ {
68
+ attributeName: "transform",
69
+ type: "translate",
70
+ values: "-5,0;5,0;-5,0",
71
+ dur,
72
+ repeatCount: "indefinite"
73
+ }
74
+ );
75
+ case "glow":
76
+ return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
77
+ "animate",
78
+ {
79
+ attributeName: "filter",
80
+ values: "drop-shadow(0 0 2px currentColor);drop-shadow(0 0 8px currentColor);drop-shadow(0 0 2px currentColor)",
81
+ dur,
82
+ repeatCount: "indefinite"
83
+ }
84
+ ) });
85
+ default:
86
+ return null;
87
+ }
88
+ }
89
+ function createMathIcon(name, path, defaultColor) {
90
+ const MathIcon = ({
91
+ size = 24,
92
+ color = defaultColor || "currentColor",
93
+ secondaryColor,
94
+ variant = "filled",
95
+ animation,
96
+ animationDuration = 1e3,
97
+ title,
98
+ desc,
99
+ className,
100
+ style,
101
+ ...props
102
+ }) => {
103
+ const iconId = `math-icon-${name.toLowerCase()}-${Math.random().toString(36).substr(2, 9)}`;
104
+ const getVariantStyles = (v) => {
105
+ switch (v) {
106
+ case "outlined":
107
+ return {
108
+ fill: "none",
109
+ stroke: color,
110
+ strokeWidth: 1.5
111
+ };
112
+ case "duotone":
113
+ return {
114
+ fill: color,
115
+ opacity: 0.5
116
+ };
117
+ case "filled":
118
+ default:
119
+ return {
120
+ fill: color
121
+ };
122
+ }
123
+ };
124
+ const variantStyles = getVariantStyles(variant);
125
+ return /* @__PURE__ */ jsxs(
126
+ "svg",
127
+ {
128
+ xmlns: "http://www.w3.org/2000/svg",
129
+ width: size,
130
+ height: size,
131
+ viewBox: "0 0 24 24",
132
+ className,
133
+ style: { ...style, ...variantStyles },
134
+ role: "img",
135
+ "aria-labelledby": title ? `${iconId}-title` : void 0,
136
+ "aria-describedby": desc ? `${iconId}-desc` : void 0,
137
+ ...props,
138
+ children: [
139
+ title && /* @__PURE__ */ jsx("title", { id: `${iconId}-title`, children: title }),
140
+ desc && /* @__PURE__ */ jsx("desc", { id: `${iconId}-desc`, children: desc }),
141
+ /* @__PURE__ */ jsxs("g", { style: variantStyles, children: [
142
+ typeof path === "string" ? /* @__PURE__ */ jsx("path", { d: path }) : path,
143
+ animation && getMathAnimation(animation, animationDuration)
144
+ ] }),
145
+ variant === "duotone" && secondaryColor && /* @__PURE__ */ jsx("g", { style: { fill: secondaryColor, opacity: 0.3 }, children: typeof path === "string" ? /* @__PURE__ */ jsx("path", { d: path }) : path })
146
+ ]
147
+ }
148
+ );
149
+ };
150
+ MathIcon.displayName = name;
151
+ return MathIcon;
152
+ }
153
+ export {
154
+ createMathIcon as c,
155
+ getMathAnimation as g
156
+ };
157
+ //# sourceMappingURL=createMathIcon-BbQhEo0A.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"createMathIcon-BbQhEo0A.mjs","sources":["../src/createMathIcon.tsx"],"sourcesContent":["import React, { type ReactElement } from 'react';\r\n\r\nimport type { MathIconProps, MathIconAnimation, MathIconVariant } from './types';\r\n\r\n/**\r\n * Get SMIL animation element for math icons\r\n */\r\nexport function getMathAnimation(\r\n animation: MathIconAnimation,\r\n duration: number = 1000,\r\n): ReactElement | null {\r\n const dur = `${duration}ms`;\r\n\r\n switch (animation) {\r\n case 'pulse':\r\n return (\r\n <animate attributeName=\"opacity\" values=\"1;0.5;1\" dur={dur} repeatCount=\"indefinite\" />\r\n );\r\n case 'grow':\r\n return (\r\n <animateTransform\r\n attributeName=\"transform\"\r\n type=\"scale\"\r\n values=\"1;1.2;1\"\r\n dur={dur}\r\n repeatCount=\"indefinite\"\r\n />\r\n );\r\n case 'shake':\r\n return (\r\n <animateTransform\r\n attributeName=\"transform\"\r\n type=\"translate\"\r\n values=\"0,0;-2,0;2,0;0,0\"\r\n dur={dur}\r\n repeatCount=\"indefinite\"\r\n />\r\n );\r\n case 'spin':\r\n return (\r\n <animateTransform\r\n attributeName=\"transform\"\r\n type=\"rotate\"\r\n values=\"0 12 12;360 12 12\"\r\n dur={dur}\r\n repeatCount=\"indefinite\"\r\n />\r\n );\r\n case 'bounce':\r\n return (\r\n <animateTransform\r\n attributeName=\"transform\"\r\n type=\"translate\"\r\n values=\"0,0;0,-3;0,0\"\r\n dur={dur}\r\n repeatCount=\"indefinite\"\r\n />\r\n );\r\n case 'fade':\r\n return <animate attributeName=\"opacity\" values=\"0;1;0\" dur={dur} repeatCount=\"indefinite\" />;\r\n case 'flip':\r\n return (\r\n <animateTransform\r\n attributeName=\"transform\"\r\n type=\"rotate\"\r\n values=\"0 12 12;180 12 12;360 12 12\"\r\n dur={dur}\r\n repeatCount=\"indefinite\"\r\n />\r\n );\r\n case 'slide':\r\n return (\r\n <animateTransform\r\n attributeName=\"transform\"\r\n type=\"translate\"\r\n values=\"-5,0;5,0;-5,0\"\r\n dur={dur}\r\n repeatCount=\"indefinite\"\r\n />\r\n );\r\n case 'glow':\r\n return (\r\n <>\r\n <animate\r\n attributeName=\"filter\"\r\n values=\"drop-shadow(0 0 2px currentColor);drop-shadow(0 0 8px currentColor);drop-shadow(0 0 2px currentColor)\"\r\n dur={dur}\r\n repeatCount=\"indefinite\"\r\n />\r\n </>\r\n );\r\n default:\r\n return null;\r\n }\r\n}\r\n\r\n/**\r\n * Factory function to create math icons\r\n */\r\nexport function createMathIcon(name: string, path: string | ReactElement, defaultColor?: string) {\r\n const MathIcon = ({\r\n size = 24,\r\n color = defaultColor || 'currentColor',\r\n secondaryColor,\r\n variant = 'filled',\r\n animation,\r\n animationDuration = 1000,\r\n title,\r\n desc,\r\n className,\r\n style,\r\n ...props\r\n }: MathIconProps): ReactElement => {\r\n const iconId = `math-icon-${name.toLowerCase()}-${Math.random().toString(36).substr(2, 9)}`;\r\n\r\n const getVariantStyles = (v: MathIconVariant) => {\r\n switch (v) {\r\n case 'outlined':\r\n return {\r\n fill: 'none',\r\n stroke: color,\r\n strokeWidth: 1.5,\r\n };\r\n case 'duotone':\r\n return {\r\n fill: color,\r\n opacity: 0.5,\r\n };\r\n case 'filled':\r\n default:\r\n return {\r\n fill: color,\r\n };\r\n }\r\n };\r\n\r\n const variantStyles = getVariantStyles(variant);\r\n\r\n return (\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width={size}\r\n height={size}\r\n viewBox=\"0 0 24 24\"\r\n className={className}\r\n style={{ ...style, ...variantStyles }}\r\n role=\"img\"\r\n aria-labelledby={title ? `${iconId}-title` : undefined}\r\n aria-describedby={desc ? `${iconId}-desc` : undefined}\r\n {...props}\r\n >\r\n {title && <title id={`${iconId}-title`}>{title}</title>}\r\n {desc && <desc id={`${iconId}-desc`}>{desc}</desc>}\r\n <g style={variantStyles}>\r\n {typeof path === 'string' ? <path d={path} /> : path}\r\n {animation && getMathAnimation(animation, animationDuration)}\r\n </g>\r\n {variant === 'duotone' && secondaryColor && (\r\n <g style={{ fill: secondaryColor, opacity: 0.3 }}>\r\n {typeof path === 'string' ? <path d={path} /> : path}\r\n </g>\r\n )}\r\n </svg>\r\n );\r\n };\r\n\r\n MathIcon.displayName = name;\r\n return MathIcon;\r\n}\r\n"],"names":[],"mappings":"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"}
@@ -0,0 +1,156 @@
1
+ "use strict";
2
+ const jsxRuntime = require("react/jsx-runtime");
3
+ function getMathAnimation(animation, duration = 1e3) {
4
+ const dur = `${duration}ms`;
5
+ switch (animation) {
6
+ case "pulse":
7
+ return /* @__PURE__ */ jsxRuntime.jsx("animate", { attributeName: "opacity", values: "1;0.5;1", dur, repeatCount: "indefinite" });
8
+ case "grow":
9
+ return /* @__PURE__ */ jsxRuntime.jsx(
10
+ "animateTransform",
11
+ {
12
+ attributeName: "transform",
13
+ type: "scale",
14
+ values: "1;1.2;1",
15
+ dur,
16
+ repeatCount: "indefinite"
17
+ }
18
+ );
19
+ case "shake":
20
+ return /* @__PURE__ */ jsxRuntime.jsx(
21
+ "animateTransform",
22
+ {
23
+ attributeName: "transform",
24
+ type: "translate",
25
+ values: "0,0;-2,0;2,0;0,0",
26
+ dur,
27
+ repeatCount: "indefinite"
28
+ }
29
+ );
30
+ case "spin":
31
+ return /* @__PURE__ */ jsxRuntime.jsx(
32
+ "animateTransform",
33
+ {
34
+ attributeName: "transform",
35
+ type: "rotate",
36
+ values: "0 12 12;360 12 12",
37
+ dur,
38
+ repeatCount: "indefinite"
39
+ }
40
+ );
41
+ case "bounce":
42
+ return /* @__PURE__ */ jsxRuntime.jsx(
43
+ "animateTransform",
44
+ {
45
+ attributeName: "transform",
46
+ type: "translate",
47
+ values: "0,0;0,-3;0,0",
48
+ dur,
49
+ repeatCount: "indefinite"
50
+ }
51
+ );
52
+ case "fade":
53
+ return /* @__PURE__ */ jsxRuntime.jsx("animate", { attributeName: "opacity", values: "0;1;0", dur, repeatCount: "indefinite" });
54
+ case "flip":
55
+ return /* @__PURE__ */ jsxRuntime.jsx(
56
+ "animateTransform",
57
+ {
58
+ attributeName: "transform",
59
+ type: "rotate",
60
+ values: "0 12 12;180 12 12;360 12 12",
61
+ dur,
62
+ repeatCount: "indefinite"
63
+ }
64
+ );
65
+ case "slide":
66
+ return /* @__PURE__ */ jsxRuntime.jsx(
67
+ "animateTransform",
68
+ {
69
+ attributeName: "transform",
70
+ type: "translate",
71
+ values: "-5,0;5,0;-5,0",
72
+ dur,
73
+ repeatCount: "indefinite"
74
+ }
75
+ );
76
+ case "glow":
77
+ return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
78
+ "animate",
79
+ {
80
+ attributeName: "filter",
81
+ values: "drop-shadow(0 0 2px currentColor);drop-shadow(0 0 8px currentColor);drop-shadow(0 0 2px currentColor)",
82
+ dur,
83
+ repeatCount: "indefinite"
84
+ }
85
+ ) });
86
+ default:
87
+ return null;
88
+ }
89
+ }
90
+ function createMathIcon(name, path, defaultColor) {
91
+ const MathIcon = ({
92
+ size = 24,
93
+ color = defaultColor || "currentColor",
94
+ secondaryColor,
95
+ variant = "filled",
96
+ animation,
97
+ animationDuration = 1e3,
98
+ title,
99
+ desc,
100
+ className,
101
+ style,
102
+ ...props
103
+ }) => {
104
+ const iconId = `math-icon-${name.toLowerCase()}-${Math.random().toString(36).substr(2, 9)}`;
105
+ const getVariantStyles = (v) => {
106
+ switch (v) {
107
+ case "outlined":
108
+ return {
109
+ fill: "none",
110
+ stroke: color,
111
+ strokeWidth: 1.5
112
+ };
113
+ case "duotone":
114
+ return {
115
+ fill: color,
116
+ opacity: 0.5
117
+ };
118
+ case "filled":
119
+ default:
120
+ return {
121
+ fill: color
122
+ };
123
+ }
124
+ };
125
+ const variantStyles = getVariantStyles(variant);
126
+ return /* @__PURE__ */ jsxRuntime.jsxs(
127
+ "svg",
128
+ {
129
+ xmlns: "http://www.w3.org/2000/svg",
130
+ width: size,
131
+ height: size,
132
+ viewBox: "0 0 24 24",
133
+ className,
134
+ style: { ...style, ...variantStyles },
135
+ role: "img",
136
+ "aria-labelledby": title ? `${iconId}-title` : void 0,
137
+ "aria-describedby": desc ? `${iconId}-desc` : void 0,
138
+ ...props,
139
+ children: [
140
+ title && /* @__PURE__ */ jsxRuntime.jsx("title", { id: `${iconId}-title`, children: title }),
141
+ desc && /* @__PURE__ */ jsxRuntime.jsx("desc", { id: `${iconId}-desc`, children: desc }),
142
+ /* @__PURE__ */ jsxRuntime.jsxs("g", { style: variantStyles, children: [
143
+ typeof path === "string" ? /* @__PURE__ */ jsxRuntime.jsx("path", { d: path }) : path,
144
+ animation && getMathAnimation(animation, animationDuration)
145
+ ] }),
146
+ variant === "duotone" && secondaryColor && /* @__PURE__ */ jsxRuntime.jsx("g", { style: { fill: secondaryColor, opacity: 0.3 }, children: typeof path === "string" ? /* @__PURE__ */ jsxRuntime.jsx("path", { d: path }) : path })
147
+ ]
148
+ }
149
+ );
150
+ };
151
+ MathIcon.displayName = name;
152
+ return MathIcon;
153
+ }
154
+ exports.createMathIcon = createMathIcon;
155
+ exports.getMathAnimation = getMathAnimation;
156
+ //# sourceMappingURL=createMathIcon-CK9tbq5-.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"createMathIcon-CK9tbq5-.js","sources":["../src/createMathIcon.tsx"],"sourcesContent":["import React, { type ReactElement } from 'react';\r\n\r\nimport type { MathIconProps, MathIconAnimation, MathIconVariant } from './types';\r\n\r\n/**\r\n * Get SMIL animation element for math icons\r\n */\r\nexport function getMathAnimation(\r\n animation: MathIconAnimation,\r\n duration: number = 1000,\r\n): ReactElement | null {\r\n const dur = `${duration}ms`;\r\n\r\n switch (animation) {\r\n case 'pulse':\r\n return (\r\n <animate attributeName=\"opacity\" values=\"1;0.5;1\" dur={dur} repeatCount=\"indefinite\" />\r\n );\r\n case 'grow':\r\n return (\r\n <animateTransform\r\n attributeName=\"transform\"\r\n type=\"scale\"\r\n values=\"1;1.2;1\"\r\n dur={dur}\r\n repeatCount=\"indefinite\"\r\n />\r\n );\r\n case 'shake':\r\n return (\r\n <animateTransform\r\n attributeName=\"transform\"\r\n type=\"translate\"\r\n values=\"0,0;-2,0;2,0;0,0\"\r\n dur={dur}\r\n repeatCount=\"indefinite\"\r\n />\r\n );\r\n case 'spin':\r\n return (\r\n <animateTransform\r\n attributeName=\"transform\"\r\n type=\"rotate\"\r\n values=\"0 12 12;360 12 12\"\r\n dur={dur}\r\n repeatCount=\"indefinite\"\r\n />\r\n );\r\n case 'bounce':\r\n return (\r\n <animateTransform\r\n attributeName=\"transform\"\r\n type=\"translate\"\r\n values=\"0,0;0,-3;0,0\"\r\n dur={dur}\r\n repeatCount=\"indefinite\"\r\n />\r\n );\r\n case 'fade':\r\n return <animate attributeName=\"opacity\" values=\"0;1;0\" dur={dur} repeatCount=\"indefinite\" />;\r\n case 'flip':\r\n return (\r\n <animateTransform\r\n attributeName=\"transform\"\r\n type=\"rotate\"\r\n values=\"0 12 12;180 12 12;360 12 12\"\r\n dur={dur}\r\n repeatCount=\"indefinite\"\r\n />\r\n );\r\n case 'slide':\r\n return (\r\n <animateTransform\r\n attributeName=\"transform\"\r\n type=\"translate\"\r\n values=\"-5,0;5,0;-5,0\"\r\n dur={dur}\r\n repeatCount=\"indefinite\"\r\n />\r\n );\r\n case 'glow':\r\n return (\r\n <>\r\n <animate\r\n attributeName=\"filter\"\r\n values=\"drop-shadow(0 0 2px currentColor);drop-shadow(0 0 8px currentColor);drop-shadow(0 0 2px currentColor)\"\r\n dur={dur}\r\n repeatCount=\"indefinite\"\r\n />\r\n </>\r\n );\r\n default:\r\n return null;\r\n }\r\n}\r\n\r\n/**\r\n * Factory function to create math icons\r\n */\r\nexport function createMathIcon(name: string, path: string | ReactElement, defaultColor?: string) {\r\n const MathIcon = ({\r\n size = 24,\r\n color = defaultColor || 'currentColor',\r\n secondaryColor,\r\n variant = 'filled',\r\n animation,\r\n animationDuration = 1000,\r\n title,\r\n desc,\r\n className,\r\n style,\r\n ...props\r\n }: MathIconProps): ReactElement => {\r\n const iconId = `math-icon-${name.toLowerCase()}-${Math.random().toString(36).substr(2, 9)}`;\r\n\r\n const getVariantStyles = (v: MathIconVariant) => {\r\n switch (v) {\r\n case 'outlined':\r\n return {\r\n fill: 'none',\r\n stroke: color,\r\n strokeWidth: 1.5,\r\n };\r\n case 'duotone':\r\n return {\r\n fill: color,\r\n opacity: 0.5,\r\n };\r\n case 'filled':\r\n default:\r\n return {\r\n fill: color,\r\n };\r\n }\r\n };\r\n\r\n const variantStyles = getVariantStyles(variant);\r\n\r\n return (\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width={size}\r\n height={size}\r\n viewBox=\"0 0 24 24\"\r\n className={className}\r\n style={{ ...style, ...variantStyles }}\r\n role=\"img\"\r\n aria-labelledby={title ? `${iconId}-title` : undefined}\r\n aria-describedby={desc ? `${iconId}-desc` : undefined}\r\n {...props}\r\n >\r\n {title && <title id={`${iconId}-title`}>{title}</title>}\r\n {desc && <desc id={`${iconId}-desc`}>{desc}</desc>}\r\n <g style={variantStyles}>\r\n {typeof path === 'string' ? <path d={path} /> : path}\r\n {animation && getMathAnimation(animation, animationDuration)}\r\n </g>\r\n {variant === 'duotone' && secondaryColor && (\r\n <g style={{ fill: secondaryColor, opacity: 0.3 }}>\r\n {typeof path === 'string' ? <path d={path} /> : path}\r\n </g>\r\n )}\r\n </svg>\r\n );\r\n };\r\n\r\n MathIcon.displayName = name;\r\n return MathIcon;\r\n}\r\n"],"names":["jsx","Fragment","jsxs"],"mappings":"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"}
@@ -0,0 +1,14 @@
1
+ import { ReactElement } from 'react';
2
+ import { MathIconProps, MathIconAnimation } from './types';
3
+ /**
4
+ * Get SMIL animation element for math icons
5
+ */
6
+ export declare function getMathAnimation(animation: MathIconAnimation, duration?: number): ReactElement | null;
7
+ /**
8
+ * Factory function to create math icons
9
+ */
10
+ export declare function createMathIcon(name: string, path: string | ReactElement, defaultColor?: string): {
11
+ ({ size, color, secondaryColor, variant, animation, animationDuration, title, desc, className, style, ...props }: MathIconProps): ReactElement;
12
+ displayName: string;
13
+ };
14
+ //# sourceMappingURL=createMathIcon.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"createMathIcon.d.ts","sourceRoot":"","sources":["../src/createMathIcon.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAmB,MAAM,SAAS,CAAC;AAEjF;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,SAAS,EAAE,iBAAiB,EAC5B,QAAQ,GAAE,MAAa,GACtB,YAAY,GAAG,IAAI,CAoFrB;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,YAAY,EAAE,YAAY,CAAC,EAAE,MAAM;sHAa1F,aAAa,GAAG,YAAY;;EAwDhC"}