@mt-gloss/icons 0.0.3
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 +164 -0
- package/index.d.ts +4 -0
- package/index.js +294 -0
- package/lib/icon.d.ts +26 -0
- package/lib/sprite-provider.d.ts +26 -0
- package/package.json +25 -0
package/README.md
ADDED
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
# @mt-gloss/icons
|
|
2
|
+
|
|
3
|
+
A scalable SVG icon library for the Gloss UI design system. Icons are compiled into a single sprite for optimal performance and can be styled via CSS using `currentColor`.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @mt-gloss/icons
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Peer Dependencies
|
|
12
|
+
|
|
13
|
+
- react ^18 || ^19
|
|
14
|
+
- react-dom ^18 || ^19
|
|
15
|
+
|
|
16
|
+
## Usage
|
|
17
|
+
|
|
18
|
+
### Basic Setup
|
|
19
|
+
|
|
20
|
+
Wrap your application with the `SpriteProvider` to inject the icon sprite into the DOM:
|
|
21
|
+
|
|
22
|
+
```tsx
|
|
23
|
+
import { SpriteProvider } from '@mt-gloss/icons';
|
|
24
|
+
|
|
25
|
+
function App() {
|
|
26
|
+
return (
|
|
27
|
+
<SpriteProvider>
|
|
28
|
+
<YourApp />
|
|
29
|
+
</SpriteProvider>
|
|
30
|
+
);
|
|
31
|
+
}
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
### Using Icons
|
|
35
|
+
|
|
36
|
+
```tsx
|
|
37
|
+
import { Icon } from '@mt-gloss/icons';
|
|
38
|
+
|
|
39
|
+
function MyComponent() {
|
|
40
|
+
return (
|
|
41
|
+
<div>
|
|
42
|
+
<Icon name="check" size="md" />
|
|
43
|
+
<Icon name="chevron-down" size="lg" className="text-blue-500" />
|
|
44
|
+
<Icon name="close" size="sm" />
|
|
45
|
+
</div>
|
|
46
|
+
);
|
|
47
|
+
}
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
## Available Icons
|
|
51
|
+
|
|
52
|
+
The library includes 27 icons extracted from the Gloss UI design system:
|
|
53
|
+
|
|
54
|
+
- `alert-circle` - Alert/warning indicator
|
|
55
|
+
- `book` - Documentation/reading
|
|
56
|
+
- `check` - Checkmark/success
|
|
57
|
+
- `check-square` - Checkbox checked
|
|
58
|
+
- `chevron-down` - Dropdown indicator
|
|
59
|
+
- `chevron-left` - Navigation arrow
|
|
60
|
+
- `close` - Close/dismiss
|
|
61
|
+
- `credit-card` - Payment
|
|
62
|
+
- `droplet` - Color/theme
|
|
63
|
+
- `grid` - Spacing/layout
|
|
64
|
+
- `hash` - Tag/categorization
|
|
65
|
+
- `home` - Home/dashboard
|
|
66
|
+
- `info` - Information
|
|
67
|
+
- `input` - Input field
|
|
68
|
+
- `layers` - Layers/organization
|
|
69
|
+
- `layout` - Layout/structure
|
|
70
|
+
- `lightbulb` - Ideas/tips
|
|
71
|
+
- `link` - Hyperlink
|
|
72
|
+
- `lock` - Security/password
|
|
73
|
+
- `log-in` - Authentication
|
|
74
|
+
- `menu` - Navigation menu
|
|
75
|
+
- `more-vertical` - More options
|
|
76
|
+
- `refresh` - Reload/refresh
|
|
77
|
+
- `square` - Button/control
|
|
78
|
+
- `star` - Favorite/rating
|
|
79
|
+
- `tag` - Label/tag
|
|
80
|
+
- `type` - Typography
|
|
81
|
+
|
|
82
|
+
## Icon Sizes
|
|
83
|
+
|
|
84
|
+
Available sizes with corresponding pixel dimensions:
|
|
85
|
+
|
|
86
|
+
- `sm` - 16px
|
|
87
|
+
- `md` - 20px (default)
|
|
88
|
+
- `lg` - 24px
|
|
89
|
+
- `xl` - 32px
|
|
90
|
+
|
|
91
|
+
## Styling
|
|
92
|
+
|
|
93
|
+
Icons inherit the current text color by default due to `currentColor` usage in fill/stroke:
|
|
94
|
+
|
|
95
|
+
```tsx
|
|
96
|
+
<div className="text-blue-600">
|
|
97
|
+
<Icon name="check" /> {/* Will be blue */}
|
|
98
|
+
</div>
|
|
99
|
+
|
|
100
|
+
<Icon name="close" style={{ color: '#ef4444' }} /> {/* Inline style */}
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
## Advanced Usage
|
|
104
|
+
|
|
105
|
+
### Manual Sprite Injection
|
|
106
|
+
|
|
107
|
+
For SSR or custom rendering scenarios, you can manually inject the sprite:
|
|
108
|
+
|
|
109
|
+
```tsx
|
|
110
|
+
import { spriteContent } from '@mt-gloss/icons';
|
|
111
|
+
|
|
112
|
+
// Insert sprite into the DOM
|
|
113
|
+
const div = document.createElement('div');
|
|
114
|
+
div.innerHTML = spriteContent;
|
|
115
|
+
div.style.display = 'none';
|
|
116
|
+
document.body.insertBefore(div, document.body.firstChild);
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
### Custom Icon Component
|
|
120
|
+
|
|
121
|
+
You can extend the Icon component for custom behaviors:
|
|
122
|
+
|
|
123
|
+
```tsx
|
|
124
|
+
import { Icon, IconProps } from '@mt-gloss/icons';
|
|
125
|
+
|
|
126
|
+
interface CustomIconProps extends IconProps {
|
|
127
|
+
rotate?: number;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
export function CustomIcon({ rotate = 0, style, ...props }: CustomIconProps) {
|
|
131
|
+
return (
|
|
132
|
+
<Icon
|
|
133
|
+
{...props}
|
|
134
|
+
style={{
|
|
135
|
+
...style,
|
|
136
|
+
transform: `rotate(${rotate}deg)`,
|
|
137
|
+
transition: 'transform 0.2s',
|
|
138
|
+
}}
|
|
139
|
+
/>
|
|
140
|
+
);
|
|
141
|
+
}
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
## Development
|
|
145
|
+
|
|
146
|
+
### Adding New Icons
|
|
147
|
+
|
|
148
|
+
1. Add SVG file to `src/assets/` (e.g., `new-icon.svg`)
|
|
149
|
+
2. Ensure `currentColor` is used for fills/strokes
|
|
150
|
+
3. Run the build script:
|
|
151
|
+
|
|
152
|
+
```bash
|
|
153
|
+
npm run build:sprite
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
### Building the Library
|
|
157
|
+
|
|
158
|
+
```bash
|
|
159
|
+
nx build gloss-icons
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
## License
|
|
163
|
+
|
|
164
|
+
MIT
|
package/index.d.ts
ADDED
package/index.js
ADDED
|
@@ -0,0 +1,294 @@
|
|
|
1
|
+
import { jsx as e, Fragment as t } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect as s } from "react";
|
|
3
|
+
const d = {
|
|
4
|
+
sm: 16,
|
|
5
|
+
md: 20,
|
|
6
|
+
lg: 24,
|
|
7
|
+
xl: 32
|
|
8
|
+
}, c = ({
|
|
9
|
+
name: l,
|
|
10
|
+
size: r = "md",
|
|
11
|
+
className: o = "",
|
|
12
|
+
...n
|
|
13
|
+
}) => {
|
|
14
|
+
const i = d[r];
|
|
15
|
+
return /* @__PURE__ */ e(
|
|
16
|
+
"svg",
|
|
17
|
+
{
|
|
18
|
+
width: i,
|
|
19
|
+
height: i,
|
|
20
|
+
className: o,
|
|
21
|
+
"aria-hidden": "true",
|
|
22
|
+
focusable: "false",
|
|
23
|
+
...n,
|
|
24
|
+
children: /* @__PURE__ */ e("use", { href: `#${l}` })
|
|
25
|
+
}
|
|
26
|
+
);
|
|
27
|
+
};
|
|
28
|
+
c.displayName = "Icon";
|
|
29
|
+
const h = `<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" style="display: none;">
|
|
30
|
+
<symbol id="alert-circle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
31
|
+
<circle cx="12" cy="12" r="10"/>
|
|
32
|
+
<line x1="12" y1="8" x2="12" y2="12"/>
|
|
33
|
+
<circle cx="12" cy="16" r="0.5" fill="currentColor"/>
|
|
34
|
+
</symbol>
|
|
35
|
+
|
|
36
|
+
<symbol id="amex" viewBox="0 0 32 23">
|
|
37
|
+
<path fill="#26A6D1" d="M2 0h28a2 2 0 0 1 2 2.001v19a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-19A2 2 0 0 1 2 0z"/>
|
|
38
|
+
<path fill="#fff" d="M5.16 8L2 14.993h3.783l.469-1.115h1.072l.469 1.115h4.164v-.851l.371.851h2.154l.371-.869v.869h8.66l1.053-1.086.986 1.086 4.448.009-3.17-3.486L30 8h-4.379l-1.025 1.066L23.641 8H14.22l-.809 1.805L12.583 8H8.808v.822L8.388 8H5.16zm.732.993h1.844l2.096 4.742V8.993h2.02l1.619 3.4 1.492-3.4h2.01v5.018H15.75l-.01-3.932-1.783 3.932h-1.094l-1.793-3.932v3.932H8.554l-.477-1.125H5.5l-.476 1.124H3.676l2.216-5.017zm12.2 0h4.973l1.521 1.643 1.57-1.643h1.521l-2.311 2.522 2.311 2.493h-1.59l-1.521-1.662-1.578 1.662h-4.896V8.993zm-11.303.849l-.849 2.004h1.697l-.848-2.004zm12.531.19v.916h2.713v1.021H19.32v1h3.043l1.414-1.473-1.354-1.465H19.32z"/>
|
|
39
|
+
</symbol>
|
|
40
|
+
|
|
41
|
+
<symbol id="book" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
42
|
+
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/>
|
|
43
|
+
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
|
|
44
|
+
</symbol>
|
|
45
|
+
|
|
46
|
+
<symbol id="button" viewBox="0 0 16 16" fill="currentColor">
|
|
47
|
+
<path d="M12.586,15l-3.793-3.793L7,14L5,6l8,2l-2.793,1.793L14,13.586L12.586,15z"/>
|
|
48
|
+
<path d="M4,10H1c-0.553,0-1-0.448-1-1V1c0-0.552,0.447-1,1-1h14c0.553,0,1,0.448,1,1v7h-2V2H2v6h2V10z"/>
|
|
49
|
+
</symbol>
|
|
50
|
+
|
|
51
|
+
<symbol id="card-amex" viewBox="0 0 32 23">
|
|
52
|
+
<path fill="#26A6D1" d="M2 0h28a2 2 0 0 1 2 2.001v19a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-19A2 2 0 0 1 2 0z"/>
|
|
53
|
+
<path fill="#fff" d="M5.16 8L2 14.993h3.783l.469-1.115h1.072l.469 1.115h4.164v-.851l.371.851h2.154l.371-.869v.869h8.66l1.053-1.086.986 1.086 4.448.009-3.17-3.486L30 8h-4.379l-1.025 1.066L23.641 8H14.22l-.809 1.805L12.583 8H8.808v.822L8.388 8H5.16zm.732.993h1.844l2.096 4.742V8.993h2.02l1.619 3.4 1.492-3.4h2.01v5.018H15.75l-.01-3.932-1.783 3.932h-1.094l-1.793-3.932v3.932H8.554l-.477-1.125H5.5l-.476 1.124H3.676l2.216-5.017zm12.2 0h4.973l1.521 1.643 1.57-1.643h1.521l-2.311 2.522 2.311 2.493h-1.59l-1.521-1.662-1.578 1.662h-4.896V8.993zm-11.303.849l-.849 2.004h1.697l-.848-2.004zm12.531.19v.916h2.713v1.021H19.32v1h3.043l1.414-1.473-1.354-1.465H19.32z"/>
|
|
54
|
+
</symbol>
|
|
55
|
+
|
|
56
|
+
<symbol id="card-mastercard" viewBox="0 0 32.003 20">
|
|
57
|
+
<path fill="#E2574C" d="M19.994 10c0 5.524-4.475 10-9.997 10S0 15.523 0 10 4.476 0 9.997 0s9.997 4.477 9.997 10z"/>
|
|
58
|
+
<path fill="#F4B459" d="M22.003 0a9.942 9.942 0 0 0-5.974 1.994l.008.001c.328.317.69.54.969.905l-2.08.033c-.326.329-.623.687-.903 1.059h3.668c.279.335.537.626.771.996h-5.104c-.187.322-.36.653-.511.997h6.196c.162.343.307.602.43.965H12.48a9.612 9.612 0 0 0-.278 1.058h7.564c.074.346.131.666.17.992h-7.884c-.033.329-.05.663-.05 1h7.991c0 .354-.025.682-.061 1h-7.88c.034.339.084.672.15 1h7.552c-.078.324-.168.65-.281.988h-7.016c.106.342.235.674.376.998h6.21c-.172.364-.367.655-.582.996H13.34c.202.35.425.684.667 1.004l3.684.055c-.314.377-.717.604-1.084.934.02.016-.587-.002-1.782-.021A9.963 9.963 0 0 0 22.003 20c5.523 0 10-4.477 10-10s-4.476-10-10-10z"/>
|
|
59
|
+
</symbol>
|
|
60
|
+
|
|
61
|
+
<symbol id="card-visa" viewBox="0 0 100 100">
|
|
62
|
+
<path fill="#0767B0" d="M45.6 59.2h-5.3l3.3-20.4H49z"/>
|
|
63
|
+
<path fill="#0767B0" d="M77.6 59.2h4.9l-4.3-20.4H74c-2 0-2.5 1.5-2.5 1.5l-7.9 18.9h5.5l1.1-3H77l.6 3zM71.8 52l2.8-7.6 1.6 7.6h-4.4z"/>
|
|
64
|
+
<path fill="#0767B0" d="M64 43.7l.8-4.4s-2.3-.9-4.8-.9c-2.6 0-8.9 1.2-8.9 6.8 0 5.3 7.3 5.3 7.3 8.1s-6.6 2.3-8.8.5l-.8 4.6s2.4 1.2 6 1.2 9.1-1.9 9.1-7c0-5.3-7.4-5.8-7.4-8.1.1-2.4 5.3-2.1 7.5-.8z"/>
|
|
65
|
+
<path fill="#0767B0" d="M35.9 38.8l-5.1 14-.6-3s-1.2-3.7-4.9-6.7c-.8-.6-1.6-1.1-2.3-1.6l4.6 17.7h5.5l8.5-20.4h-5.7z"/>
|
|
66
|
+
<path fill="#F9A533" d="M30.3 49.8l-1.8-9.2s-.2-1.8-2.5-1.8h-8.4l-.1.3s4 .8 7.9 4c3.6 3 4.9 6.7 4.9 6.7z"/>
|
|
67
|
+
</symbol>
|
|
68
|
+
|
|
69
|
+
<symbol id="check-square" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
70
|
+
<polyline points="9 11 12 14 22 4"/>
|
|
71
|
+
<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
|
|
72
|
+
</symbol>
|
|
73
|
+
|
|
74
|
+
<symbol id="check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
75
|
+
<polyline points="20 6 9 17 4 12"/>
|
|
76
|
+
</symbol>
|
|
77
|
+
|
|
78
|
+
<symbol id="chevron-down" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
79
|
+
<polyline points="6 9 12 15 18 9"/>
|
|
80
|
+
</symbol>
|
|
81
|
+
|
|
82
|
+
<symbol id="chevron-left" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
83
|
+
<polyline points="15 18 9 12 15 6"/>
|
|
84
|
+
</symbol>
|
|
85
|
+
|
|
86
|
+
<symbol id="chevron-up" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
87
|
+
<polyline points="18 15 12 9 6 15"/>
|
|
88
|
+
</symbol>
|
|
89
|
+
|
|
90
|
+
<symbol id="close" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
91
|
+
<line x1="18" y1="6" x2="6" y2="18"/>
|
|
92
|
+
<line x1="6" y1="6" x2="18" y2="18"/>
|
|
93
|
+
</symbol>
|
|
94
|
+
|
|
95
|
+
<symbol id="consuming" viewBox="0 0 24 24" fill="currentColor">
|
|
96
|
+
<path d="M13 2.05v3.03c3.39.49 6 3.39 6 6.92 0 .9-.18 1.75-.48 2.54l2.6 1.53c.56-1.24.88-2.62.88-4.07 0-5.18-3.95-9.45-9-9.95zM12 19c-3.87 0-7-3.13-7-7 0-3.53 2.61-6.43 6-6.92V2.05c-5.06.5-9 4.76-9 9.95 0 5.52 4.47 10 9.99 10 3.31 0 6.24-1.61 8.06-4.09l-2.6-1.53A6.95 6.95 0 0 1 12 19z"/>
|
|
97
|
+
</symbol>
|
|
98
|
+
|
|
99
|
+
<symbol id="copy" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
100
|
+
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
|
|
101
|
+
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
|
|
102
|
+
</symbol>
|
|
103
|
+
|
|
104
|
+
<symbol id="credit-card" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
105
|
+
<rect x="1" y="4" width="22" height="16" rx="2" ry="2"/>
|
|
106
|
+
<line x1="1" y1="10" x2="23" y2="10"/>
|
|
107
|
+
</symbol>
|
|
108
|
+
|
|
109
|
+
<symbol id="dropdown_select" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square" stroke-linejoin="miter">
|
|
110
|
+
<polyline points="7 8 12 3 17 8"/>
|
|
111
|
+
<polyline points="17 16 12 21 7 16"/>
|
|
112
|
+
</symbol>
|
|
113
|
+
|
|
114
|
+
<symbol id="droplet" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
115
|
+
<path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"/>
|
|
116
|
+
</symbol>
|
|
117
|
+
|
|
118
|
+
<symbol id="external-link" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
119
|
+
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
|
|
120
|
+
<polyline points="15 3 21 3 21 9"/>
|
|
121
|
+
<line x1="10" y1="14" x2="21" y2="3"/>
|
|
122
|
+
</symbol>
|
|
123
|
+
|
|
124
|
+
<symbol id="grid" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
125
|
+
<path d="M5 18l14-12"/>
|
|
126
|
+
<path d="M9 6l10 10"/>
|
|
127
|
+
</symbol>
|
|
128
|
+
|
|
129
|
+
<symbol id="hash" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
130
|
+
<line x1="4" y1="9" x2="20" y2="9"/>
|
|
131
|
+
<line x1="4" y1="15" x2="20" y2="15"/>
|
|
132
|
+
<line x1="10" y1="3" x2="8" y2="21"/>
|
|
133
|
+
<line x1="16" y1="3" x2="14" y2="21"/>
|
|
134
|
+
</symbol>
|
|
135
|
+
|
|
136
|
+
<symbol id="home" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
137
|
+
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
|
|
138
|
+
<polyline points="9 22 9 12 15 12 15 22"/>
|
|
139
|
+
</symbol>
|
|
140
|
+
|
|
141
|
+
<symbol id="info" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
142
|
+
<circle cx="12" cy="12" r="10"/>
|
|
143
|
+
<line x1="12" y1="16" x2="12" y2="12"/>
|
|
144
|
+
<line x1="12" y1="8" x2="12.01" y2="8"/>
|
|
145
|
+
</symbol>
|
|
146
|
+
|
|
147
|
+
<symbol id="input" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
148
|
+
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
|
|
149
|
+
<line x1="8" y1="12" x2="16" y2="12"/>
|
|
150
|
+
</symbol>
|
|
151
|
+
|
|
152
|
+
<symbol id="layers" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
153
|
+
<path d="M12 2L2 7l10 5 10-5-10-5z"/>
|
|
154
|
+
<path d="M2 17l10 5 10-5"/>
|
|
155
|
+
<path d="M2 12l10 5 10-5"/>
|
|
156
|
+
</symbol>
|
|
157
|
+
|
|
158
|
+
<symbol id="layout" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
159
|
+
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
|
|
160
|
+
<line x1="3" y1="9" x2="21" y2="9"/>
|
|
161
|
+
<line x1="9" y1="21" x2="9" y2="9"/>
|
|
162
|
+
</symbol>
|
|
163
|
+
|
|
164
|
+
<symbol id="lightbulb" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
165
|
+
<path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/>
|
|
166
|
+
<path d="M9 18h6"/>
|
|
167
|
+
<path d="M10 22h4"/>
|
|
168
|
+
</symbol>
|
|
169
|
+
|
|
170
|
+
<symbol id="link" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
171
|
+
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
|
|
172
|
+
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
|
|
173
|
+
</symbol>
|
|
174
|
+
|
|
175
|
+
<symbol id="lock" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
176
|
+
<rect x="3" y="11" width="18" height="10" rx="2"/>
|
|
177
|
+
<path d="M7 11V7a5 5 0 0 1 10 0v4"/>
|
|
178
|
+
</symbol>
|
|
179
|
+
|
|
180
|
+
<symbol id="log-in" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
181
|
+
<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/>
|
|
182
|
+
<polyline points="10 17 15 12 10 7"/>
|
|
183
|
+
<line x1="15" y1="12" x2="3" y2="12"/>
|
|
184
|
+
</symbol>
|
|
185
|
+
|
|
186
|
+
<symbol id="map-pin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
187
|
+
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
|
|
188
|
+
<circle cx="12" cy="10" r="3"/>
|
|
189
|
+
</symbol>
|
|
190
|
+
|
|
191
|
+
<symbol id="mastercard" viewBox="0 0 32.003 20">
|
|
192
|
+
<path fill="#E2574C" d="M19.994 10c0 5.524-4.475 10-9.997 10S0 15.523 0 10 4.476 0 9.997 0s9.997 4.477 9.997 10z"/>
|
|
193
|
+
<path fill="#F4B459" d="M22.003 0a9.942 9.942 0 0 0-5.974 1.994l.008.001c.328.317.69.54.969.905l-2.08.033c-.326.329-.623.687-.903 1.059h3.668c.279.335.537.626.771.996h-5.104c-.187.322-.36.653-.511.997h6.196c.162.343.307.602.43.965H12.48a9.612 9.612 0 0 0-.278 1.058h7.564c.074.346.131.666.17.992h-7.884c-.033.329-.05.663-.05 1h7.991c0 .354-.025.682-.061 1h-7.88c.034.339.084.672.15 1h7.552c-.078.324-.168.65-.281.988h-7.016c.106.342.235.674.376.998h6.21c-.172.364-.367.655-.582.996H13.34c.202.35.425.684.667 1.004l3.684.055c-.314.377-.717.604-1.084.934.02.016-.587-.002-1.782-.021A9.963 9.963 0 0 0 22.003 20c5.523 0 10-4.477 10-10s-4.476-10-10-10z"/>
|
|
194
|
+
</symbol>
|
|
195
|
+
|
|
196
|
+
<symbol id="menu" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
197
|
+
<line x1="3" y1="12" x2="21" y2="12"/>
|
|
198
|
+
<line x1="3" y1="6" x2="21" y2="6"/>
|
|
199
|
+
<line x1="3" y1="18" x2="21" y2="18"/>
|
|
200
|
+
</symbol>
|
|
201
|
+
|
|
202
|
+
<symbol id="minus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
203
|
+
<line x1="5" y1="12" x2="19" y2="12"/>
|
|
204
|
+
</symbol>
|
|
205
|
+
|
|
206
|
+
<symbol id="modal" viewBox="0 0 16 16" fill="currentColor">
|
|
207
|
+
<path d="M14,1H2A2,2,0,0,0,0,3V13a2,2,0,0,0,2,2H14a2,2,0,0,0,2-2V3A2,2,0,0,0,14,1ZM2,3.5A.5.5,0,0,1,2.5,3h4a.5.5,0,0,1,.5.5v1a.5.5,0,0,1-.5.5h-4A.5.5,0,0,1,2,4.5ZM14,13H2V7H14Z"/>
|
|
208
|
+
</symbol>
|
|
209
|
+
|
|
210
|
+
<symbol id="more-vertical" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
211
|
+
<circle cx="12" cy="12" r="1"/>
|
|
212
|
+
<circle cx="12" cy="5" r="1"/>
|
|
213
|
+
<circle cx="12" cy="19" r="1"/>
|
|
214
|
+
</symbol>
|
|
215
|
+
|
|
216
|
+
<symbol id="plus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
217
|
+
<line x1="12" y1="5" x2="12" y2="19"/>
|
|
218
|
+
<line x1="5" y1="12" x2="19" y2="12"/>
|
|
219
|
+
</symbol>
|
|
220
|
+
|
|
221
|
+
<symbol id="radio" viewBox="0 0 16 16" fill="currentColor">
|
|
222
|
+
<circle cx="8" cy="8" r="7.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
223
|
+
<circle cx="8" cy="8" r="3.5" fill="currentColor"/>
|
|
224
|
+
</symbol>
|
|
225
|
+
|
|
226
|
+
<symbol id="refresh" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
227
|
+
<polyline points="23 4 23 10 17 10"/>
|
|
228
|
+
<path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>
|
|
229
|
+
</symbol>
|
|
230
|
+
|
|
231
|
+
<symbol id="search" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
232
|
+
<circle cx="11" cy="11" r="8"/>
|
|
233
|
+
<line x1="21" y1="21" x2="16.65" y2="16.65"/>
|
|
234
|
+
</symbol>
|
|
235
|
+
|
|
236
|
+
<symbol id="square" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
237
|
+
<rect x="3" y="11" width="18" height="10" rx="2"/>
|
|
238
|
+
<circle cx="12" cy="16" r="2"/>
|
|
239
|
+
</symbol>
|
|
240
|
+
|
|
241
|
+
<symbol id="star" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
242
|
+
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
|
|
243
|
+
</symbol>
|
|
244
|
+
|
|
245
|
+
<symbol id="tag" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
246
|
+
<path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/>
|
|
247
|
+
</symbol>
|
|
248
|
+
|
|
249
|
+
<symbol id="textarea" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square" stroke-linejoin="miter">
|
|
250
|
+
<path d="M15,2c2.209,0,4,1.791,4,4v12c0,2.209-1.791,4-4,4"/>
|
|
251
|
+
<path d="M19,18c0,2.209,1.791,4,4,4"/>
|
|
252
|
+
<path d="M23,2c-2.209,0-4,1.791-4,4"/>
|
|
253
|
+
<line x1="16" y1="15" x2="22" y2="15"/>
|
|
254
|
+
<polyline points="13 18 1 18 1 6 14 6"/>
|
|
255
|
+
</symbol>
|
|
256
|
+
|
|
257
|
+
<symbol id="toggle" viewBox="0 0 24 24" fill="currentColor">
|
|
258
|
+
<path d="M17 6H7c-3.31 0-6 2.69-6 6s2.69 6 6 6h10c3.31 0 6-2.69 6-6s-2.69-6-6-6zm0 10H7c-2.21 0-4-1.79-4-4s1.79-4 4-4h10c2.21 0 4 1.79 4 4s-1.79 4-4 4zM7 9c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
|
|
259
|
+
</symbol>
|
|
260
|
+
|
|
261
|
+
<symbol id="type" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
262
|
+
<polyline points="4 7 4 4 20 4 20 7"/>
|
|
263
|
+
<line x1="9" y1="20" x2="15" y2="20"/>
|
|
264
|
+
<line x1="12" y1="4" x2="12" y2="20"/>
|
|
265
|
+
</symbol>
|
|
266
|
+
|
|
267
|
+
<symbol id="visa" viewBox="0 0 100 100">
|
|
268
|
+
<path fill="#0767B0" d="M45.6 59.2h-5.3l3.3-20.4H49z"/>
|
|
269
|
+
<path fill="#0767B0" d="M77.6 59.2h4.9l-4.3-20.4H74c-2 0-2.5 1.5-2.5 1.5l-7.9 18.9h5.5l1.1-3H77l.6 3zM71.8 52l2.8-7.6 1.6 7.6h-4.4z"/>
|
|
270
|
+
<path fill="#0767B0" d="M64 43.7l.8-4.4s-2.3-.9-4.8-.9c-2.6 0-8.9 1.2-8.9 6.8 0 5.3 7.3 5.3 7.3 8.1s-6.6 2.3-8.8.5l-.8 4.6s2.4 1.2 6 1.2 9.1-1.9 9.1-7c0-5.3-7.4-5.8-7.4-8.1.1-2.4 5.3-2.1 7.5-.8z"/>
|
|
271
|
+
<path fill="#0767B0" d="M35.9 38.8l-5.1 14-.6-3s-1.2-3.7-4.9-6.7c-.8-.6-1.6-1.1-2.3-1.6l4.6 17.7h5.5l8.5-20.4h-5.7z"/>
|
|
272
|
+
<path fill="#F9A533" d="M30.3 49.8l-1.8-9.2s-.2-1.8-2.5-1.8h-8.4l-.1.3s4 .8 7.9 4c3.6 3 4.9 6.7 4.9 6.7z"/>
|
|
273
|
+
</symbol>
|
|
274
|
+
|
|
275
|
+
<symbol id="x" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
276
|
+
<line x1="18" y1="6" x2="6" y2="18"/>
|
|
277
|
+
<line x1="6" y1="6" x2="18" y2="18"/>
|
|
278
|
+
</symbol>
|
|
279
|
+
</svg>`, y = ({ children: l }) => (s(() => {
|
|
280
|
+
if (!document.getElementById("gloss-icon-sprite")) {
|
|
281
|
+
const o = document.createElement("div");
|
|
282
|
+
o.id = "gloss-icon-sprite", o.innerHTML = h, o.style.display = "none", document.body.insertBefore(o, document.body.firstChild);
|
|
283
|
+
}
|
|
284
|
+
return () => {
|
|
285
|
+
const o = document.getElementById("gloss-icon-sprite");
|
|
286
|
+
o && o.remove();
|
|
287
|
+
};
|
|
288
|
+
}, []), /* @__PURE__ */ e(t, { children: l }));
|
|
289
|
+
y.displayName = "SpriteProvider";
|
|
290
|
+
export {
|
|
291
|
+
c as Icon,
|
|
292
|
+
y as SpriteProvider,
|
|
293
|
+
h as spriteContent
|
|
294
|
+
};
|
package/lib/icon.d.ts
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export interface IconProps extends React.SVGProps<SVGSVGElement> {
|
|
3
|
+
/**
|
|
4
|
+
* The name of the icon (matches the SVG filename without extension)
|
|
5
|
+
*/
|
|
6
|
+
name: string;
|
|
7
|
+
/**
|
|
8
|
+
* Size of the icon
|
|
9
|
+
* @default 'md'
|
|
10
|
+
*/
|
|
11
|
+
size?: 'sm' | 'md' | 'lg' | 'xl';
|
|
12
|
+
/**
|
|
13
|
+
* Additional CSS class names
|
|
14
|
+
*/
|
|
15
|
+
className?: string;
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* Icon component that renders SVG icons from the sprite
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* ```tsx
|
|
22
|
+
* <Icon name="check" size="md" />
|
|
23
|
+
* <Icon name="chevron-down" size="lg" className="custom-class" />
|
|
24
|
+
* ```
|
|
25
|
+
*/
|
|
26
|
+
export declare const Icon: React.FC<IconProps>;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
declare const spriteContent = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"0\" height=\"0\" style=\"display: none;\">\n <symbol id=\"alert-circle\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/>\n <circle cx=\"12\" cy=\"16\" r=\"0.5\" fill=\"currentColor\"/>\n </symbol>\n\n <symbol id=\"amex\" viewBox=\"0 0 32 23\">\n <path fill=\"#26A6D1\" d=\"M2 0h28a2 2 0 0 1 2 2.001v19a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-19A2 2 0 0 1 2 0z\"/>\n <path fill=\"#fff\" d=\"M5.16 8L2 14.993h3.783l.469-1.115h1.072l.469 1.115h4.164v-.851l.371.851h2.154l.371-.869v.869h8.66l1.053-1.086.986 1.086 4.448.009-3.17-3.486L30 8h-4.379l-1.025 1.066L23.641 8H14.22l-.809 1.805L12.583 8H8.808v.822L8.388 8H5.16zm.732.993h1.844l2.096 4.742V8.993h2.02l1.619 3.4 1.492-3.4h2.01v5.018H15.75l-.01-3.932-1.783 3.932h-1.094l-1.793-3.932v3.932H8.554l-.477-1.125H5.5l-.476 1.124H3.676l2.216-5.017zm12.2 0h4.973l1.521 1.643 1.57-1.643h1.521l-2.311 2.522 2.311 2.493h-1.59l-1.521-1.662-1.578 1.662h-4.896V8.993zm-11.303.849l-.849 2.004h1.697l-.848-2.004zm12.531.19v.916h2.713v1.021H19.32v1h3.043l1.414-1.473-1.354-1.465H19.32z\"/>\n </symbol>\n\n <symbol id=\"book\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"/>\n <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"/>\n </symbol>\n\n <symbol id=\"button\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n <path d=\"M12.586,15l-3.793-3.793L7,14L5,6l8,2l-2.793,1.793L14,13.586L12.586,15z\"/>\n <path d=\"M4,10H1c-0.553,0-1-0.448-1-1V1c0-0.552,0.447-1,1-1h14c0.553,0,1,0.448,1,1v7h-2V2H2v6h2V10z\"/>\n </symbol>\n\n <symbol id=\"card-amex\" viewBox=\"0 0 32 23\">\n <path fill=\"#26A6D1\" d=\"M2 0h28a2 2 0 0 1 2 2.001v19a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-19A2 2 0 0 1 2 0z\"/>\n <path fill=\"#fff\" d=\"M5.16 8L2 14.993h3.783l.469-1.115h1.072l.469 1.115h4.164v-.851l.371.851h2.154l.371-.869v.869h8.66l1.053-1.086.986 1.086 4.448.009-3.17-3.486L30 8h-4.379l-1.025 1.066L23.641 8H14.22l-.809 1.805L12.583 8H8.808v.822L8.388 8H5.16zm.732.993h1.844l2.096 4.742V8.993h2.02l1.619 3.4 1.492-3.4h2.01v5.018H15.75l-.01-3.932-1.783 3.932h-1.094l-1.793-3.932v3.932H8.554l-.477-1.125H5.5l-.476 1.124H3.676l2.216-5.017zm12.2 0h4.973l1.521 1.643 1.57-1.643h1.521l-2.311 2.522 2.311 2.493h-1.59l-1.521-1.662-1.578 1.662h-4.896V8.993zm-11.303.849l-.849 2.004h1.697l-.848-2.004zm12.531.19v.916h2.713v1.021H19.32v1h3.043l1.414-1.473-1.354-1.465H19.32z\"/>\n </symbol>\n\n <symbol id=\"card-mastercard\" viewBox=\"0 0 32.003 20\">\n <path fill=\"#E2574C\" d=\"M19.994 10c0 5.524-4.475 10-9.997 10S0 15.523 0 10 4.476 0 9.997 0s9.997 4.477 9.997 10z\"/>\n <path fill=\"#F4B459\" d=\"M22.003 0a9.942 9.942 0 0 0-5.974 1.994l.008.001c.328.317.69.54.969.905l-2.08.033c-.326.329-.623.687-.903 1.059h3.668c.279.335.537.626.771.996h-5.104c-.187.322-.36.653-.511.997h6.196c.162.343.307.602.43.965H12.48a9.612 9.612 0 0 0-.278 1.058h7.564c.074.346.131.666.17.992h-7.884c-.033.329-.05.663-.05 1h7.991c0 .354-.025.682-.061 1h-7.88c.034.339.084.672.15 1h7.552c-.078.324-.168.65-.281.988h-7.016c.106.342.235.674.376.998h6.21c-.172.364-.367.655-.582.996H13.34c.202.35.425.684.667 1.004l3.684.055c-.314.377-.717.604-1.084.934.02.016-.587-.002-1.782-.021A9.963 9.963 0 0 0 22.003 20c5.523 0 10-4.477 10-10s-4.476-10-10-10z\"/>\n </symbol>\n\n <symbol id=\"card-visa\" viewBox=\"0 0 100 100\">\n <path fill=\"#0767B0\" d=\"M45.6 59.2h-5.3l3.3-20.4H49z\"/>\n <path fill=\"#0767B0\" d=\"M77.6 59.2h4.9l-4.3-20.4H74c-2 0-2.5 1.5-2.5 1.5l-7.9 18.9h5.5l1.1-3H77l.6 3zM71.8 52l2.8-7.6 1.6 7.6h-4.4z\"/>\n <path fill=\"#0767B0\" d=\"M64 43.7l.8-4.4s-2.3-.9-4.8-.9c-2.6 0-8.9 1.2-8.9 6.8 0 5.3 7.3 5.3 7.3 8.1s-6.6 2.3-8.8.5l-.8 4.6s2.4 1.2 6 1.2 9.1-1.9 9.1-7c0-5.3-7.4-5.8-7.4-8.1.1-2.4 5.3-2.1 7.5-.8z\"/>\n <path fill=\"#0767B0\" d=\"M35.9 38.8l-5.1 14-.6-3s-1.2-3.7-4.9-6.7c-.8-.6-1.6-1.1-2.3-1.6l4.6 17.7h5.5l8.5-20.4h-5.7z\"/>\n <path fill=\"#F9A533\" d=\"M30.3 49.8l-1.8-9.2s-.2-1.8-2.5-1.8h-8.4l-.1.3s4 .8 7.9 4c3.6 3 4.9 6.7 4.9 6.7z\"/>\n </symbol>\n\n <symbol id=\"check-square\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"9 11 12 14 22 4\"/>\n <path d=\"M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11\"/>\n </symbol>\n\n <symbol id=\"check\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"20 6 9 17 4 12\"/>\n </symbol>\n\n <symbol id=\"chevron-down\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"6 9 12 15 18 9\"/>\n </symbol>\n\n <symbol id=\"chevron-left\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"15 18 9 12 15 6\"/>\n </symbol>\n\n <symbol id=\"chevron-up\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"18 15 12 9 6 15\"/>\n </symbol>\n\n <symbol id=\"close\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n </symbol>\n\n <symbol id=\"consuming\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M13 2.05v3.03c3.39.49 6 3.39 6 6.92 0 .9-.18 1.75-.48 2.54l2.6 1.53c.56-1.24.88-2.62.88-4.07 0-5.18-3.95-9.45-9-9.95zM12 19c-3.87 0-7-3.13-7-7 0-3.53 2.61-6.43 6-6.92V2.05c-5.06.5-9 4.76-9 9.95 0 5.52 4.47 10 9.99 10 3.31 0 6.24-1.61 8.06-4.09l-2.6-1.53A6.95 6.95 0 0 1 12 19z\"/>\n </symbol>\n\n <symbol id=\"copy\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"/>\n <path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"/>\n </symbol>\n\n <symbol id=\"credit-card\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"1\" y=\"4\" width=\"22\" height=\"16\" rx=\"2\" ry=\"2\"/>\n <line x1=\"1\" y1=\"10\" x2=\"23\" y2=\"10\"/>\n </symbol>\n\n <symbol id=\"dropdown_select\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"square\" stroke-linejoin=\"miter\">\n <polyline points=\"7 8 12 3 17 8\"/>\n <polyline points=\"17 16 12 21 7 16\"/>\n </symbol>\n\n <symbol id=\"droplet\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z\"/>\n </symbol>\n\n <symbol id=\"external-link\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"/>\n <polyline points=\"15 3 21 3 21 9\"/>\n <line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"/>\n </symbol>\n\n <symbol id=\"grid\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M5 18l14-12\"/>\n <path d=\"M9 6l10 10\"/>\n </symbol>\n\n <symbol id=\"hash\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <line x1=\"4\" y1=\"9\" x2=\"20\" y2=\"9\"/>\n <line x1=\"4\" y1=\"15\" x2=\"20\" y2=\"15\"/>\n <line x1=\"10\" y1=\"3\" x2=\"8\" y2=\"21\"/>\n <line x1=\"16\" y1=\"3\" x2=\"14\" y2=\"21\"/>\n </symbol>\n\n <symbol id=\"home\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"/>\n <polyline points=\"9 22 9 12 15 12 15 22\"/>\n </symbol>\n\n <symbol id=\"info\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n <line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"/>\n <line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"/>\n </symbol>\n\n <symbol id=\"input\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"/>\n <line x1=\"8\" y1=\"12\" x2=\"16\" y2=\"12\"/>\n </symbol>\n\n <symbol id=\"layers\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M12 2L2 7l10 5 10-5-10-5z\"/>\n <path d=\"M2 17l10 5 10-5\"/>\n <path d=\"M2 12l10 5 10-5\"/>\n </symbol>\n\n <symbol id=\"layout\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"/>\n <line x1=\"3\" y1=\"9\" x2=\"21\" y2=\"9\"/>\n <line x1=\"9\" y1=\"21\" x2=\"9\" y2=\"9\"/>\n </symbol>\n\n <symbol id=\"lightbulb\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5\"/>\n <path d=\"M9 18h6\"/>\n <path d=\"M10 22h4\"/>\n </symbol>\n\n <symbol id=\"link\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"/>\n <path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"/>\n </symbol>\n\n <symbol id=\"lock\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"3\" y=\"11\" width=\"18\" height=\"10\" rx=\"2\"/>\n <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"/>\n </symbol>\n\n <symbol id=\"log-in\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4\"/>\n <polyline points=\"10 17 15 12 10 7\"/>\n <line x1=\"15\" y1=\"12\" x2=\"3\" y2=\"12\"/>\n </symbol>\n\n <symbol id=\"map-pin\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\"/>\n <circle cx=\"12\" cy=\"10\" r=\"3\"/>\n </symbol>\n\n <symbol id=\"mastercard\" viewBox=\"0 0 32.003 20\">\n <path fill=\"#E2574C\" d=\"M19.994 10c0 5.524-4.475 10-9.997 10S0 15.523 0 10 4.476 0 9.997 0s9.997 4.477 9.997 10z\"/>\n <path fill=\"#F4B459\" d=\"M22.003 0a9.942 9.942 0 0 0-5.974 1.994l.008.001c.328.317.69.54.969.905l-2.08.033c-.326.329-.623.687-.903 1.059h3.668c.279.335.537.626.771.996h-5.104c-.187.322-.36.653-.511.997h6.196c.162.343.307.602.43.965H12.48a9.612 9.612 0 0 0-.278 1.058h7.564c.074.346.131.666.17.992h-7.884c-.033.329-.05.663-.05 1h7.991c0 .354-.025.682-.061 1h-7.88c.034.339.084.672.15 1h7.552c-.078.324-.168.65-.281.988h-7.016c.106.342.235.674.376.998h6.21c-.172.364-.367.655-.582.996H13.34c.202.35.425.684.667 1.004l3.684.055c-.314.377-.717.604-1.084.934.02.016-.587-.002-1.782-.021A9.963 9.963 0 0 0 22.003 20c5.523 0 10-4.477 10-10s-4.476-10-10-10z\"/>\n </symbol>\n\n <symbol id=\"menu\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\"/>\n <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"/>\n <line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\"/>\n </symbol>\n\n <symbol id=\"minus\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"/>\n </symbol>\n\n <symbol id=\"modal\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n <path d=\"M14,1H2A2,2,0,0,0,0,3V13a2,2,0,0,0,2,2H14a2,2,0,0,0,2-2V3A2,2,0,0,0,14,1ZM2,3.5A.5.5,0,0,1,2.5,3h4a.5.5,0,0,1,.5.5v1a.5.5,0,0,1-.5.5h-4A.5.5,0,0,1,2,4.5ZM14,13H2V7H14Z\"/>\n </symbol>\n\n <symbol id=\"more-vertical\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"12\" r=\"1\"/>\n <circle cx=\"12\" cy=\"5\" r=\"1\"/>\n <circle cx=\"12\" cy=\"19\" r=\"1\"/>\n </symbol>\n\n <symbol id=\"plus\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"/>\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"/>\n </symbol>\n\n <symbol id=\"radio\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n <circle cx=\"8\" cy=\"8\" r=\"7.5\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <circle cx=\"8\" cy=\"8\" r=\"3.5\" fill=\"currentColor\"/>\n </symbol>\n\n <symbol id=\"refresh\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"23 4 23 10 17 10\"/>\n <path d=\"M20.49 15a9 9 0 1 1-2.12-9.36L23 10\"/>\n </symbol>\n\n <symbol id=\"search\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"/>\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/>\n </symbol>\n\n <symbol id=\"square\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"3\" y=\"11\" width=\"18\" height=\"10\" rx=\"2\"/>\n <circle cx=\"12\" cy=\"16\" r=\"2\"/>\n </symbol>\n\n <symbol id=\"star\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/>\n </symbol>\n\n <symbol id=\"tag\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z\"/>\n </symbol>\n\n <symbol id=\"textarea\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"square\" stroke-linejoin=\"miter\">\n <path d=\"M15,2c2.209,0,4,1.791,4,4v12c0,2.209-1.791,4-4,4\"/>\n <path d=\"M19,18c0,2.209,1.791,4,4,4\"/>\n <path d=\"M23,2c-2.209,0-4,1.791-4,4\"/>\n <line x1=\"16\" y1=\"15\" x2=\"22\" y2=\"15\"/>\n <polyline points=\"13 18 1 18 1 6 14 6\"/>\n </symbol>\n\n <symbol id=\"toggle\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M17 6H7c-3.31 0-6 2.69-6 6s2.69 6 6 6h10c3.31 0 6-2.69 6-6s-2.69-6-6-6zm0 10H7c-2.21 0-4-1.79-4-4s1.79-4 4-4h10c2.21 0 4 1.79 4 4s-1.79 4-4 4zM7 9c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"/>\n </symbol>\n\n <symbol id=\"type\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"4 7 4 4 20 4 20 7\"/>\n <line x1=\"9\" y1=\"20\" x2=\"15\" y2=\"20\"/>\n <line x1=\"12\" y1=\"4\" x2=\"12\" y2=\"20\"/>\n </symbol>\n\n <symbol id=\"visa\" viewBox=\"0 0 100 100\">\n <path fill=\"#0767B0\" d=\"M45.6 59.2h-5.3l3.3-20.4H49z\"/>\n <path fill=\"#0767B0\" d=\"M77.6 59.2h4.9l-4.3-20.4H74c-2 0-2.5 1.5-2.5 1.5l-7.9 18.9h5.5l1.1-3H77l.6 3zM71.8 52l2.8-7.6 1.6 7.6h-4.4z\"/>\n <path fill=\"#0767B0\" d=\"M64 43.7l.8-4.4s-2.3-.9-4.8-.9c-2.6 0-8.9 1.2-8.9 6.8 0 5.3 7.3 5.3 7.3 8.1s-6.6 2.3-8.8.5l-.8 4.6s2.4 1.2 6 1.2 9.1-1.9 9.1-7c0-5.3-7.4-5.8-7.4-8.1.1-2.4 5.3-2.1 7.5-.8z\"/>\n <path fill=\"#0767B0\" d=\"M35.9 38.8l-5.1 14-.6-3s-1.2-3.7-4.9-6.7c-.8-.6-1.6-1.1-2.3-1.6l4.6 17.7h5.5l8.5-20.4h-5.7z\"/>\n <path fill=\"#F9A533\" d=\"M30.3 49.8l-1.8-9.2s-.2-1.8-2.5-1.8h-8.4l-.1.3s4 .8 7.9 4c3.6 3 4.9 6.7 4.9 6.7z\"/>\n </symbol>\n\n <symbol id=\"x\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n </symbol>\n</svg>";
|
|
3
|
+
export { spriteContent };
|
|
4
|
+
export interface SpriteProviderProps {
|
|
5
|
+
children: React.ReactNode;
|
|
6
|
+
}
|
|
7
|
+
/**
|
|
8
|
+
* SpriteProvider component that injects the SVG sprite into the DOM
|
|
9
|
+
*
|
|
10
|
+
* This component should be placed at the root of your application to make
|
|
11
|
+
* all icons available throughout your app.
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* ```tsx
|
|
15
|
+
* import { SpriteProvider } from '@mt-gloss/icons';
|
|
16
|
+
*
|
|
17
|
+
* function App() {
|
|
18
|
+
* return (
|
|
19
|
+
* <SpriteProvider>
|
|
20
|
+
* <YourApp />
|
|
21
|
+
* </SpriteProvider>
|
|
22
|
+
* );
|
|
23
|
+
* }
|
|
24
|
+
* ```
|
|
25
|
+
*/
|
|
26
|
+
export declare const SpriteProvider: React.FC<SpriteProviderProps>;
|
package/package.json
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@mt-gloss/icons",
|
|
3
|
+
"version": "0.0.3",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"main": "./index.js",
|
|
6
|
+
"types": "./index.d.ts",
|
|
7
|
+
"exports": {
|
|
8
|
+
".": {
|
|
9
|
+
"import": {
|
|
10
|
+
"types": "./index.d.ts",
|
|
11
|
+
"default": "./index.js"
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
},
|
|
15
|
+
"files": [
|
|
16
|
+
"index.js",
|
|
17
|
+
"index.d.ts",
|
|
18
|
+
"lib/**/*.d.ts",
|
|
19
|
+
"README.md"
|
|
20
|
+
],
|
|
21
|
+
"peerDependencies": {
|
|
22
|
+
"react": "^18.0.0 || ^19.0.0",
|
|
23
|
+
"react-dom": "^18.0.0 || ^19.0.0"
|
|
24
|
+
}
|
|
25
|
+
}
|