@solar-icons/svelte 2.0.0-beta.1 → 2.0.0-beta.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.
Files changed (3) hide show
  1. package/README.md +27 -48
  2. package/dist/lib/IconBase.svelte +3 -2
  3. package/package.json +2 -2
package/README.md CHANGED
@@ -1,75 +1,54 @@
1
1
  # @solar-icons/svelte
2
2
 
3
- Solar Icons for Svelte 5. Built with runes for optimal performance and minimal bundle size.
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
- ## Installation
5
+ ## Features
6
6
 
7
- ```bash
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 { Home, Settings } from '@solar-icons/svelte/Bold';
24
+ import { HomeIcon, LoginIcon } from '@solar-icons/svelte/linear';
18
25
  </script>
19
26
 
20
- <Home size={24} color="#000" />
21
- <Settings size={32} color="blue" />
27
+ <div>
28
+ <HomeIcon />
29
+ <LoginIcon color="#3b82f6" size={32} strokeWidth={2} />
30
+ </div>
22
31
  ```
23
32
 
24
- ### Import Patterns
33
+ ### Global Configuration (Provider)
25
34
 
26
- #### Import by Style
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 { Home, Settings } from '@solar-icons/svelte/Bold';
33
- import { Home as HomeLinear } from '@solar-icons/svelte/Linear';
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
- #### Import by Category
40
-
41
- Import categorized icons directly:
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
- #### Direct Component Import
48
+ ## Documentation
50
49
 
51
- Import individual components directly:
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
- - **Code**: MIT
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/dist/lib/IconBase.svelte CHANGED
@@ -53,6 +53,7 @@
53
53
  secondaryOpacity != null
54
54
  ? `--solar-secondary-opacity: ${String(secondaryOpacity)}`
55
55
  : null,
56
+ size === undefined && !isolated ? 'font-size: var(--solar-size, 24px)' : null,
56
57
  userStyle ?? null,
57
58
  ]
58
59
  .filter(Boolean)
@@ -60,10 +61,10 @@
60
61
  );
61
62
 
62
63
  const svgWidth = $derived(
63
- size !== undefined ? undefined : isolated ? '24px' : 'var(--solar-size, 24px)'
64
+ size !== undefined ? undefined : isolated ? '24px' : '1em'
64
65
  );
65
66
  const svgHeight = $derived(
66
- size !== undefined ? undefined : isolated ? '24px' : 'var(--solar-size, 24px)'
67
+ size !== undefined ? undefined : isolated ? '24px' : '1em'
67
68
  );
68
69
  const svgColor = $derived(
69
70
  color !== undefined
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@solar-icons/svelte",
3
- "version": "2.0.0-beta.1",
3
+ "version": "2.0.0-beta.3",
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.0"
102
+ "@solar-icons/core": "2.0.0-beta.1"
103
103
  },
104
104
  "peerDependencies": {
105
105
  "svelte": ">= 5.0.0"