@ttoss/react-icons 0.4.17 → 0.5.0

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 (2) hide show
  1. package/README.md +70 -115
  2. package/package.json +8 -8
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @ttoss/react-icons
2
2
 
3
- React icon library built on [Iconify](https://iconify.design/) with 200,000+ open source icons. Provides seamless integration with [@ttoss/ui](https://ttoss.dev/docs/modules/packages/ui) components and theme system.
3
+ Access 200,000+ open source icons through [Iconify](https://iconify.design/) with seamless [@ttoss/ui](https://ttoss.dev/docs/modules/packages/ui) integration.
4
4
 
5
5
  ## Installation
6
6
 
@@ -10,164 +10,119 @@ pnpm add @ttoss/react-icons
10
10
 
11
11
  ## Quick Start
12
12
 
13
- ### Basic Usage
14
-
15
13
  ```tsx
16
14
  import { Icon } from '@ttoss/react-icons';
17
15
 
18
- export const Example = () => (
19
- <Icon icon="mdi-light:alarm-panel" style={{ color: 'red' }} width={24} />
20
- );
21
- ```
22
-
23
- ### With Theme Integration
24
-
25
- ```tsx
26
- import { Icon } from '@ttoss/react-icons';
27
- import { Box } from '@ttoss/ui';
16
+ // Basic usage
17
+ <Icon icon="mdi:home" width={24} />
28
18
 
29
- export const ThemedIcon = () => (
30
- <Box sx={{ color: 'primary' }}>
31
- <Icon icon="heroicons:heart-solid" width={32} />
32
- </Box>
33
- );
19
+ // With theme colors
20
+ <Box sx={{ color: 'primary' }}>
21
+ <Icon icon="heroicons:heart-solid" width={32} />
22
+ </Box>
34
23
  ```
35
24
 
36
- ## Available Icons
37
-
38
- Access 200,000+ icons from popular icon sets:
39
-
40
- - **Material Design Icons**: `mdi:*` (e.g., `mdi:home`, `mdi:user`)
41
- - **Heroicons**: `heroicons:*` (e.g., `heroicons:heart-solid`)
42
- - **Tabler Icons**: `tabler:*` (e.g., `tabler:settings`)
43
- - **Feather Icons**: `feather:*` (e.g., `feather:search`)
44
- - **Bootstrap Icons**: `bi:*` (e.g., `bi:github`)
45
- - **Font Awesome**: `fa:*`, `fa-solid:*`, `fa-brands:*`
46
-
47
- **Browse all icons**: [Iconify Icon Sets](https://icon-sets.iconify.design/)
25
+ ## Finding Icons
48
26
 
49
- ## API Reference
27
+ Browse and search [200,000+ icons](https://icon-sets.iconify.design/) from popular sets:
50
28
 
51
- ### `<Icon>` Component
29
+ - **Material Design**: `mdi:home`, `mdi:user`
30
+ - **Heroicons**: `heroicons:heart-solid`
31
+ - **Tabler**: `tabler:settings`
32
+ - **Feather**: `feather:search`
33
+ - **Bootstrap**: `bi:github`
34
+ - **Font Awesome**: `fa-solid:arrow-right`
52
35
 
53
- ```tsx
54
- interface IconProps {
55
- icon: string; // Icon name (e.g., "mdi:home")
56
- width?: number | string; // Icon width
57
- height?: number | string; // Icon height
58
- style?: CSSProperties; // Custom CSS styles
59
- color?: string; // Icon color
60
- rotate?: number; // Rotation angle
61
- flip?: 'horizontal' | 'vertical'; // Flip direction
62
- }
63
- ```
36
+ ## Custom Icons
64
37
 
65
- ### Basic Examples
38
+ Add your own SVG icons using `addIcon`:
66
39
 
67
40
  ```tsx
68
- // Different sizes
69
- <Icon icon="mdi:home" width={16} />
70
- <Icon icon="mdi:home" width={24} />
71
- <Icon icon="mdi:home" width={32} />
41
+ import { addIcon, Icon } from '@ttoss/react-icons';
72
42
 
73
- // Colors and styling
74
- <Icon icon="heroicons:heart-solid" style={{ color: '#ff6b6b' }} />
75
- <Icon icon="tabler:star" color="gold" />
43
+ // Register once (e.g., in app initialization)
44
+ addIcon('company-logo', {
45
+ body: '<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>',
46
+ width: 24,
47
+ height: 24,
48
+ });
76
49
 
77
- // Transformations
78
- <Icon icon="mdi:arrow-right" rotate={90} />
79
- <Icon icon="mdi:arrow-right" flip="horizontal" />
50
+ // Use anywhere
51
+ <Icon icon="company-logo" width={32} />;
80
52
  ```
81
53
 
82
- ## Custom Icons
83
-
84
- ### Adding Custom Icons
54
+ ## API
85
55
 
86
- Extend the library with your own SVG icons using `addIcon`:
56
+ ### Icon Props
87
57
 
88
58
  ```tsx
89
- import { Icon, addIcon, type IconType } from '@ttoss/react-icons';
90
-
91
- const customSearchIcon: IconType = {
92
- body: `<path d="M15.8053 15.8013L21 21M10.5 7.5V13.5M7.5 10.5H13.5M18 10.5C18 14.6421 14.6421 18 10.5 18C6.35786 18 3 14.6421 3 10.5C3 6.35786 6.35786 3 10.5 3C14.6421 3 18 6.35786 18 10.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>`,
93
- width: 24,
94
- height: 24,
95
- viewBox: '0 0 24 24',
96
- };
97
-
98
- // Register custom icon
99
- addIcon('custom-search', customSearchIcon);
100
-
101
- // Use custom icon
102
- export const CustomIconExample = () => <Icon icon="custom-search" width={24} />;
59
+ interface IconProps {
60
+ icon: string; // Icon name (e.g., "mdi:home")
61
+ width?: number | string; // Size (default: 1em)
62
+ height?: number | string; // Height (defaults to width)
63
+ color?: string; // Override color
64
+ rotate?: number; // Rotation degrees
65
+ flip?: 'horizontal' | 'vertical';
66
+ }
103
67
  ```
104
68
 
105
- ### Custom Icon Properties
69
+ ### IconType
106
70
 
107
71
  ```tsx
108
72
  interface IconType {
109
- body: string; // SVG path/content (without <svg> wrapper)
73
+ body: string; // SVG content (without <svg> wrapper)
110
74
  width?: number; // Default width
111
75
  height?: number; // Default height
112
- viewBox?: string; // SVG viewBox attribute
76
+ viewBox?: string; // SVG viewBox
113
77
  }
114
78
  ```
115
79
 
116
80
  ## Theme Integration
117
81
 
118
- ### Using with ttoss Design System
119
-
120
- Icons automatically inherit colors from the theme context:
82
+ Icons inherit color from parent theme context:
121
83
 
122
84
  ```tsx
123
- import { Icon } from '@ttoss/react-icons';
124
- import { Box, Text } from '@ttoss/ui';
125
-
126
- export const ThemedIcons = () => (
127
- <Box sx={{ color: 'primary' }}>
128
- <Text sx={{ display: 'flex', alignItems: 'center', gap: 'sm' }}>
129
- <Icon icon="mdi:check-circle" width={20} />
130
- Success message
131
- </Text>
132
- </Box>
133
- );
85
+ // Inherits primary color
86
+ <Box sx={{ color: 'primary' }}>
87
+ <Icon icon="mdi:star" width={24} />
88
+ </Box>
89
+
90
+ // Inherits error color
91
+ <Text sx={{ color: 'error' }}>
92
+ <Icon icon="mdi:alert" width={16} />
93
+ Error message
94
+ </Text>
134
95
  ```
135
96
 
136
- ### Responsive Icon Sizes
97
+ Responsive sizing:
137
98
 
138
99
  ```tsx
139
- export const ResponsiveIcon = () => (
140
- <Icon
141
- icon="mdi:menu"
142
- width={[16, 20, 24]} // Responsive sizes
143
- style={{ color: 'currentColor' }}
144
- />
145
- );
100
+ <Icon icon="mdi:menu" width={[16, 20, 24]} />
146
101
  ```
147
102
 
148
103
  ## Performance
149
104
 
150
- ### Automatic Optimization
105
+ - **On-demand loading**: Only requested icons are bundled
106
+ - **SVG rendering**: Direct SVG for optimal performance
107
+ - **No network requests**: Icons embedded in bundle
108
+ - **Tree-shakeable**: Unused icons eliminated automatically
151
109
 
152
- - **Bundle optimization**: Only requested icons are included in the bundle
153
- - **SVG rendering**: Direct SVG rendering for optimal performance
154
- - **No external dependencies**: Icons are embedded, no network requests
110
+ ## TypeScript
155
111
 
156
- ### Best Practices
112
+ Full type safety with `IconType` for custom icons and all props:
157
113
 
158
- - Use consistent icon sizes throughout your application
159
- - Leverage theme colors instead of hardcoded values
160
- - Batch icon registrations for custom icons
161
-
162
- ## Integration
114
+ ```tsx
115
+ import type { IconType, IconProps } from '@ttoss/react-icons';
163
116
 
164
- - **Design System**: Seamlessly integrates with [ttoss Design System](https://ttoss.dev/docs/design/design-system)
165
- - **Theme Support**: Respects [@ttoss/ui](https://ttoss.dev/docs/modules/packages/ui) theme colors and sizing
166
- - **TypeScript**: Full type safety for icon names and properties
167
- - **Accessibility**: Proper ARIA attributes and screen reader support
117
+ const myIcon: IconType = {
118
+ body: '<path d="..." />',
119
+ width: 24,
120
+ height: 24,
121
+ };
122
+ ```
168
123
 
169
- ## Related Resources
124
+ ## Resources
170
125
 
171
- - **[Iconify Documentation](https://docs.iconify.design/icon-components/react/)**: Complete React integration guide
172
- - **[Icon Browser](https://icon-sets.iconify.design/)**: Search and browse available icons
173
- - **[Storybook Examples](https://storybook.ttoss.dev)**: Interactive examples and usage patterns
126
+ - [Iconify Icon Sets](https://icon-sets.iconify.design/) - Search all available icons
127
+ - [Iconify React Documentation](https://docs.iconify.design/icon-components/react/) - Advanced usage
128
+ - [Storybook Examples](https://storybook.ttoss.dev/?path=/docs/react-icons-icon--docs) - Interactive demos
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ttoss/react-icons",
3
- "version": "0.4.17",
3
+ "version": "0.5.0",
4
4
  "description": "React icons library for @ttoss ecosystem",
5
5
  "license": "MIT",
6
6
  "author": "ttoss",
@@ -15,8 +15,8 @@
15
15
  "type": "module",
16
16
  "exports": {
17
17
  ".": {
18
- "import": "./dist/esm/index.js",
19
- "types": "./dist/index.d.ts"
18
+ "types": "./dist/index.d.ts",
19
+ "default": "./dist/esm/index.js"
20
20
  }
21
21
  },
22
22
  "files": [
@@ -31,12 +31,12 @@
31
31
  },
32
32
  "devDependencies": {
33
33
  "@types/jest": "^30.0.0",
34
- "@types/react": "^19.1.8",
35
- "jest": "^30.0.4",
36
- "react": "^19.1.0",
34
+ "@types/react": "^19.2.2",
35
+ "jest": "^30.2.0",
36
+ "react": "^19.2.0",
37
37
  "tsup": "^8.5.0",
38
- "@ttoss/config": "^1.35.8",
39
- "@ttoss/test-utils": "^2.1.28"
38
+ "@ttoss/config": "^1.35.9",
39
+ "@ttoss/test-utils": "^3.0.1"
40
40
  },
41
41
  "keywords": [
42
42
  "Icons",