@solar-icons/svelte 2.0.0-beta.1 → 2.0.0-beta.2
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 +27 -48
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,75 +1,54 @@
|
|
|
1
1
|
# @solar-icons/svelte
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Svelte components for Solar Icons. This package provides 7,476 SVG icons across 6 styles (Bold, Broken, Linear, Outline, Bold Duotone, Line Duotone), optimized for Svelte applications.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Features
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
- **7,476 SVGs:** 1,246 unique icons in 6 styles. Designed by 480 Design.
|
|
8
|
+
- **Tree-shakeable:** Import only the icons you use.
|
|
9
|
+
- **Global configuration:** Set defaults for size, color, and stroke width using `<SolarProvider>`.
|
|
10
|
+
- **Customizable:** Override size, color, and stroke width per icon via props or CSS variables.
|
|
11
|
+
- **Duotone support:** Secondary color controls for `bold-duotone` and `line-duotone` styles.
|
|
12
|
+
- **TypeScript:** Typed components and props.
|
|
13
|
+
|
|
14
|
+
## Install
|
|
15
|
+
|
|
16
|
+
```sh
|
|
8
17
|
npm install @solar-icons/svelte
|
|
9
18
|
```
|
|
10
19
|
|
|
11
20
|
## Usage
|
|
12
21
|
|
|
13
|
-
Import and render components:
|
|
14
|
-
|
|
15
22
|
```svelte
|
|
16
23
|
<script>
|
|
17
|
-
import {
|
|
24
|
+
import { HomeIcon, LoginIcon } from '@solar-icons/svelte/linear';
|
|
18
25
|
</script>
|
|
19
26
|
|
|
20
|
-
<
|
|
21
|
-
<
|
|
27
|
+
<div>
|
|
28
|
+
<HomeIcon />
|
|
29
|
+
<LoginIcon color="#3b82f6" size={32} strokeWidth={2} />
|
|
30
|
+
</div>
|
|
22
31
|
```
|
|
23
32
|
|
|
24
|
-
###
|
|
33
|
+
### Global Configuration (Provider)
|
|
25
34
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
Import multiple icons of the same style:
|
|
35
|
+
Wrap your layout in `<SolarProvider>` to set default properties:
|
|
29
36
|
|
|
30
37
|
```svelte
|
|
31
38
|
<script>
|
|
32
|
-
import {
|
|
33
|
-
import {
|
|
39
|
+
import { SolarProvider } from '@solar-icons/svelte';
|
|
40
|
+
import { HomeIcon } from '@solar-icons/svelte/linear';
|
|
34
41
|
</script>
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
Available styles: `Bold`, `Linear`, `Outline`, `BoldDuotone`, `LineDuotone`, `Broken`.
|
|
38
42
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
```svelte
|
|
44
|
-
<script>
|
|
45
|
-
import { AltArrowLeft, ArrowUp } from '@solar-icons/svelte/category/arrows/Bold';
|
|
46
|
-
</script>
|
|
43
|
+
<SolarProvider size={24} color="currentColor" strokeWidth={1.5}>
|
|
44
|
+
<HomeIcon />
|
|
45
|
+
</SolarProvider>
|
|
47
46
|
```
|
|
48
47
|
|
|
49
|
-
|
|
48
|
+
## Documentation
|
|
50
49
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
```svelte
|
|
54
|
-
<script>
|
|
55
|
-
import House from '@solar-icons/svelte/category/buildings/Bold/House.svelte';
|
|
56
|
-
</script>
|
|
57
|
-
```
|
|
58
|
-
|
|
59
|
-
### Props
|
|
60
|
-
|
|
61
|
-
Icon components accept standard SVG attributes alongside these props:
|
|
62
|
-
|
|
63
|
-
- **`size`**: Width and height (e.g., `24`, `"1.5em"`, default: `"1em"`).
|
|
64
|
-
- **`color`**: Icon color (e.g., `"#000"`, `"currentColor"`, default: `"currentColor"`).
|
|
65
|
-
- **`mirrored`**: Flips the icon horizontally when `true` (default: `false`).
|
|
66
|
-
- **`alt`**: Accessibility title.
|
|
50
|
+
For installation guides, API reference, and a searchable icon catalog, visit the [Svelte Documentation](https://solar-icons.vercel.app/docs/v2/frameworks/svelte).
|
|
67
51
|
|
|
68
52
|
## License
|
|
69
53
|
|
|
70
|
-
|
|
71
|
-
- **Icons**: CC BY 4.0 by [480 Design](https://www.figma.com/community/file/1166831539721848736) (requires attribution)
|
|
72
|
-
|
|
73
|
-
---
|
|
74
|
-
|
|
75
|
-
For detailed documentation, visit [solar-icons.vercel.app](https://solar-icons.vercel.app).
|
|
54
|
+
MIT License. Icons by 480 Design (CC BY 4.0).
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@solar-icons/svelte",
|
|
3
|
-
"version": "2.0.0-beta.
|
|
3
|
+
"version": "2.0.0-beta.2",
|
|
4
4
|
"private": false,
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -99,7 +99,7 @@
|
|
|
99
99
|
"svelte-check": "^4.7.2",
|
|
100
100
|
"typescript": "^6.0.3",
|
|
101
101
|
"vitest": "^4.1.10",
|
|
102
|
-
"@solar-icons/core": "2.0.0-beta.
|
|
102
|
+
"@solar-icons/core": "2.0.0-beta.1"
|
|
103
103
|
},
|
|
104
104
|
"peerDependencies": {
|
|
105
105
|
"svelte": ">= 5.0.0"
|