@solar-icons/svelte 2.0.0-beta.0 → 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/dist/icons/broken/radial-blur.svelte +8 -10
- package/dist/icons/dynamic/airbuds-left.svelte +1 -1
- package/dist/icons/dynamic/airbuds-right.svelte +1 -1
- package/dist/icons/dynamic/radial-blur.svelte +3 -3
- package/dist/icons/line-duotone/airbuds-left.svelte +1 -1
- package/dist/icons/line-duotone/airbuds-right.svelte +1 -1
- package/dist/icons/line-duotone/radial-blur.svelte +8 -10
- package/dist/icons/linear/radial-blur.svelte +8 -10
- 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).
|
|
@@ -8,15 +8,13 @@ let props = $props()
|
|
|
8
8
|
<path d="M15.5 9.75C15.5 10.4404 14.9404 11 14.25 11C13.5596 11 13 10.4404 13 9.75C13 9.05964 13.5596 8.5 14.25 8.5C14.9404 8.5 15.5 9.05964 15.5 9.75Z" stroke="currentColor"/>
|
|
9
9
|
<path d="M11 14.25C11 14.9404 10.4404 15.5 9.75 15.5C9.05964 15.5 8.5 14.9404 8.5 14.25C8.5 13.5596 9.05964 13 9.75 13C10.4404 13 11 13.5596 11 14.25Z" stroke="currentColor"/>
|
|
10
10
|
<path d="M11 9.75C11 10.4404 10.4404 11 9.75 11C9.05964 11 8.5 10.4404 8.5 9.75C8.5 9.05964 9.05964 8.5 9.75 8.5C10.4404 8.5 11 9.05964 11 9.75Z" stroke="currentColor"/>
|
|
11
|
-
<path d="M15 18.25C15 18.6642 14.6642 19 14.25 19C13.8358 19 13.5 18.6642 13.5 18.25C13.5 17.8358 13.8358 17.5 14.25 17.5C14.6642 17.5 15 17.8358 15 18.25Z" fill="currentColor"/>
|
|
12
|
-
<path d="M10.5 18.25C10.5 18.6642 10.1642 19 9.75 19C9.33579 19 9 18.6642 9 18.25C9 17.8358 9.33579 17.5 9.75 17.5C10.1642 17.5 10.5 17.8358 10.5 18.25Z" fill="currentColor"/>
|
|
13
|
-
<path d="M15 18.25C15 18.6642 14.6642 19 14.25 19C13.8358 19 13.5 18.6642 13.5 18.25C13.5 17.8358 13.8358 17.5 14.25 17.5C14.6642 17.5 15 17.8358 15 18.25Z" fill="currentColor"/>
|
|
14
|
-
<path d="M15 5.75C15 6.16421 14.6642 6.5 14.25 6.5C13.8358 6.5 13.5 6.16421 13.5 5.75C13.5 5.33579 13.8358 5 14.25 5C14.6642 5 15 5.33579 15 5.75Z" fill="currentColor"/>
|
|
15
|
-
<path d="M10.5 18.25C10.5 18.6642 10.1642 19 9.75 19C9.33579 19 9 18.6642 9 18.25C9 17.8358 9.33579 17.5 9.75 17.5C10.1642 17.5 10.5 17.8358 10.5 18.25Z" fill="currentColor"/>
|
|
16
|
-
<path d="M10.5 5.75C10.5 6.16421 10.1642 6.5 9.75 6.5C9.33579 6.5 9 6.16421 9 5.75C9 5.33579 9.33579 5 9.75 5C10.1642 5 10.5 5.33579 10.5 5.75Z" fill="currentColor"/>
|
|
17
|
-
<path d="M18.25 9C18.6642 9 19 9.33579 19 9.75C19 10.1642 18.6642 10.5 18.25 10.5C17.8358 10.5 17.5 10.1642 17.5 9.75C17.5 9.33579 17.8358 9 18.25 9Z" fill="currentColor"/>
|
|
18
|
-
<path d="M5.75 9C6.16421 9 6.5 9.33579 6.5 9.75C6.5 10.1642 6.16421 10.5 5.75 10.5C5.33579 10.5 5 10.1642 5 9.75C5 9.33579 5.33579 9 5.75 9Z" fill="currentColor"/>
|
|
19
|
-
<path d="M18.25 13.5C18.6642 13.5 19 13.8358 19 14.25C19 14.6642 18.6642 15 18.25 15C17.8358 15 17.5 14.6642 17.5 14.25C17.5 13.8358 17.8358 13.5 18.25 13.5Z" fill="currentColor"/>
|
|
20
|
-
<path d="M5.75 13.5C6.16421 13.5 6.5 13.8358 6.5 14.25C6.5 14.6642 6.16421 15 5.75 15C5.33579 15 5 14.6642 5 14.25C5 13.8358 5.33579 13.5 5.75 13.5Z" fill="currentColor"/>
|
|
21
11
|
<path d="M7 3.33782C8.47087 2.48697 10.1786 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 10.1786 2.48697 8.47087 3.33782 7" stroke="currentColor" stroke-linecap="round"/>
|
|
12
|
+
<path d="M9.75 5.75H9.7501" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
13
|
+
<path d="M5.75 9.75H5.7501" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
14
|
+
<path d="M5.75 14.25H5.7501" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
15
|
+
<path d="M9.75 18.25H9.7501" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
16
|
+
<path d="M14.25 18.25H14.2501" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
17
|
+
<path d="M18.25 14.25H18.2501" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
18
|
+
<path d="M18.25 9.75H18.2501" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
19
|
+
<path d="M14.25 5.75H14.2501" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
22
20
|
</Icon>
|
|
@@ -20,7 +20,7 @@ let { ...restProps }: DynamicIconProps = $props()
|
|
|
20
20
|
*
|
|
21
21
|
*  Linear
|
|
22
22
|
*
|
|
23
|
-
*  LineDuotone
|
|
24
24
|
*
|
|
25
25
|
*  Outline
|
|
26
26
|
-->
|
|
@@ -20,7 +20,7 @@ let { ...restProps }: DynamicIconProps = $props()
|
|
|
20
20
|
*
|
|
21
21
|
*  Linear
|
|
22
22
|
*
|
|
23
|
-
*  LineDuotone
|
|
24
24
|
*
|
|
25
25
|
*  Outline
|
|
26
26
|
-->
|
|
@@ -16,11 +16,11 @@ let { ...restProps }: DynamicIconProps = $props()
|
|
|
16
16
|
*
|
|
17
17
|
*  BoldDuotone
|
|
18
18
|
*
|
|
19
|
-
*  Broken
|
|
20
20
|
*
|
|
21
|
-
*  Linear
|
|
22
22
|
*
|
|
23
|
-
*  LineDuotone
|
|
24
24
|
*
|
|
25
25
|
*  Outline
|
|
26
26
|
-->
|
|
@@ -4,7 +4,7 @@ let props = $props()
|
|
|
4
4
|
</script>
|
|
5
5
|
|
|
6
6
|
<Icon {...props} iconName="airbuds-left-line-duotone">
|
|
7
|
-
<path d="M8 5V8" stroke="currentColor" stroke-
|
|
7
|
+
<path d="M8 5V8" stroke="currentColor" stroke-linecap="round" style="color: var(--solar-secondary-color, currentColor); opacity: var(--solar-secondary-opacity, 0.5)"/>
|
|
8
8
|
|
|
9
9
|
<circle cx="5.5" cy="5.5" r="5.5" transform="matrix(-1 0 0 1 21 11)" stroke="currentColor" style="color: var(--solar-secondary-color, currentColor); opacity: var(--solar-secondary-opacity, 0.5)"/>
|
|
10
10
|
|
|
@@ -4,7 +4,7 @@ let props = $props()
|
|
|
4
4
|
</script>
|
|
5
5
|
|
|
6
6
|
<Icon {...props} iconName="airbuds-right-line-duotone">
|
|
7
|
-
<path d="M15 5V8" stroke="currentColor" stroke-
|
|
7
|
+
<path d="M15 5V8" stroke="currentColor" stroke-linecap="round" style="color: var(--solar-secondary-color, currentColor); opacity: var(--solar-secondary-opacity, 0.5)"/>
|
|
8
8
|
|
|
9
9
|
<circle cx="7.5" cy="16.5" r="5.5" stroke="currentColor" style="color: var(--solar-secondary-color, currentColor); opacity: var(--solar-secondary-opacity, 0.5)"/>
|
|
10
10
|
|
|
@@ -9,14 +9,12 @@ let props = $props()
|
|
|
9
9
|
<path d="M15.5 9.75C15.5 10.4404 14.9404 11 14.25 11C13.5596 11 13 10.4404 13 9.75C13 9.05964 13.5596 8.5 14.25 8.5C14.9404 8.5 15.5 9.05964 15.5 9.75Z" stroke="currentColor"/>
|
|
10
10
|
<path d="M11 14.25C11 14.9404 10.4404 15.5 9.75 15.5C9.05964 15.5 8.5 14.9404 8.5 14.25C8.5 13.5596 9.05964 13 9.75 13C10.4404 13 11 13.5596 11 14.25Z" stroke="currentColor"/>
|
|
11
11
|
<path d="M11 9.75C11 10.4404 10.4404 11 9.75 11C9.05964 11 8.5 10.4404 8.5 9.75C8.5 9.05964 9.05964 8.5 9.75 8.5C10.4404 8.5 11 9.05964 11 9.75Z" stroke="currentColor"/>
|
|
12
|
-
<path d="
|
|
13
|
-
<path d="
|
|
14
|
-
<path d="
|
|
15
|
-
<path d="
|
|
16
|
-
<path d="
|
|
17
|
-
<path d="
|
|
18
|
-
<path d="M18.25
|
|
19
|
-
<path d="
|
|
20
|
-
<path d="M18.25 13.5C18.6642 13.5 19 13.8358 19 14.25C19 14.6642 18.6642 15 18.25 15C17.8358 15 17.5 14.6642 17.5 14.25C17.5 13.8358 17.8358 13.5 18.25 13.5Z" fill="currentColor"/>
|
|
21
|
-
<path d="M5.75 13.5C6.16421 13.5 6.5 13.8358 6.5 14.25C6.5 14.6642 6.16421 15 5.75 15C5.33579 15 5 14.6642 5 14.25C5 13.8358 5.33579 13.5 5.75 13.5Z" fill="currentColor"/>
|
|
12
|
+
<path d="M9.75 5.75H9.7501" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
13
|
+
<path d="M5.75 9.75H5.7501" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
14
|
+
<path d="M5.75 14.25H5.7501" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
15
|
+
<path d="M9.75 18.25H9.7501" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
16
|
+
<path d="M14.25 18.25H14.2501" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
17
|
+
<path d="M18.25 14.25H18.2501" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
18
|
+
<path d="M18.25 9.75H18.2501" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
19
|
+
<path d="M14.25 5.75H14.2501" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
22
20
|
</Icon>
|
|
@@ -9,14 +9,12 @@ let props = $props()
|
|
|
9
9
|
<path d="M15.5 9.75C15.5 10.4404 14.9404 11 14.25 11C13.5596 11 13 10.4404 13 9.75C13 9.05964 13.5596 8.5 14.25 8.5C14.9404 8.5 15.5 9.05964 15.5 9.75Z" stroke="currentColor"/>
|
|
10
10
|
<path d="M11 14.25C11 14.9404 10.4404 15.5 9.75 15.5C9.05964 15.5 8.5 14.9404 8.5 14.25C8.5 13.5596 9.05964 13 9.75 13C10.4404 13 11 13.5596 11 14.25Z" stroke="currentColor"/>
|
|
11
11
|
<path d="M11 9.75C11 10.4404 10.4404 11 9.75 11C9.05964 11 8.5 10.4404 8.5 9.75C8.5 9.05964 9.05964 8.5 9.75 8.5C10.4404 8.5 11 9.05964 11 9.75Z" stroke="currentColor"/>
|
|
12
|
-
<path d="
|
|
13
|
-
<path d="
|
|
14
|
-
<path d="
|
|
15
|
-
<path d="
|
|
16
|
-
<path d="
|
|
17
|
-
<path d="
|
|
18
|
-
<path d="M18.25
|
|
19
|
-
<path d="
|
|
20
|
-
<path d="M18.25 13.5C18.6642 13.5 19 13.8358 19 14.25C19 14.6642 18.6642 15 18.25 15C17.8358 15 17.5 14.6642 17.5 14.25C17.5 13.8358 17.8358 13.5 18.25 13.5Z" fill="currentColor"/>
|
|
21
|
-
<path d="M5.75 13.5C6.16421 13.5 6.5 13.8358 6.5 14.25C6.5 14.6642 6.16421 15 5.75 15C5.33579 15 5 14.6642 5 14.25C5 13.8358 5.33579 13.5 5.75 13.5Z" fill="currentColor"/>
|
|
12
|
+
<path d="M9.75 5.75H9.7501" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
13
|
+
<path d="M5.75 9.75H5.7501" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
14
|
+
<path d="M5.75 14.25H5.7501" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
15
|
+
<path d="M9.75 18.25H9.7501" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
16
|
+
<path d="M14.25 18.25H14.2501" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
17
|
+
<path d="M18.25 14.25H18.2501" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
18
|
+
<path d="M18.25 9.75H18.2501" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
19
|
+
<path d="M14.25 5.75H14.2501" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
22
20
|
</Icon>
|
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": "
|
|
102
|
+
"@solar-icons/core": "2.0.0-beta.1"
|
|
103
103
|
},
|
|
104
104
|
"peerDependencies": {
|
|
105
105
|
"svelte": ">= 5.0.0"
|