@ttoss/react-icons 0.4.12 → 0.4.14

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 +138 -46
  2. package/package.json +4 -4
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @ttoss/react-icons
2
2
 
3
- **@ttoss/react-icons** is a library of icons for React applications based on [Iconify](https://iconify.design/).
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.
4
4
 
5
5
  ## Installation
6
6
 
@@ -8,74 +8,166 @@
8
8
  pnpm add @ttoss/react-icons
9
9
  ```
10
10
 
11
- ## Quickstart
11
+ ## Quick Start
12
+
13
+ ### Basic Usage
12
14
 
13
15
  ```tsx
14
16
  import { Icon } from '@ttoss/react-icons';
15
17
 
16
- export const IconExample = () => {
17
- return (
18
- <Icon icon="mdi-light:alarm-panel" style={{ color: 'red' }} width={100} />
19
- );
20
- };
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';
28
+
29
+ export const ThemedIcon = () => (
30
+ <Box sx={{ color: 'primary' }}>
31
+ <Icon icon="heroicons:heart-solid" width={32} />
32
+ </Box>
33
+ );
21
34
  ```
22
35
 
23
- ## API
36
+ ## Available Icons
24
37
 
25
- ### Icons
38
+ Access 200,000+ icons from popular icon sets:
26
39
 
27
- Our icon module is powered by [Iconify](https://iconify.design/), as this have an awesome open source icon collection.
28
- To use it, just import `Icon` and start using. The styling is maded the same as Iconify and all his icons are available for using.
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:*`
29
46
 
30
- Please refer to our storybook to see some examples of use.
47
+ **Browse all icons**: [Iconify Icon Sets](https://icon-sets.iconify.design/)
31
48
 
32
- Please, refer to [Iconify docs](https://docs.iconify.design/icon-components/react/) for the parameters and more control over icons
49
+ ## API Reference
50
+
51
+ ### `<Icon>` Component
33
52
 
34
53
  ```tsx
35
- import { Icon } from '@ttoss/react-icons';
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
64
 
37
- export const IconExample = () => {
38
- return (
39
- <Icon icon="mdi-light:alarm-panel" style={{ color: 'red' }} width={100} />
40
- );
41
- };
65
+ ### Basic Examples
66
+
67
+ ```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} />
72
+
73
+ // Colors and styling
74
+ <Icon icon="heroicons:heart-solid" style={{ color: '#ff6b6b' }} />
75
+ <Icon icon="tabler:star" color="gold" />
76
+
77
+ // Transformations
78
+ <Icon icon="mdi:arrow-right" rotate={90} />
79
+ <Icon icon="mdi:arrow-right" flip="horizontal" />
42
80
  ```
43
81
 
44
- ### addIcon
82
+ ## Custom Icons
83
+
84
+ ### Adding Custom Icons
45
85
 
46
- You can add your own icons to the library using `addIcon` function. This function receives the name of the icon and the icon object.
86
+ Extend the library with your own SVG icons using `addIcon`:
47
87
 
48
88
  ```tsx
49
89
  import { Icon, addIcon, type IconType } from '@ttoss/react-icons';
50
90
 
51
91
  const customSearchIcon: IconType = {
52
- body: `<svg xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" fill="none">
53
- <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"/>
54
- </svg>`,
55
- width: 48,
56
- height: 48,
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',
57
96
  };
58
97
 
98
+ // Register custom icon
59
99
  addIcon('custom-search', customSearchIcon);
60
100
 
61
- export const CustomIcon = () => {
62
- return (
63
- <Flex sx={{ gap: 'lg', flexWrap: 'wrap' }}>
64
- <Flex
65
- sx={{
66
- flexDirection: 'column',
67
- alignItems: 'center',
68
- width: '120px',
69
- gap: 'md',
70
- }}
71
- >
72
- <Text sx={{ fontSize: '3xl', color: 'primary' }}>
73
- <Icon icon="custom-search" />
74
- </Text>
75
-
76
- <Text sx={{ textAlign: 'center' }}>custom-search</Text>
77
- </Flex>
78
- </Flex>
79
- );
80
- };
101
+ // Use custom icon
102
+ export const CustomIconExample = () => <Icon icon="custom-search" width={24} />;
103
+ ```
104
+
105
+ ### Custom Icon Properties
106
+
107
+ ```tsx
108
+ interface IconType {
109
+ body: string; // SVG path/content (without <svg> wrapper)
110
+ width?: number; // Default width
111
+ height?: number; // Default height
112
+ viewBox?: string; // SVG viewBox attribute
113
+ }
81
114
  ```
115
+
116
+ ## Theme Integration
117
+
118
+ ### Using with ttoss Design System
119
+
120
+ Icons automatically inherit colors from the theme context:
121
+
122
+ ```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
+ );
134
+ ```
135
+
136
+ ### Responsive Icon Sizes
137
+
138
+ ```tsx
139
+ export const ResponsiveIcon = () => (
140
+ <Icon
141
+ icon="mdi:menu"
142
+ width={[16, 20, 24]} // Responsive sizes
143
+ style={{ color: 'currentColor' }}
144
+ />
145
+ );
146
+ ```
147
+
148
+ ## Performance
149
+
150
+ ### Automatic Optimization
151
+
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
155
+
156
+ ### Best Practices
157
+
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
163
+
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
168
+
169
+ ## Related Resources
170
+
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
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ttoss/react-icons",
3
- "version": "0.4.12",
3
+ "version": "0.4.14",
4
4
  "description": "React icons library for @ttoss ecosystem",
5
5
  "license": "MIT",
6
6
  "author": "ttoss",
@@ -32,11 +32,11 @@
32
32
  "devDependencies": {
33
33
  "@types/jest": "^30.0.0",
34
34
  "@types/react": "^19.1.8",
35
- "jest": "^30.0.2",
35
+ "jest": "^30.0.4",
36
36
  "react": "^19.1.0",
37
37
  "tsup": "^8.5.0",
38
- "@ttoss/config": "^1.35.4",
39
- "@ttoss/test-utils": "^2.1.24"
38
+ "@ttoss/config": "^1.35.5",
39
+ "@ttoss/test-utils": "^2.1.25"
40
40
  },
41
41
  "keywords": [
42
42
  "Icons",