@featherk/icons 0.15.8 → 0.16.1
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 +25 -13
- package/dist/docs-manifest.d.ts +1 -0
- package/dist/docs-manifest.js +7 -5
- package/dist/fontawesome/build.cjs +1 -2
- package/dist/fontawesome/build.d.ts +1 -1
- package/dist/fontawesome/build.mjs +2 -3
- package/dist/fontawesome/catalog.cjs +0 -13
- package/dist/fontawesome/catalog.d.ts +0 -8
- package/dist/fontawesome/catalog.mjs +0 -13
- package/dist/fontawesome/chunks/{generate-BBurrhLv.cjs → generate-B_FxftR7.cjs} +12 -1
- package/dist/fontawesome/chunks/{generate-Zq9q2YZD.mjs → generate-DF9R65sV.mjs} +13 -2
- package/dist/fontawesome/chunks/manifest-CF473fsM.mjs +61 -0
- package/dist/fontawesome/chunks/manifest-DEhGKvmi.cjs +60 -0
- package/dist/fontawesome/cli.cjs +23 -26
- package/dist/fontawesome/cli.mjs +23 -26
- package/dist/fontawesome/generate.d.ts +7 -0
- package/dist/fontawesome/manifest.d.ts +35 -0
- package/dist/fontawesome/setup.cjs +147 -179
- package/dist/fontawesome/setup.d.ts +2 -2
- package/dist/fontawesome/setup.mjs +149 -181
- package/dist/fontawesome/vite.cjs +64 -28
- package/dist/fontawesome/vite.d.ts +25 -5
- package/dist/fontawesome/vite.mjs +65 -29
- package/docs/ADDING-ICONS.md +4 -3
- package/docs/COMING-SOON.md +24 -14
- package/docs/ICONS.md +1 -1
- package/docs/fontawesome/CreateFontAwesomeManifest.md +12 -12
- package/docs/fontawesome/FontAwesome.md +47 -48
- package/docs/fontawesome/FontAwesomeCLI.md +14 -19
- package/docs/fontawesome/FontAwesomeDeveloperSetup.md +134 -0
- package/docs/fontawesome/LICENSING.md +61 -82
- package/package.json +1 -1
- package/dist/fontawesome/chunks/manifest-BB3q10t1.mjs +0 -20
- package/dist/fontawesome/chunks/manifest-C15Xa22L.cjs +0 -19
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { resolve } from "node:path";
|
|
1
|
+
import { resolve, relative } from "node:path";
|
|
2
2
|
import { realpath } from "node:fs/promises";
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
3
|
+
import { g as generateFaIcons, s as summarizeFaIcons } from "./chunks/generate-DF9R65sV.mjs";
|
|
4
|
+
import { f as fontAwesomeProSourcesDir, r as readFontAwesomeManifest, s as selectFontAwesomeManifestKeys } from "./chunks/manifest-CF473fsM.mjs";
|
|
5
5
|
const virtualId = "virtual:featherk/fontawesome";
|
|
6
6
|
const resolvedId = `\0${virtualId}`;
|
|
7
7
|
function dependencyKey(file) {
|
|
@@ -9,20 +9,56 @@ function dependencyKey(file) {
|
|
|
9
9
|
return process.platform === "win32" ? path.toLowerCase() : path;
|
|
10
10
|
}
|
|
11
11
|
function featherkFontAwesome(options) {
|
|
12
|
+
const legacy = options;
|
|
13
|
+
if (legacy.keys !== void 0 || legacy.allowPro !== void 0) {
|
|
14
|
+
throw new Error(
|
|
15
|
+
'Font Awesome Vite options "keys" and "allowPro" were removed in 0.16.0. List the keys in a { free, pro } manifest and pass { manifest: "fontawesome.keys.json" }.'
|
|
16
|
+
);
|
|
17
|
+
}
|
|
18
|
+
if (legacy.sourceRoot !== void 0 || legacy.proMode !== void 0) {
|
|
19
|
+
throw new Error(
|
|
20
|
+
`Font Awesome Vite options "sourceRoot" and "proMode" were removed in 0.16.0. Pro sources always live in ${fontAwesomeProSourcesDir}/ and are used wherever it is installed; pass only { manifest }.`
|
|
21
|
+
);
|
|
22
|
+
}
|
|
23
|
+
if (typeof options.manifest !== "string" || !options.manifest.trim()) {
|
|
24
|
+
throw new Error(
|
|
25
|
+
'Font Awesome Vite options require a manifest path, such as { manifest: "fontawesome.keys.json" }'
|
|
26
|
+
);
|
|
27
|
+
}
|
|
12
28
|
let root = resolve(options.root ?? process.cwd());
|
|
29
|
+
let logger;
|
|
13
30
|
let generation;
|
|
14
31
|
let dependencies = /* @__PURE__ */ new Set();
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
32
|
+
let watchFiles = [];
|
|
33
|
+
async function resolveSelection() {
|
|
34
|
+
const manifestFile = resolve(root, options.manifest);
|
|
35
|
+
const manifest = await readFontAwesomeManifest(manifestFile).catch(
|
|
36
|
+
(error) => {
|
|
37
|
+
throw new Error(
|
|
38
|
+
`Cannot read Font Awesome manifest ${relative(root, manifestFile) || manifestFile}: ${error instanceof Error ? error.message : String(error)}`
|
|
39
|
+
);
|
|
40
|
+
}
|
|
41
|
+
);
|
|
42
|
+
return {
|
|
43
|
+
...selectFontAwesomeManifestKeys(manifest, root),
|
|
44
|
+
// Match the real paths that handleHotUpdate compares against.
|
|
45
|
+
manifestFile: await realpath(manifestFile)
|
|
46
|
+
};
|
|
47
|
+
}
|
|
48
|
+
function regenerate(selection) {
|
|
49
|
+
generation = (async () => {
|
|
50
|
+
const selected = selection ?? await resolveSelection();
|
|
51
|
+
const result = await generateFaIcons({
|
|
52
|
+
keys: selected.keys,
|
|
53
|
+
root,
|
|
54
|
+
sourceRoot: selected.sourceRoot,
|
|
55
|
+
allowPro: selected.allowPro,
|
|
56
|
+
virtualTypesFile: options.virtualTypesFile === false ? void 0 : options.virtualTypesFile ?? "src/featherk-fontawesome.d.ts"
|
|
57
|
+
});
|
|
58
|
+
watchFiles = [...result.dependencies, selected.manifestFile];
|
|
59
|
+
dependencies = new Set(watchFiles.map(dependencyKey));
|
|
24
60
|
return result;
|
|
25
|
-
});
|
|
61
|
+
})();
|
|
26
62
|
return generation;
|
|
27
63
|
}
|
|
28
64
|
return {
|
|
@@ -30,20 +66,12 @@ function featherkFontAwesome(options) {
|
|
|
30
66
|
enforce: "pre",
|
|
31
67
|
async configResolved(config) {
|
|
32
68
|
root = resolve(config.root, options.root ?? ".");
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
});
|
|
36
|
-
if (installCommand) {
|
|
37
|
-
console.info(
|
|
38
|
-
`[featherk-fontawesome] Install selected source packages with:
|
|
39
|
-
${installCommand}`
|
|
40
|
-
);
|
|
41
|
-
}
|
|
42
|
-
await regenerate();
|
|
69
|
+
if (config.command === "build") logger = config.logger;
|
|
70
|
+
await regenerate(await resolveSelection());
|
|
43
71
|
},
|
|
44
72
|
async buildStart() {
|
|
45
|
-
|
|
46
|
-
for (const file of
|
|
73
|
+
await regenerate();
|
|
74
|
+
for (const file of watchFiles) this.addWatchFile(file);
|
|
47
75
|
},
|
|
48
76
|
resolveId(id) {
|
|
49
77
|
return id === virtualId ? resolvedId : void 0;
|
|
@@ -53,14 +81,14 @@ ${installCommand}`
|
|
|
53
81
|
return (await (generation ?? regenerate())).moduleCode;
|
|
54
82
|
},
|
|
55
83
|
async configureServer(server) {
|
|
56
|
-
|
|
57
|
-
server.watcher.add(
|
|
84
|
+
await (generation ?? regenerate());
|
|
85
|
+
server.watcher.add(watchFiles);
|
|
58
86
|
},
|
|
59
87
|
async handleHotUpdate(context) {
|
|
60
88
|
const file = await realpath(context.file).catch(() => context.file);
|
|
61
89
|
if (!dependencies.has(dependencyKey(file))) return void 0;
|
|
62
|
-
|
|
63
|
-
context.server.watcher.add(
|
|
90
|
+
await regenerate();
|
|
91
|
+
context.server.watcher.add(watchFiles);
|
|
64
92
|
const module = context.server.moduleGraph.getModuleById(resolvedId);
|
|
65
93
|
if (module) context.server.moduleGraph.invalidateModule(module);
|
|
66
94
|
context.server.ws.send({ type: "full-reload" });
|
|
@@ -75,6 +103,14 @@ ${installCommand}`
|
|
|
75
103
|
source: result.notices
|
|
76
104
|
});
|
|
77
105
|
}
|
|
106
|
+
},
|
|
107
|
+
async closeBundle() {
|
|
108
|
+
const result = await generation?.catch(() => void 0);
|
|
109
|
+
if (logger && result) {
|
|
110
|
+
logger.info(
|
|
111
|
+
`[featherk-fontawesome] Generated ${summarizeFaIcons(result.provenance)}`
|
|
112
|
+
);
|
|
113
|
+
}
|
|
78
114
|
}
|
|
79
115
|
};
|
|
80
116
|
}
|
package/docs/ADDING-ICONS.md
CHANGED
|
@@ -10,8 +10,8 @@ iconography repository provides validation tools for its source assets.
|
|
|
10
10
|
|
|
11
11
|
Keep the category directory and filename when copying an icon:
|
|
12
12
|
|
|
13
|
-
| Source in `iconography`
|
|
14
|
-
|
|
|
13
|
+
| Source in `iconography` | Destination in this repository |
|
|
14
|
+
| ---------------------------------- | -------------------------------------------- |
|
|
15
15
|
| `src/icons/<category>/ic_Name.svg` | `packages/icons/icon/<category>/ic_Name.svg` |
|
|
16
16
|
|
|
17
17
|
For example, copy `src/icons/action/ic_Edit.svg` to
|
|
@@ -35,6 +35,7 @@ entire iconography repository.
|
|
|
35
35
|
missing IDs, and duplicate filenames. The full check also enforces the 5 KB
|
|
36
36
|
file-size limit. After changing the source inventory, refresh it with
|
|
37
37
|
`npm run document:icons`.
|
|
38
|
+
|
|
38
39
|
3. Copy the selected SVG files unchanged into the matching category directories
|
|
39
40
|
under `packages/icons/icon/`. Create the destination category directory if
|
|
40
41
|
needed. Do not copy generated package output in place of the SVG source
|
|
@@ -55,4 +56,4 @@ entire iconography repository.
|
|
|
55
56
|
The package generator derives each public icon name from its filename by
|
|
56
57
|
removing the `ic_` prefix and `.svg` extension, then lowercasing the remainder.
|
|
57
58
|
For example, `ic_User_Profile.svg` becomes `user_profile`. Keep filenames
|
|
58
|
-
unique across categories; the iconography validator checks this requirement.
|
|
59
|
+
unique across categories; the iconography validator checks this requirement.
|
package/docs/COMING-SOON.md
CHANGED
|
@@ -6,12 +6,13 @@ notice. They were moved out of the main README to keep the public surface area
|
|
|
6
6
|
stable while we iterate on behaviour and naming.
|
|
7
7
|
|
|
8
8
|
Quick summary:
|
|
9
|
+
|
|
9
10
|
- `getIconCssUrl` / `getIconCssUrlBase64` — convenience helpers that return a
|
|
10
|
-
|
|
11
|
-
|
|
11
|
+
wrapped `url("...")` string suitable for assigning directly to CSS
|
|
12
|
+
`background-image` (UTF‑8 and base64 variants respectively).
|
|
12
13
|
- `getIconDataUrlBase64` — base64-encoded data URL variant of `getIconDataUrl`.
|
|
13
14
|
- Usage examples and small CSS snippets that simplify embedding icons as
|
|
14
|
-
|
|
15
|
+
backgrounds or masks in styles.
|
|
15
16
|
|
|
16
17
|
Please treat these helpers as unstable. If you rely on them, expect possible
|
|
17
18
|
breaking changes in future releases and prefer the lower-level `getIconDataUrl`
|
|
@@ -30,20 +31,23 @@ import { getCustomIcon, getIconDataUrl } from "@featherk/icons";
|
|
|
30
31
|
const search = getCustomIcon("search");
|
|
31
32
|
const searchIconUrl = getIconDataUrl(search);
|
|
32
33
|
// Provide it to CSS via a custom property (example only)
|
|
33
|
-
document.documentElement.style.setProperty(
|
|
34
|
+
document.documentElement.style.setProperty(
|
|
35
|
+
"--search-icon",
|
|
36
|
+
`url("${searchIconUrl}")`,
|
|
37
|
+
);
|
|
34
38
|
```
|
|
35
39
|
|
|
36
40
|
```css
|
|
37
41
|
.button::after {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
42
|
+
content: "";
|
|
43
|
+
display: inline-block;
|
|
44
|
+
width: 1em;
|
|
45
|
+
height: 1em;
|
|
46
|
+
background: no-repeat center/contain var(--search-icon);
|
|
47
|
+
/* Alternatively, to tint using current text color:
|
|
44
48
|
mask: var(--search-icon) no-repeat center / contain;
|
|
45
49
|
background-color: currentColor; */
|
|
46
|
-
|
|
50
|
+
margin-left: 0.25rem;
|
|
47
51
|
}
|
|
48
52
|
```
|
|
49
53
|
|
|
@@ -53,7 +57,11 @@ If you prefer a ready-to-use CSS value, use `getIconCssUrl` (UTF‑8) or
|
|
|
53
57
|
`getIconCssUrlBase64` (base64). Both return a wrapped `url("...")` string.
|
|
54
58
|
|
|
55
59
|
```ts
|
|
56
|
-
import {
|
|
60
|
+
import {
|
|
61
|
+
getCustomIcon,
|
|
62
|
+
getIconCssUrl,
|
|
63
|
+
getIconCssUrlBase64,
|
|
64
|
+
} from "@featherk/icons";
|
|
57
65
|
|
|
58
66
|
const arrowLeft = getCustomIcon("arrow_left");
|
|
59
67
|
const arrowLeftBg = getIconCssUrl(arrowLeft);
|
|
@@ -74,6 +82,8 @@ import { getCustomIcon, getIconDataUrlBase64 } from "@featherk/icons";
|
|
|
74
82
|
const search = getCustomIcon("search");
|
|
75
83
|
const searchIconUrlBase64 = getIconDataUrlBase64(search);
|
|
76
84
|
// Example: set as CSS background
|
|
77
|
-
document.documentElement.style.setProperty(
|
|
85
|
+
document.documentElement.style.setProperty(
|
|
86
|
+
"--search-icon",
|
|
87
|
+
`url("${searchIconUrlBase64}")`,
|
|
88
|
+
);
|
|
78
89
|
```
|
|
79
|
-
|
package/docs/ICONS.md
CHANGED
|
@@ -13,17 +13,17 @@ The steps below help UX/Design create a precise handoff. Do not assume every ico
|
|
|
13
13
|
|
|
14
14
|
## Where Each Field Comes From
|
|
15
15
|
|
|
16
|
-
| Catalog field
|
|
17
|
-
|
|
|
18
|
-
| `key`
|
|
19
|
-
| `name`
|
|
20
|
-
| `version`
|
|
21
|
-
| `family`
|
|
22
|
-
| `style`
|
|
23
|
-
| `package`
|
|
24
|
-
| `registryPackage` | UX/Design Engineer
|
|
25
|
-
| `exportName`
|
|
26
|
-
| `tier`
|
|
16
|
+
| Catalog field | Who supplies it | Meaning |
|
|
17
|
+
| ----------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------- |
|
|
18
|
+
| `key` | UX/Design Engineer | Stable, globally unique lookup key for exactly one catalog variant; supplied to Vite/CLI by the consumer |
|
|
19
|
+
| `name` | Font Awesome catalog | Canonical icon name, such as `house`, without the `fa-` CSS prefix |
|
|
20
|
+
| `version` | UX and release approval | Exact source-package release, such as `7.0.0`, not `latest`, a range, or the first version that introduced the icon |
|
|
21
|
+
| `family` | UX/design selection | Supported family identifier, such as `classic` or `sharp` |
|
|
22
|
+
| `style` | UX/design selection | Supported style identifier, such as `solid`, `regular`, or `light` |
|
|
23
|
+
| `package` | UX/Design Engineer | Exact installed dependency name; may be an npm alias such as `fa-solid-v5` |
|
|
24
|
+
| `registryPackage` | UX/Design Engineer | Canonical npm package name targeted by `package` and checked against installed package metadata |
|
|
25
|
+
| `exportName` | UX/Design Engineer | Exact individual icon export in the source package |
|
|
26
|
+
| `tier` | UX/Design Engineer | `free` or `pro` classification for the exact variant; descriptive only, not proof of entitlement |
|
|
27
27
|
|
|
28
28
|
Each catalog key identifies one exact name/version/family/style/package/export variant. Different styles or releases require different keys. Catalog records are maintained and published by FeatherK; consuming applications do not copy these fields into their selection manifest. `tier` describes the Font Awesome product tier only; it does not grant access or establish license coverage. Package availability and Pro entitlement must still be confirmed independently.
|
|
29
29
|
|
|
@@ -79,7 +79,7 @@ The FeatherK catalog holds the complete metadata record. A consuming app lists o
|
|
|
79
79
|
}
|
|
80
80
|
```
|
|
81
81
|
|
|
82
|
-
|
|
82
|
+
Put Pro catalog keys in `pro`; a Pro key listed under `free` is rejected. The setup command installs Pro keys into the private `fontawesome-pro-sources/` project, and Vite and the CLI generate them wherever that project is installed (see [Quick Start](FontAwesome.md#quick-start)). In this repository the shared key file is `demos/fontawesome.keys.json`.
|
|
83
83
|
|
|
84
84
|
## Naming and Uniqueness Rules
|
|
85
85
|
|
|
@@ -6,21 +6,35 @@ The FeatherK UX/Design Engineer maintains the published catalog; the UX Team des
|
|
|
6
6
|
|
|
7
7
|
## Quick Start
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
2. Dev installs `@featherk/icons` with the Font Awesome Vite entry point and ensures compatible Vite 7.x or 8.x is available using [Install the Vite Integration](#install-the-vite-integration).
|
|
11
|
-
3. Dev checks the source mapping for selected keys, confirms access and availability, configures authorized registry access when required, then installs only the matching pinned npm packages using [Install Source Packages](#install-source-packages). For Pro, follow [Pro token setup](LICENSING.md#dev-setup-quick-start) before installation.
|
|
12
|
-
4. Dev configures the Vite plugin with only the selected keys. Pro keys require explicit Pro-profile opt-in and authorized installed sources; see [Vite Setup](#vite-setup).
|
|
13
|
-
5. Dev renders the selected descriptors through the virtual module using the [rendering example](#render-the-selected-key).
|
|
14
|
-
6. Dev preserves emitted license notices in application distribution as described in [Preserve license notices](#preserve-license-notices).
|
|
9
|
+
One keys-only manifest drives everything: the setup command installs exactly what it lists, and the Vite plugin generates exactly what it lists. For the full local and CI walkthrough, including TeamCity, see [FeatherK FontAwesome Developer Setup](FontAwesomeDeveloperSetup.md).
|
|
15
10
|
|
|
16
|
-
|
|
11
|
+
1. **Create the manifest.** Put the UX-provided catalog keys in `fontawesome.keys.json` at the application root (see [Choose Font Awesome Icons and Create a Manifest](CreateFontAwesomeManifest.md)). Pro keys go under `pro`, and the license owner confirms Pro entitlement first.
|
|
17
12
|
|
|
18
|
-
```json
|
|
19
|
-
{
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
}
|
|
23
|
-
```
|
|
13
|
+
```json
|
|
14
|
+
{
|
|
15
|
+
"free": ["user"],
|
|
16
|
+
"pro": []
|
|
17
|
+
}
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
2. **Install the packages.** From the application root, [install `@featherk/icons` and Vite](#install-the-vite-integration), then run the setup command with the same manifest. It pins Free packages into the application and Pro packages into a private `fontawesome-pro-sources/` project, at their exact catalog versions; with Pro keys, it prompts for the package token. Commit `fontawesome-pro-sources/` with the application. See [Pro licensing and setup](LICENSING.md#default-isolated-pro-sources).
|
|
21
|
+
|
|
22
|
+
```sh
|
|
23
|
+
npx featherk-fontawesome-setup --manifest fontawesome.keys.json
|
|
24
|
+
# No Pro keys? Add --free-only: public npm only, no token.
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
3. **Add the plugin** to `vite.config.ts` with the same manifest:
|
|
28
|
+
|
|
29
|
+
```ts
|
|
30
|
+
featherkFontAwesome({ manifest: "fontawesome.keys.json" });
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
4. **Build** with the application's normal `dev` and `build` scripts. Wherever `fontawesome-pro-sources/` is installed (step 2 locally, or the `npx featherk-fontawesome-setup` step in CI), builds include the Pro icons. Where it isn't installed, builds include only the Free icons.
|
|
34
|
+
5. **Render icons** from the virtual module; see the [rendering example](#render-the-selected-key).
|
|
35
|
+
6. **Preserve license notices** in application distribution; see [Preserve license notices](#preserve-license-notices).
|
|
36
|
+
|
|
37
|
+
That is the whole recommended setup for Free-only and Free and Pro applications alike. Because Pro packages live in `fontawesome-pro-sources/`, the application's own install never needs the token. Type checks that run before Vite and projects that don't use Vite are covered under [Advanced setups](#advanced-setups).
|
|
24
38
|
|
|
25
39
|
### Pro Demo Example
|
|
26
40
|
|
|
@@ -35,7 +49,7 @@ The repository's Pro demo selects Classic Light `house` from Font Awesome Pro 7
|
|
|
35
49
|
|
|
36
50
|
This follows the demo's Vite virtual-module flow. The Pro page filters generated provenance for `pro-` keys and passes the choices to its shared renderer; an application can also render this selected icon directly:
|
|
37
51
|
|
|
38
|
-
```
|
|
52
|
+
```html
|
|
39
53
|
<template>
|
|
40
54
|
<SvgIcon :icon="houseIcon" />
|
|
41
55
|
</template>
|
|
@@ -80,55 +94,33 @@ npm install --save-dev @featherk/icons vite@^7.0.0
|
|
|
80
94
|
|
|
81
95
|
## Install Source Packages
|
|
82
96
|
|
|
83
|
-
The catalog maps each key to its local dependency name, canonical registry package, export, and exact version
|
|
84
|
-
|
|
85
|
-
```sh
|
|
86
|
-
# Free source for the selected `user` key.
|
|
87
|
-
npm install --save-dev --save-exact @fortawesome/free-solid-svg-icons@7.0.0
|
|
88
|
-
|
|
89
|
-
# Pro package used by the example manifest.
|
|
90
|
-
npm install --save-dev --save-exact @fortawesome/pro-light-svg-icons@7.0.0
|
|
91
|
-
```
|
|
97
|
+
Run `featherk-fontawesome-setup --manifest fontawesome.keys.json` from the application root (Quick Start step 2). The catalog maps each key to its local dependency name, canonical registry package, export, and exact version, and the command installs only the packages the manifest needs, pinned to those versions, including npm aliases where one release must sit beside another (see [alias details](#about-aliases-and-why-use-them)). Free packages go into the application's `devDependencies`. Pro packages go into `fontawesome-pro-sources/`, whose `.npmrc` holds only a token placeholder, and the token is passed only to npm. On a fresh clone or in CI, run `npx featherk-fontawesome-setup` without arguments after the application's `npm ci` to install that project from its lockfile. See [Pro licensing and setup](LICENSING.md#consuming-applications) for the token, CI, TeamCity, and the `--free-only` exception. Never put a Pro token in a command or commit it.
|
|
92
98
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
Never put a Pro token in the command or commit it. See [Pro licensing and setup](LICENSING.md) for secure registry configuration.
|
|
96
|
-
|
|
97
|
-
The printed command is an install suggestion, not a license or access check. Pro builds still require separately configured authorized registry access and the explicit Pro profile. Vite may print the same selected-package command on each startup; it includes only packages mapped from that app's selected keys.
|
|
99
|
+
During generation, the installed package's declared name is checked against `registryPackage` and its version against the catalog before the icon module is loaded. When a package is missing, generation fails with a message that points to the setup command; nobody installs Font Awesome packages by hand. At the end of each build, Vite logs the source packages the icons came from, for information only. The setup command is not a license or access check.
|
|
98
100
|
|
|
99
101
|
## Vite Setup
|
|
100
102
|
|
|
101
|
-
|
|
103
|
+
Point the plugin at the manifest that `featherk-fontawesome-setup` installed from:
|
|
102
104
|
|
|
103
105
|
```ts
|
|
104
106
|
import { defineConfig } from "vite";
|
|
105
107
|
import vue from "@vitejs/plugin-vue";
|
|
106
108
|
import { featherkFontAwesome } from "@featherk/icons/fontawesome/vite";
|
|
107
|
-
import manifest from "./fontawesome.keys.json";
|
|
108
|
-
|
|
109
|
-
const proEnabled = process.env.FEATHERK_FONTAWESOME_PRO === "1";
|
|
110
109
|
|
|
111
|
-
// Step 1: Use UX-provided keys; verify any required Pro entitlement separately.
|
|
112
|
-
// Step 2: Ensure @featherk/icons and Vite 7 or 8 are available.
|
|
113
|
-
// Step 3: Install source packages mapped by the selected catalog keys before Vite starts.
|
|
114
110
|
export default defineConfig({
|
|
115
|
-
|
|
116
|
-
plugins: [
|
|
117
|
-
vue(),
|
|
118
|
-
featherkFontAwesome({
|
|
119
|
-
keys: [...manifest.free, ...(proEnabled ? manifest.pro : [])],
|
|
120
|
-
allowPro: proEnabled,
|
|
121
|
-
sourceRoot: proEnabled ? "pro" : undefined,
|
|
122
|
-
}),
|
|
123
|
-
],
|
|
111
|
+
plugins: [vue(), featherkFontAwesome({ manifest: "fontawesome.keys.json" })],
|
|
124
112
|
});
|
|
125
113
|
```
|
|
126
114
|
|
|
127
|
-
|
|
115
|
+
The plugin reads the manifest relative to the Vite project root and validates every key through the catalog. It always generates the `free` keys. When the project has `fontawesome-pro-sources/`, it adds the `pro` keys, resolved from that project, only when that project is installed (its `node_modules` exists); otherwise it never reads it. A build where the install was skipped is Free-only, and code that uses a Pro key then fails type checking, because the generated key union contains only Free keys. A manifest with `pro` keys in a project without `fontawesome-pro-sources/` fails with a message to run the setup command. A Pro-tier key listed under `free` is rejected with a message to move it to `pro`. Selecting keys this way is not license authorization. The plugin watches the manifest and reloads the dev server when it changes. The catalog supplies exact metadata, and the generator validates installed source versions and identities at runtime.
|
|
116
|
+
|
|
117
|
+
### Upgrading from 0.15
|
|
118
|
+
|
|
119
|
+
0.16.0 removed the plugin's `keys`, `allowPro`, and `sourceRoot` options; the setup command's `--keys`, `--source-root`, `--init`, `--force`, and `--refresh-lock`; and the CLI's `--allow-pro` and `--source-root`. Passing them fails with a message that explains the replacement. Move the keys into the manifest, pass `{ manifest }`, and rerun `featherk-fontawesome-setup --manifest fontawesome.keys.json`, which moves Pro packages into `fontawesome-pro-sources/`. Pro packages always live in `fontawesome-pro-sources/`; installing them into the application itself is not supported.
|
|
128
120
|
|
|
129
121
|
### Render the Selected Key
|
|
130
122
|
|
|
131
|
-
```
|
|
123
|
+
```html
|
|
132
124
|
<template>
|
|
133
125
|
<!-- Step 5: Render the generated descriptor directly through Kendo. -->
|
|
134
126
|
<SvgIcon :icon="userIcon" />
|
|
@@ -181,8 +173,7 @@ The real `content` contains the complete path data; the abbreviated example is n
|
|
|
181
173
|
While viewing the application on a running Vite dev server, inspect a descriptor from the browser console:
|
|
182
174
|
|
|
183
175
|
```js
|
|
184
|
-
const { getFaIcon } =
|
|
185
|
-
await import("/@id/__x00__virtual:featherk/fontawesome");
|
|
176
|
+
const { getFaIcon } = await import("/@id/__x00__virtual:featherk/fontawesome");
|
|
186
177
|
|
|
187
178
|
console.log(getFaIcon("rocket"));
|
|
188
179
|
```
|
|
@@ -217,6 +208,14 @@ Keep this file covered by the project's TypeScript `include` patterns, such as `
|
|
|
217
208
|
|
|
218
209
|
In the FeatherK monorepo, the exact root-relative pattern is `demos/src/featherk-fontawesome.d.ts`. ESLint's global ignores, `.prettierignore`, and `.gitignore` exclude that file; the demo TypeScript configuration still includes it. The generator, plugin, and handwritten declarations remain linted. If a type checker runs before Vite starts, see [CLI and non-Vite setup](FontAwesomeCLI.md) for declaration preparation. The library does not modify consumer lint configuration or inject ESLint-disable directives.
|
|
219
210
|
|
|
211
|
+
## Advanced Setups
|
|
212
|
+
|
|
213
|
+
Most applications need only the [Quick Start](#quick-start). Use these only when it doesn't fit.
|
|
214
|
+
|
|
215
|
+
### Type Checks Before Vite, and Non-Vite Projects
|
|
216
|
+
|
|
217
|
+
The plugin writes its declarations when Vite starts, which is too late for a `vue-tsc` or `tsc` step that runs first. Projects in that situation, and projects that don't use Vite, generate with the `featherk-fontawesome` CLI from the same manifest; see [CLI and non-Vite setup](FontAwesomeCLI.md). Custom Node tooling can call `generateFaIcons` from `@featherk/icons/fontawesome/build`, which takes resolved keys instead of a manifest.
|
|
218
|
+
|
|
220
219
|
## Supported Sources and Licensing
|
|
221
220
|
|
|
222
221
|
### Verified Free Consumer
|
|
@@ -1,41 +1,38 @@
|
|
|
1
1
|
# Font Awesome CLI and Non-Vite Setup
|
|
2
2
|
|
|
3
|
-
This
|
|
3
|
+
This is an advanced supplement. Most applications need only the Vite plugin; start with the [Quick Start](FontAwesome.md#quick-start). Use the `featherk-fontawesome` CLI when a type checker runs before Vite, or when the project doesn't use Vite.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
The CLI reads the same keys-only manifest as the setup command and the Vite plugin, and selects keys the same way:
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
3. Dev installs only the packages mapped to selected keys in the published catalog, pinned to exact versions. For Pro, follow [Pro token setup](LICENSING.md#dev-setup-quick-start) before installation; package examples are in [Install Source Packages](FontAwesome.md#install-source-packages).
|
|
10
|
-
4. Dev generates virtual-module declarations or a regular ESM module from the keys-only manifest.
|
|
11
|
-
5. Dev imports the generated module where needed, type-checks declarations, and preserves emitted license notices.
|
|
7
|
+
- When the project has `fontawesome-pro-sources/` (the [default setup](LICENSING.md#default-isolated-pro-sources)), it generates the `pro` keys from that project only when it is installed. Otherwise it generates the `free` keys alone.
|
|
8
|
+
- Without `fontawesome-pro-sources/` (a Free-only setup), it generates the `free` keys; a manifest with `pro` keys then fails with a message to run the setup command.
|
|
12
9
|
|
|
13
|
-
|
|
10
|
+
Install source packages first with `featherk-fontawesome-setup --manifest fontawesome.keys.json` ([Install Source Packages](FontAwesome.md#install-source-packages)). The CLI validates the installed packages; it does not install them or authenticate with a registry.
|
|
14
11
|
|
|
15
|
-
|
|
12
|
+
## Generate Declarations Before a Vite Type Check
|
|
16
13
|
|
|
17
14
|
The Vite plugin writes `src/featherk-fontawesome.d.ts` on startup by default. If `vue-tsc` or `tsc` runs before Vite starts, prepare that file first:
|
|
18
15
|
|
|
19
16
|
```sh
|
|
20
|
-
#
|
|
17
|
+
# Generate the virtual-module declarations before standalone type checking.
|
|
21
18
|
npm exec -- featherk-fontawesome --manifest fontawesome.keys.json --virtual-types src/featherk-fontawesome.d.ts
|
|
22
19
|
```
|
|
23
20
|
|
|
24
|
-
The
|
|
21
|
+
The CLI and the Vite plugin check the same installed `fontawesome-pro-sources/`, so a declaration step that runs just before the build selects the same keys. The plugin's `virtualTypesFile` option can select another project-local `.d.ts` path or disable plugin writing with `false`.
|
|
25
22
|
|
|
26
|
-
|
|
23
|
+
## Generate a Module for a Non-Vite Application
|
|
27
24
|
|
|
28
25
|
No migration to Vite is required. Generate a regular ESM module and adjacent declarations/notices:
|
|
29
26
|
|
|
30
27
|
```sh
|
|
31
|
-
#
|
|
28
|
+
# Generate application-local ESM output from the manifest.
|
|
32
29
|
npm exec -- featherk-fontawesome --manifest fontawesome.keys.json --out src/generated/fontawesome/icons.mjs
|
|
33
30
|
```
|
|
34
31
|
|
|
35
32
|
Import the generated module before running the existing application build:
|
|
36
33
|
|
|
37
34
|
```js
|
|
38
|
-
//
|
|
35
|
+
// Use a manifest key selected for this application.
|
|
39
36
|
import { getFaIcon } from "./generated/fontawesome/icons.mjs";
|
|
40
37
|
|
|
41
38
|
const userIcon = getFaIcon("user");
|
|
@@ -45,15 +42,13 @@ Run generation again when selections change, including before local development.
|
|
|
45
42
|
|
|
46
43
|
## Node API and CLI Options
|
|
47
44
|
|
|
48
|
-
|
|
45
|
+
The CLI accepts `--manifest`, `--root`, `--out`, `--virtual-types`, and `--help`. The manifest contains a `free` array and an optional `pro` array of catalog keys; a Pro-tier key under `free` is rejected. `--allow-pro`, `--source-root`, and `--pro-mode` were removed in 0.16.0. Specify at least one output. Paths are relative to `--root` or the current directory. File output uses `.js`/`.mjs` with `.d.ts`/`.d.mts` declarations; ambient output uses `.d.ts` and must not overwrite the file-module declaration.
|
|
49
46
|
|
|
50
|
-
|
|
47
|
+
For custom Node tooling, `generateFaIcons` from `@featherk/icons/fontawesome/build` takes already-resolved `keys`, optional `allowPro`, `root`, `sourceRoot`, `outFile`, and `virtualTypesFile`. It returns ESM code, file-module declarations, ambient virtual-module declarations, notices, provenance, and source dependency paths, and writes nothing without output options. Pro keys require `allowPro: true`, which is an accidental-use guard, not proof of license entitlement. Prefer the CLI, which derives these, including `sourceRoot: "fontawesome-pro-sources"`, from the manifest and layout.
|
|
51
48
|
|
|
52
49
|
Output must remain inside the consumer project, outside `node_modules` and the `@featherk/icons` package. The independent runtime `createFontAwesomeService` is available from `@featherk/icons/fontawesome`; Node tooling is never imported through the custom-icon root service.
|
|
53
50
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
To install source packages, use the separate `featherk-fontawesome-setup` command described in [Consuming Applications](LICENSING.md#consuming-applications). It supports the standard Free and Pro app-root setup, Free-only setup, and the isolated source project. The generator does not install anything; the setup command is the only FeatherK tool that receives the package token.
|
|
51
|
+
A source root resolves installed packages from a separate source project without moving the output boundary. Relative source paths resolve from `root`; authentication still happens during npm installation, never in the generator or browser. The generator does not install anything; `featherk-fontawesome-setup` is the only FeatherK tool that receives the package token.
|
|
57
52
|
|
|
58
53
|
## Generated Output and Source Checks
|
|
59
54
|
|