@featherk/icons 0.13.6 → 0.13.8
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 +7 -0
- package/dist/custom-icon.d.ts +1 -1
- package/dist/featherk-icons.es.js +9 -0
- package/dist/featherk-icons.es.js.map +1 -1
- package/dist/featherk-icons.umd.js +5 -1
- package/dist/featherk-icons.umd.js.map +1 -1
- package/docs/ADDING-ICONS.md +58 -0
- package/docs/ICONS.md +10 -10
- package/package.json +1 -1
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
# Adding Icons
|
|
2
|
+
|
|
3
|
+
`@featherk/icons` is a curated distribution of icons maintained in the
|
|
4
|
+
[NantHealth/iconography](https://github.com/NantHealth/iconography) repository.
|
|
5
|
+
Iconography is the source of truth: select and copy approved SVGs from there
|
|
6
|
+
instead of creating or independently editing icon assets in this package. The
|
|
7
|
+
iconography repository provides validation tools for its source assets.
|
|
8
|
+
|
|
9
|
+
## Source and destination
|
|
10
|
+
|
|
11
|
+
Keep the category directory and filename when copying an icon:
|
|
12
|
+
|
|
13
|
+
| Source in `iconography` | Destination in this repository |
|
|
14
|
+
| --- | --- |
|
|
15
|
+
| `src/icons/<category>/ic_Name.svg` | `packages/icons/icon/<category>/ic_Name.svg` |
|
|
16
|
+
|
|
17
|
+
For example, copy `src/icons/action/ic_Edit.svg` to
|
|
18
|
+
`packages/icons/icon/action/ic_Edit.svg`. Only copy icons selected for the
|
|
19
|
+
FeatherK package; the package is curated and does not automatically mirror the
|
|
20
|
+
entire iconography repository.
|
|
21
|
+
|
|
22
|
+
## Workflow
|
|
23
|
+
|
|
24
|
+
1. In the iconography repository, choose the approved SVGs from the appropriate
|
|
25
|
+
`src/icons/<category>/` directories. Preserve their filenames and category
|
|
26
|
+
structure.
|
|
27
|
+
2. From the iconography repository root, validate the source icons:
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
npm run validate:icons
|
|
31
|
+
npm run validate:icons:full
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
The standard check validates naming, the 24-by-24 viewBox, fill values,
|
|
35
|
+
missing IDs, and duplicate filenames. The full check also enforces the 5 KB
|
|
36
|
+
file-size limit. After changing the source inventory, refresh it with
|
|
37
|
+
`npm run document:icons`.
|
|
38
|
+
3. Copy the selected SVG files unchanged into the matching category directories
|
|
39
|
+
under `packages/icons/icon/`. Create the destination category directory if
|
|
40
|
+
needed. Do not copy generated package output in place of the SVG source
|
|
41
|
+
files.
|
|
42
|
+
4. From the FeatherK repository root, regenerate the package icon registry and
|
|
43
|
+
gallery:
|
|
44
|
+
|
|
45
|
+
```bash
|
|
46
|
+
npm run generate:icons --workspace=@featherk/icons
|
|
47
|
+
npm run generate:readme --workspace=@featherk/icons
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
5. Check the generated registry and gallery, then build and test the icons
|
|
51
|
+
package before submitting the change.
|
|
52
|
+
|
|
53
|
+
## Package names
|
|
54
|
+
|
|
55
|
+
The package generator derives each public icon name from its filename by
|
|
56
|
+
removing the `ic_` prefix and `.svg` extension, then lowercasing the remainder.
|
|
57
|
+
For example, `ic_User_Profile.svg` becomes `user_profile`. Keep filenames
|
|
58
|
+
unique across categories; the iconography validator checks this requirement.
|
package/docs/ICONS.md
CHANGED
|
@@ -4,21 +4,21 @@
|
|
|
4
4
|
|
|
5
5
|
## Icon gallery
|
|
6
6
|
|
|
7
|
-
### Account (
|
|
7
|
+
### Account (29)
|
|
8
8
|
|
|
9
9
|
<!-- markdownlint-disable MD033-->
|
|
10
10
|
| | | | | | |
|
|
11
11
|
|---|---|---|---|---|---|
|
|
12
12
|
|<img src="../icon/account/ic_Add_User.svg" alt="ic_add_user" width="48" height="48"/>|<img src="../icon/account/ic_Brightness.svg" alt="ic_brightness" width="48" height="48"/>|<img src="../icon/account/ic_Change_User.svg" alt="ic_change_user" width="48" height="48"/>|<img src="../icon/account/ic_Chat_Support.svg" alt="ic_chat_support" width="48" height="48"/>|<img src="../icon/account/ic_Configuration.svg" alt="ic_configuration" width="48" height="48"/>|<img src="../icon/account/ic_Configure.svg" alt="ic_configure" width="48" height="48"/>|
|
|
13
13
|
|add_user|brightness|change_user|chat_support|configuration|configure|
|
|
14
|
-
|<img src="../icon/account/ic_Feedback.svg" alt="ic_feedback" width="48" height="48"/>|<img src="../icon/account/
|
|
15
|
-
|feedback|guide|help|help_circle|help_circle_solid|
|
|
16
|
-
|<img src="../icon/account/
|
|
17
|
-
|learning|live_chat|log_in|log_out|remove_user|
|
|
18
|
-
|<img src="../icon/account/
|
|
19
|
-
|settings|support|theme|user|user_circle|
|
|
20
|
-
|<img src="../icon/account/ic_User_Group.svg" alt="ic_user_group" width="48" height="48"/>|<img src="../icon/account/ic_User_Security.svg" alt="ic_user_security" width="48" height="48"/>|<img src="../icon/account/ic_User_Settings.svg" alt="ic_user_settings" width="48" height="48"/>|<img src="../icon/account/ic_Validate_User.svg" alt="ic_validate_user" width="48" height="48"/>| |
|
|
21
|
-
|user_group|user_security|user_settings|validate_user| |
|
|
14
|
+
|<img src="../icon/account/ic_Feedback.svg" alt="ic_feedback" width="48" height="48"/>|<img src="../icon/account/ic_Forum.svg" alt="ic_forum" width="48" height="48"/>|<img src="../icon/account/ic_Guide.svg" alt="ic_guide" width="48" height="48"/>|<img src="../icon/account/ic_Help.svg" alt="ic_help" width="48" height="48"/>|<img src="../icon/account/ic_Help_Circle.svg" alt="ic_help_circle" width="48" height="48"/>|<img src="../icon/account/ic_Help_Circle_Solid.svg" alt="ic_help_circle_solid" width="48" height="48"/>|
|
|
15
|
+
|feedback|forum|guide|help|help_circle|help_circle_solid|
|
|
16
|
+
|<img src="../icon/account/ic_ID_Card.svg" alt="ic_id_card" width="48" height="48"/>|<img src="../icon/account/ic_Learning.svg" alt="ic_learning" width="48" height="48"/>|<img src="../icon/account/ic_Live_Chat.svg" alt="ic_live_chat" width="48" height="48"/>|<img src="../icon/account/ic_Log_In.svg" alt="ic_log_in" width="48" height="48"/>|<img src="../icon/account/ic_Log_Out.svg" alt="ic_log_out" width="48" height="48"/>|<img src="../icon/account/ic_Remove_User.svg" alt="ic_remove_user" width="48" height="48"/>|
|
|
17
|
+
|id_card|learning|live_chat|log_in|log_out|remove_user|
|
|
18
|
+
|<img src="../icon/account/ic_Resources.svg" alt="ic_resources" width="48" height="48"/>|<img src="../icon/account/ic_Settings.svg" alt="ic_settings" width="48" height="48"/>|<img src="../icon/account/ic_Support.svg" alt="ic_support" width="48" height="48"/>|<img src="../icon/account/ic_Theme.svg" alt="ic_theme" width="48" height="48"/>|<img src="../icon/account/ic_User.svg" alt="ic_user" width="48" height="48"/>|<img src="../icon/account/ic_User_Circle.svg" alt="ic_user_circle" width="48" height="48"/>|
|
|
19
|
+
|resources|settings|support|theme|user|user_circle|
|
|
20
|
+
|<img src="../icon/account/ic_User_Circle_Solid.svg" alt="ic_user_circle_solid" width="48" height="48"/>|<img src="../icon/account/ic_User_Group.svg" alt="ic_user_group" width="48" height="48"/>|<img src="../icon/account/ic_User_Security.svg" alt="ic_user_security" width="48" height="48"/>|<img src="../icon/account/ic_User_Settings.svg" alt="ic_user_settings" width="48" height="48"/>|<img src="../icon/account/ic_Validate_User.svg" alt="ic_validate_user" width="48" height="48"/>| |
|
|
21
|
+
|user_circle_solid|user_group|user_security|user_settings|validate_user| |
|
|
22
22
|
<!-- markdownlint-enable MD033-->
|
|
23
23
|
### Action (115)
|
|
24
24
|
|
|
@@ -211,4 +211,4 @@
|
|
|
211
211
|
|rating_star_selected|switch_left|switch_off|switch_on|switch_right| |
|
|
212
212
|
<!-- markdownlint-enable MD033-->
|
|
213
213
|
|
|
214
|
-
> Generated: 2026-09-
|
|
214
|
+
> Generated: 2026-09-29T20:37:37.215Z
|