@iconoma/cli 0.0.3 → 0.0.5

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 +95 -91
  2. package/package.json +5 -8
package/README.md CHANGED
@@ -1,91 +1,95 @@
1
- # Iconoma
2
-
3
- [![github](https://img.shields.io/badge/github-repo-blue?logo=github)](https://github.com/theryston/iconoma)
4
- [![Version](https://img.shields.io/npm/v/@iconoma/cli.svg)](https://npmjs.org/package/@iconoma/cli)
5
- [![Downloads/week](https://img.shields.io/npm/dw/@iconoma/cli.svg)](https://npmjs.org/package/@iconoma/cli)
6
-
7
- **Iconoma** is a complete **icon management system** (CLI + Studio) that helps teams and products **organize, standardize, version, and distribute icons** with a reliable workflow.
8
-
9
- Instead of keeping random SVG files scattered across the repo, Iconoma turns your icon library into a **structured, reproducible pipeline**: clean SVGs with SVGO, enforce consistency (colors, metadata, conventions), and generate the targets your apps need (SVG files, React components, React Native components).
10
-
11
- Start using it now by running this in your project:
12
-
13
- ```bash
14
- npx @iconoma/cli studio
15
- ```
16
-
17
- ---
18
-
19
- ## Why Iconoma
20
-
21
- Icon libraries tend to become messy as projects grow:
22
-
23
- - inconsistent sizes and alignment (icons "look bigger" even with the same size)
24
- - hardcoded colors that break themes/dark mode
25
- - duplicated icons with different names
26
- - manual export steps (time-consuming and error-prone)
27
- - multiple platforms needing different formats (Web + React + React Native)
28
-
29
- Iconoma solves that by providing a **single source of truth (the studio)** for your icon catalog and an automated build system.
30
-
31
- ---
32
-
33
- ## What you get
34
-
35
- ### ✅ Icon catalog with metadata
36
-
37
- Each icon can have:
38
-
39
- - a canonical **name**
40
- - **tags** for search and organization
41
- - optimized SVG content
42
- - generated outputs (targets)
43
-
44
- This makes it easy to keep icons discoverable and consistent across the team.
45
-
46
- ### ✅ SVGO optimization + custom configuration
47
-
48
- Iconoma uses **SVGO** to optimize and normalize your SVGs (removing unnecessary data, minimizing output, and improving consistency).
49
-
50
- You can **fully customize the SVGO config** to match your rules and design system (plugins, params, presets, etc.).
51
-
52
- ### ✅ Color mapping and theming-friendly icons
53
-
54
- SVGs frequently arrive with hardcoded colors like `#000`, `#111`, `white`, etc.
55
-
56
- Iconoma supports a **color map** approach so you can convert colors into:
57
-
58
- - `currentColor`
59
- - CSS variables/tokens (e.g. `var(--icons-secondary)`)
60
-
61
- This makes icons theme-friendly and prevents "random SVG colors" from leaking into your UI.
62
-
63
- ### ✅ Automatic target generation (React, React Native, SVG)
64
-
65
- Iconoma can automatically generate the targets you need, including:
66
-
67
- - **`.svg` files** (optimized/normalized)
68
- - **React components**
69
- - **React Native components**
70
-
71
- Targets are treated as build outputs, so you can keep a clean pipeline for multiple platforms.
72
-
73
- ### ✅ Lockfile-based reproducible builds
74
-
75
- Iconoma keeps a lockfile called `iconoma.lock.json` that stores:
76
-
77
- - SVG hashes
78
- - config hashes
79
- - target outputs and what they were built from
80
-
81
- This makes builds **deterministic**, helps you to understand the changes using Git.
82
-
83
- ### ✅ Studio (UI) integrated with the workflow
84
-
85
- Iconoma includes a "Studio" interface to make icon curation easier:
86
-
87
- - browse and search icons
88
- - preview icons in different sizes/themes
89
- - manage names/tags
90
- - validate consistency visually
91
- - run builds/transforms from a friendly UI
1
+ # Iconoma
2
+
3
+ [![github](https://img.shields.io/badge/github-repo-blue?logo=github)](https://github.com/theryston/iconoma)
4
+ [![Version](https://img.shields.io/npm/v/@iconoma/cli.svg)](https://npmjs.org/package/@iconoma/cli)
5
+ [![Downloads/week](https://img.shields.io/npm/dw/@iconoma/cli.svg)](https://npmjs.org/package/@iconoma/cli)
6
+
7
+ **Iconoma** is a complete **icon management system** (CLI + Studio) that helps teams and products **organize, standardize, version, and distribute icons** with a reliable workflow.
8
+
9
+ Instead of keeping random SVG files scattered across the repo, Iconoma turns your icon library into a **structured, reproducible pipeline**: clean SVGs with SVGO, enforce consistency (colors, metadata, conventions), and generate the targets your apps need (SVG files, React components, React Native components).
10
+
11
+ Start using it now by running this in your project:
12
+
13
+ ```bash
14
+ npx @iconoma/cli studio
15
+ ```
16
+
17
+ ---
18
+
19
+ ## Why Iconoma
20
+
21
+ Icon libraries tend to become messy as projects grow:
22
+
23
+ - inconsistent sizes and alignment (icons "look bigger" even with the same size)
24
+ - hardcoded colors that break themes/dark mode
25
+ - duplicated icons with different names
26
+ - manual export steps (time-consuming and error-prone)
27
+ - multiple platforms needing different formats (Web + React + React Native)
28
+
29
+ Iconoma solves that by providing a **single source of truth (the studio)** for your icon catalog and an automated build system.
30
+
31
+ ---
32
+
33
+ ## What you get
34
+
35
+ ### ✅ Icon catalog with metadata
36
+
37
+ Each icon can have:
38
+
39
+ - a canonical **name**
40
+ - **tags** for search and organization
41
+ - optimized SVG content
42
+ - generated outputs (targets)
43
+
44
+ This makes it easy to keep icons discoverable and consistent across the team.
45
+
46
+ ### ✅ Zero dependencies in your project
47
+
48
+ Iconoma adds **no dependencies** to your project. It handles and adds the icon outputs directly in your project, already ready for use, without any dependencies. You don't even need to install Iconoma in your project—just use `npx @iconoma/cli` when needed.
49
+
50
+ ### ✅ SVGO optimization + custom configuration
51
+
52
+ Iconoma uses **SVGO** to optimize and normalize your SVGs (removing unnecessary data, minimizing output, and improving consistency).
53
+
54
+ You can **fully customize the SVGO config** to match your rules and design system (plugins, params, presets, etc.).
55
+
56
+ ### ✅ Color mapping and theming-friendly icons
57
+
58
+ SVGs frequently arrive with hardcoded colors like `#000`, `#111`, `white`, etc.
59
+
60
+ Iconoma supports a **color map** approach so you can convert colors into:
61
+
62
+ - `currentColor`
63
+ - CSS variables/tokens (e.g. `var(--icons-secondary)`)
64
+
65
+ This makes icons theme-friendly and prevents "random SVG colors" from leaking into your UI.
66
+
67
+ ### ✅ Automatic target generation (React, React Native, SVG)
68
+
69
+ Iconoma can automatically generate the targets you need, including:
70
+
71
+ - **`.svg` files** (optimized/normalized)
72
+ - **React components**
73
+ - **React Native components**
74
+
75
+ Targets are treated as build outputs, so you can keep a clean pipeline for multiple platforms.
76
+
77
+ ### ✅ Lockfile-based reproducible builds
78
+
79
+ Iconoma keeps a lockfile called `iconoma.lock.json` that stores:
80
+
81
+ - SVG hashes
82
+ - config hashes
83
+ - target outputs and what they were built from
84
+
85
+ This makes builds **deterministic**, helps you to understand the changes using Git.
86
+
87
+ ### ✅ Studio (UI) integrated with the workflow
88
+
89
+ Iconoma includes a "Studio" interface to make icon curation easier:
90
+
91
+ - browse and search icons
92
+ - preview icons in different sizes/themes
93
+ - manage names/tags
94
+ - validate consistency visually
95
+ - run builds/transforms from a friendly UI
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@iconoma/cli",
3
3
  "description": "A developer-friendly tool to manage and organize icons through CLI and web studio",
4
- "version": "0.0.3",
4
+ "version": "0.0.5",
5
5
  "author": "Theryston Santos @Theryston",
6
6
  "bin": {
7
7
  "iconoma": "bin/run.js"
@@ -18,7 +18,7 @@
18
18
  "gradient-string": "^3.0.0",
19
19
  "nanospinner": "^1.2.2",
20
20
  "open": "^11.0.0",
21
- "@iconoma/studio": "0.0.5"
21
+ "@iconoma/studio": "0.1.0"
22
22
  },
23
23
  "devDependencies": {
24
24
  "@types/chai": "^4",
@@ -31,8 +31,8 @@
31
31
  "shx": "^0.3.3",
32
32
  "ts-node": "^10",
33
33
  "typescript": "^5",
34
- "@iconoma/typescript-config": "0.0.0",
35
- "@iconoma/eslint-config": "0.0.0"
34
+ "@iconoma/eslint-config": "0.0.0",
35
+ "@iconoma/typescript-config": "0.0.0"
36
36
  },
37
37
  "engines": {
38
38
  "node": ">=18.0.0"
@@ -78,10 +78,7 @@
78
78
  }
79
79
  }
80
80
  },
81
- "repository": {
82
- "type": "git",
83
- "url": "git+https://github.com/theryston/iconoma.git"
84
- },
81
+ "repository": "github:Theryston/iconoma",
85
82
  "types": "dist/index.d.ts",
86
83
  "scripts": {
87
84
  "build": "shx rm -rf dist && tsc -b",