@solar-icons/angular 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 (4) hide show
  1. package/README.md +33 -137
  2. package/dist/lib/icon-base.d.ts +3 -2
  3. package/dist/lib/icon-base.js +9 -3
  4. package/package.json +2 -2
package/README.md CHANGED
@@ -1,170 +1,66 @@
1
1
  # @solar-icons/angular
2
2
 
3
- Solar Icons for Angular 17+. Standalone components with signal-based inputs.
3
+ Angular components for Solar Icons. This package provides 7,476 SVG icons across 6 styles (Bold, Broken, Linear, Outline, Bold Duotone, Line Duotone), optimized for Angular applications.
4
4
 
5
- ## Installation
5
+ ## Features
6
6
 
7
- ```bash
8
- npm install @solar-icons/angular
9
- ```
10
-
11
- ## Usage
12
-
13
- ### Static components
14
-
15
- Import icons with the `Solar` prefix and style suffix, then use attribute selectors on `<svg>`:
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 `<solar-provider>`.
10
+ - **Customizable:** Override size, color, and stroke width per icon via inputs or CSS variables.
11
+ - **Duotone support:** Secondary color controls for `bold-duotone` and `line-duotone` styles.
12
+ - **TypeScript:** Typed components and inputs.
16
13
 
17
- ```typescript
18
- import { Component } from '@angular/core'
19
- import { SolarHomeBold } from '@solar-icons/angular'
14
+ ## Install
20
15
 
21
- @Component({
22
- selector: 'app-example',
23
- standalone: true,
24
- imports: [SolarHomeBold],
25
- template: ` <svg solarHomeBold [size]="32" color="#ef4444" /> `,
26
- })
27
- export class ExampleComponent {}
16
+ ```sh
17
+ npm install @solar-icons/angular
28
18
  ```
29
19
 
30
- ### SolarProvider
31
-
32
- Wrap a subtree to share icon styling via CSS custom properties:
20
+ ## Usage
33
21
 
34
- ```typescript
22
+ ```ts
35
23
  import { Component } from '@angular/core'
36
- import { SolarProvider, SolarHomeBold, SolarStarBold } from '@solar-icons/angular'
24
+ import { HomeIcon, LoginIcon } from '@solar-icons/angular/linear'
37
25
 
38
26
  @Component({
39
- selector: 'app-demo',
40
27
  standalone: true,
41
- imports: [SolarProvider, SolarHomeBold, SolarStarBold],
28
+ imports: [HomeIcon, LoginIcon],
42
29
  template: `
43
- <solar-provider color="#3b82f6" [size]="32" [strokeWidth]="1.5">
44
- <svg solarHomeBold></svg>
45
- <svg solarStarBold></svg>
46
- </solar-provider>
30
+ <div>
31
+ <svg solarHomeIcon></svg>
32
+ <svg solarLoginIcon color="#3b82f6" size="32" strokeWidth="2"></svg>
33
+ </div>
47
34
  `,
48
35
  })
49
- export class DemoComponent {}
36
+ export class AppComponent {}
50
37
  ```
51
38
 
52
- | Input | CSS Variable | Default |
53
- | ------------------ | --------------------------- | -------------- |
54
- | `color` | `--solar-color` | `currentColor` |
55
- | `size` | `--solar-size` | `24px` |
56
- | `strokeWidth` | `--solar-stroke-width` | `1.5` |
57
- | `secondaryColor` | `--solar-secondary-color` | `currentColor` |
58
- | `secondaryOpacity` | `--solar-secondary-opacity` | `0.5` |
59
-
60
- ### useSolar
39
+ ### Global Configuration (Provider)
61
40
 
62
- For child-driven control, call `useSolar()` inside a component that is a descendant of `<solar-provider>`:
41
+ Wrap your components in `<solar-provider>` to set default properties:
63
42
 
64
- ```typescript
43
+ ```ts
65
44
  import { Component } from '@angular/core'
66
- import { useSolar, SolarProvider, SolarHomeBold } from '@solar-icons/angular'
45
+ import { SolarProvider } from '@solar-icons/angular'
46
+ import { HomeIcon } from '@solar-icons/angular/linear'
67
47
 
68
48
  @Component({
69
- selector: 'app-controls',
70
49
  standalone: true,
71
- imports: [SolarHomeBold],
50
+ imports: [SolarProvider, HomeIcon],
72
51
  template: `
73
- <svg solarHomeBold></svg>
74
- <input
75
- type="color"
76
- [value]="solar.color()"
77
- (input)="solar.setColor($any($event.target).value)" />
52
+ <solar-provider size="24" color="currentColor" strokeWidth="1.5">
53
+ <svg solarHomeIcon></svg>
54
+ </solar-provider>
78
55
  `,
79
56
  })
80
- export class ControlsComponent {
81
- readonly solar = useSolar()
82
- }
83
- ```
84
-
85
- Wrap the component in a `<solar-provider>` ancestor:
86
-
87
- ```html
88
- <solar-provider>
89
- <app-controls />
90
- </solar-provider>
91
- ```
92
-
93
- ### Multi-style dynamic components
94
-
95
- Import components that bundle all 6 styles and switch via `weight`:
96
-
97
- ```typescript
98
- import { Component } from '@angular/core'
99
- import { SolarHome } from '@solar-icons/angular/dynamic'
100
-
101
- @Component({
102
- selector: 'app-example',
103
- standalone: true,
104
- imports: [SolarHome],
105
- template: `<svg solarHome weight="Bold" [size]="32" color="#ef4444" />`,
106
- })
107
- export class ExampleComponent {}
108
- ```
109
-
110
- Available from `@solar-icons/angular/dynamic` (barrel) or `@solar-icons/angular/dynamic/home` (single).
111
-
112
- ### Dynamic rendering with `SolarIcon`
113
-
114
- The `SolarIcon` directive renders icons at runtime from a class or registered name. Use it for data-driven scenarios.
115
-
116
- ```typescript
117
- import { Component } from '@angular/core'
118
- import { SolarIcon, provideSolarIcons } from '@solar-icons/angular'
119
- import { SolarHome } from '@solar-icons/angular/dynamic'
120
-
121
- @Component({
122
- selector: 'app-example',
123
- standalone: true,
124
- imports: [SolarIcon],
125
- template: ` <ng-container [solarIcon]="myIcon" [weight]="'Bold'" [size]="32" /> `,
126
- })
127
- export class ExampleComponent {
128
- myIcon = SolarHome
129
- }
130
- ```
131
-
132
- `SolarIcon` accepts `size`, `color`, `strokeWidth`, `weight`, `secondaryColor`, `secondaryOpacity`, `alt` — all forwarded to the created icon.
133
-
134
- ### CSS variables
135
-
136
- Icons read from CSS custom properties when explicit inputs are omitted:
137
-
138
- ```css
139
- :host {
140
- --solar-color: #ef4444;
141
- --solar-size: 32px;
142
- --solar-stroke-width: 2;
143
- }
144
- ```
145
-
146
- ### Accessibility
147
-
148
- Icons have `aria-hidden="true"` by default. Provide `alt` or `ariaLabel` to make them accessible:
149
-
150
- ```html
151
- <svg solarHomeBold alt="Home" /> <svg solarHomeBold ariaLabel="Navigate to home page" />
57
+ export class AppComponent {}
152
58
  ```
153
59
 
154
- ## Inputs
60
+ ## Documentation
155
61
 
156
- | Input | Type | Description |
157
- | ------------------ | ------------------ | ------------------------------ |
158
- | `color` | `string` | Icon color |
159
- | `size` | `string \| number` | Width and height |
160
- | `strokeWidth` | `string \| number` | Stroke width |
161
- | `secondaryColor` | `string` | Duotone accent color |
162
- | `secondaryOpacity` | `number` | Duotone accent opacity |
163
- | `isolated` | `boolean` | Ignores provider CSS variables |
164
- | `alt` | `string` | Accessibility label |
165
- | `ariaLabel` | `string` | `aria-label` attribute |
62
+ For installation guides, API reference, and a searchable icon catalog, visit the [Angular Documentation](https://solar-icons.vercel.app/docs/v2/frameworks/angular).
166
63
 
167
64
  ## License
168
65
 
169
- - **Code**: MIT
170
- - **Icons**: CC BY 4.0 by [480 Design](https://www.figma.com/community/file/1166831539721848736) (requires attribution)
66
+ MIT License. Icons by 480 Design (CC BY 4.0).
package/dist/lib/icon-base.d.ts CHANGED
@@ -18,8 +18,9 @@ export declare abstract class IconBase {
18
18
  readonly secondaryColor: import("@angular/core").InputSignal<string | undefined>;
19
19
  readonly secondaryOpacity: import("@angular/core").InputSignal<number | undefined>;
20
20
  readonly isolated: import("@angular/core").InputSignal<boolean | undefined>;
21
- readonly defaultWidth: import("@angular/core").Signal<"24px" | "var(--solar-size, 24px)" | undefined>;
22
- readonly defaultHeight: import("@angular/core").Signal<"24px" | "var(--solar-size, 24px)" | undefined>;
21
+ readonly defaultWidth: import("@angular/core").Signal<"24px" | "1em" | undefined>;
22
+ readonly defaultHeight: import("@angular/core").Signal<"24px" | "1em" | undefined>;
23
+ readonly defaultFontSize: import("@angular/core").Signal<"var(--solar-size, 24px)" | null>;
23
24
  readonly defaultColor: import("@angular/core").Signal<"currentColor" | "var(--solar-color, currentColor)" | undefined>;
24
25
  readonly defaultStrokeWidth: import("@angular/core").Signal<"1.5" | "var(--solar-stroke-width, 1.5)" | undefined>;
25
26
  readonly explicitWidth: import("@angular/core").Signal<string | null>;
package/dist/lib/icon-base.js CHANGED
@@ -11,13 +11,18 @@ export class IconBase {
11
11
  defaultWidth = computed(() => {
12
12
  if (this.size() !== undefined)
13
13
  return undefined;
14
- return this.isolated() ? '24px' : 'var(--solar-size, 24px)';
14
+ return this.isolated() ? '24px' : '1em';
15
15
  }, ...(ngDevMode ? [{ debugName: "defaultWidth" }] : []));
16
16
  defaultHeight = computed(() => {
17
17
  if (this.size() !== undefined)
18
18
  return undefined;
19
- return this.isolated() ? '24px' : 'var(--solar-size, 24px)';
19
+ return this.isolated() ? '24px' : '1em';
20
20
  }, ...(ngDevMode ? [{ debugName: "defaultHeight" }] : []));
21
+ defaultFontSize = computed(() => {
22
+ if (this.size() !== undefined)
23
+ return null;
24
+ return this.isolated() ? null : 'var(--solar-size, 24px)';
25
+ }, ...(ngDevMode ? [{ debugName: "defaultFontSize" }] : []));
21
26
  defaultColor = computed(() => {
22
27
  if (this.color() !== undefined)
23
28
  return undefined;
@@ -65,7 +70,7 @@ export class IconBase {
65
70
  ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
66
71
  titleAttr = input(...(ngDevMode ? [undefined, { debugName: "titleAttr" }] : []));
67
72
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: IconBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
68
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: IconBase, isStandalone: true, inputs: { alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, secondaryColor: { classPropertyName: "secondaryColor", publicName: "secondaryColor", isSignal: true, isRequired: false, transformFunction: null }, secondaryOpacity: { classPropertyName: "secondaryOpacity", publicName: "secondaryOpacity", isSignal: true, isRequired: false, transformFunction: null }, isolated: { classPropertyName: "isolated", publicName: "isolated", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, titleAttr: { classPropertyName: "titleAttr", publicName: "titleAttr", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24", "fill": "none" }, properties: { "attr.width": "defaultWidth()", "attr.height": "defaultHeight()", "attr.color": "defaultColor()", "attr.stroke-width": "defaultStrokeWidth()", "style.width": "explicitWidth()", "style.height": "explicitHeight()", "style.color": "explicitColor()", "style.stroke-width": "explicitStrokeWidth()", "attr.aria-hidden": "alt() || ariaLabel() || titleAttr() ? null : \"true\"", "style.--solar-secondary-color": "duotoneColor()", "style.--solar-secondary-opacity": "duotoneOpacityStr()" } }, ngImport: i0 });
73
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: IconBase, isStandalone: true, inputs: { alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, secondaryColor: { classPropertyName: "secondaryColor", publicName: "secondaryColor", isSignal: true, isRequired: false, transformFunction: null }, secondaryOpacity: { classPropertyName: "secondaryOpacity", publicName: "secondaryOpacity", isSignal: true, isRequired: false, transformFunction: null }, isolated: { classPropertyName: "isolated", publicName: "isolated", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, titleAttr: { classPropertyName: "titleAttr", publicName: "titleAttr", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24", "fill": "none" }, properties: { "attr.width": "defaultWidth()", "attr.height": "defaultHeight()", "attr.color": "defaultColor()", "attr.stroke-width": "defaultStrokeWidth()", "style.width": "explicitWidth()", "style.height": "explicitHeight()", "style.color": "explicitColor()", "style.stroke-width": "explicitStrokeWidth()", "attr.aria-hidden": "alt() || ariaLabel() || titleAttr() ? null : \"true\"", "style.--solar-secondary-color": "duotoneColor()", "style.--solar-secondary-opacity": "duotoneOpacityStr()", "style.font-size": "defaultFontSize()" } }, ngImport: i0 });
69
74
  }
70
75
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: IconBase, decorators: [{
71
76
  type: Directive,
@@ -86,6 +91,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
86
91
  '[attr.aria-hidden]': 'alt() || ariaLabel() || titleAttr() ? null : "true"',
87
92
  '[style.--solar-secondary-color]': 'duotoneColor()',
88
93
  '[style.--solar-secondary-opacity]': 'duotoneOpacityStr()',
94
+ '[style.font-size]': 'defaultFontSize()',
89
95
  },
90
96
  }]
91
97
  }], propDecorators: { alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], secondaryColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryColor", required: false }] }], secondaryOpacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryOpacity", required: false }] }], isolated: [{ type: i0.Input, args: [{ isSignal: true, alias: "isolated", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], titleAttr: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleAttr", required: false }] }] } });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@solar-icons/angular",
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"
@@ -48,7 +48,7 @@
48
48
  "typescript": "~6.0.3",
49
49
  "vitest": "^4.1.10",
50
50
  "zone.js": "^0.16.2",
51
- "@solar-icons/core": "2.0.0-beta.0"
51
+ "@solar-icons/core": "2.0.0-beta.1"
52
52
  },
53
53
  "peerDependencies": {
54
54
  "@angular/common": "17.x - 22.x",