@tociva/tailng-icons 0.1.0 → 0.7.0

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 (2) hide show
  1. package/README.md +130 -10
  2. package/package.json +9 -1
package/README.md CHANGED
@@ -1,18 +1,138 @@
1
1
  # @tociva/tailng-icons
2
2
 
3
- Angular icon components and utilities for Tailng.
3
+ Angular icon components built on top of `@ng-icons/core` with Tailwind CSS support.
4
4
 
5
- This package provides a lightweight, tree-shakable icon system built for
6
- modern Angular applications. Icons are rendered using SVG and styled via
7
- `currentColor`, making them fully compatible with Tailwind CSS.
5
+ ## Overview
6
+
7
+ `@tociva/tailng-icons` provides a lightweight, tree-shakable icon system for modern Angular applications. Icons are rendered as SVG and styled via `currentColor`, making them fully compatible with Tailwind CSS utility classes.
8
+
9
+ ## Installation
10
+
11
+ ```bash
12
+ npm install @tociva/tailng-icons
13
+ ```
14
+
15
+ You'll also need to install the icon registry you want to use. For Bootstrap Icons:
16
+
17
+ ```bash
18
+ npm install @ng-icons/bootstrap-icons
19
+ ```
20
+
21
+ ## Peer Dependencies
22
+
23
+ - `@angular/core`: ^21.0.0
24
+ - `@angular/common`: ^21.0.0
25
+ - `@ng-icons/core`: ^30.0.0
8
26
 
9
27
  ## Features
10
- - Standalone Angular icon component
11
- - Signal-based API
28
+
29
+ - Standalone Angular component
30
+ - Signal-based API using Angular signals
12
31
  - Tree-shakable icon definitions
13
- - `currentColor`-based SVG icons
32
+ - `currentColor`-based SVG icons (works with Tailwind)
33
+ - Flexible sizing (number, string, or CSS units)
34
+ - Built-in accessibility support
14
35
  - No CSS or styling opinions
15
36
 
16
- ## Installation
17
- ```bash
18
- npm install @tociva/tailng-icons
37
+ ## Usage
38
+
39
+ ### Basic Usage
40
+
41
+ ```typescript
42
+ import { Component } from '@angular/core';
43
+ import { TailngIconComponent } from '@tociva/tailng-icons';
44
+ import { bootstrapCheckCircle } from '@ng-icons/bootstrap-icons';
45
+
46
+ @Component({
47
+ selector: 'app-example',
48
+ standalone: true,
49
+ imports: [TailngIconComponent],
50
+ providers: [
51
+ {
52
+ provide: NgIconsToken,
53
+ useValue: { bootstrapCheckCircle },
54
+ },
55
+ ],
56
+ template: `
57
+ <tng-icon name="bootstrapCheckCircle" />
58
+ `,
59
+ })
60
+ export class ExampleComponent {}
61
+ ```
62
+
63
+ ### With Size
64
+
65
+ ```typescript
66
+ // Number (pixels)
67
+ <tng-icon name="bootstrapCheckCircle" [size]="24" />
68
+
69
+ // String (CSS units)
70
+ <tng-icon name="bootstrapCheckCircle" size="1.5rem" />
71
+ <tng-icon name="bootstrapCheckCircle" size="2em" />
72
+ ```
73
+
74
+ ### With Tailwind Classes
75
+
76
+ Icons use `currentColor`, so you can style them with Tailwind:
77
+
78
+ ```html
79
+ <tng-icon
80
+ name="bootstrapCheckCircle"
81
+ class="text-green-500"
82
+ />
83
+ ```
84
+
85
+ ### Accessibility
86
+
87
+ ```html
88
+ <!-- Decorative icon (default) -->
89
+ <tng-icon name="bootstrapCheckCircle" />
90
+
91
+ <!-- Semantic icon with label -->
92
+ <tng-icon
93
+ name="bootstrapCheckCircle"
94
+ [decorative]="false"
95
+ ariaLabel="Success"
96
+ />
97
+ ```
98
+
99
+ ## API Reference
100
+
101
+ ### `TailngIconComponent`
102
+
103
+ #### Inputs
104
+
105
+ - **`name`** (required): `string` - Icon name from the `@ng-icons` registry
106
+ - **`size`**: `number | string` - Icon size. Number is treated as pixels, string is passed as-is (e.g., '1em', '20px', '1.25rem'). Default: `'1em'`
107
+ - **`klass`**: `string` - Additional CSS classes for the host element
108
+ - **`decorative`**: `boolean` - Whether the icon is decorative. If `true`, `aria-hidden` is set. Default: `true`
109
+ - **`ariaLabel`**: `string` - Accessibility label (used when `decorative` is `false`)
110
+
111
+ #### Computed Properties
112
+
113
+ - **`normalizedSize`**: Converts size to CSS string
114
+ - **`classes`**: Computed class string including Tailwind utilities
115
+ - **`ariaHidden`**: `'true' | null` based on decorative state
116
+ - **`computedAriaLabel`**: Computed aria-label based on decorative state
117
+
118
+ ## Supported Icon Sets
119
+
120
+ This package works with any icon set supported by `@ng-icons/core`, including:
121
+
122
+ - Bootstrap Icons
123
+ - Heroicons
124
+ - Material Icons
125
+ - Font Awesome
126
+ - And many more...
127
+
128
+ See the [`@ng-icons` documentation](https://ng-icons.github.io/ng-icons/) for a complete list.
129
+
130
+ ## Related Packages
131
+
132
+ - [`@tociva/tailng-ui`](../ui/README.md) - UI components that use these icons
133
+ - [`@tociva/tailng-cdk`](../cdk/README.md) - Component development kit
134
+ - [`@tociva/tailng-theme`](../theme/README.md) - Tailwind CSS theme preset
135
+
136
+ ## License
137
+
138
+ MIT
package/package.json CHANGED
@@ -1,8 +1,16 @@
1
1
  {
2
2
  "name": "@tociva/tailng-icons",
3
- "version": "0.1.0",
3
+ "version": "0.7.0",
4
4
  "description": "Angular icon components for Tailng",
5
5
  "license": "MIT",
6
+ "repository": {
7
+ "type": "git",
8
+ "url": "https://github.com/tociva/tailng.git"
9
+ },
10
+ "homepage": "https://github.com/tociva/tailng",
11
+ "bugs": {
12
+ "url": "https://github.com/tociva/tailng/issues"
13
+ },
6
14
  "sideEffects": false,
7
15
  "peerDependencies": {
8
16
  "@angular/core": "^21.0.0",