@featherk/icons 0.13.8 → 0.14.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.
- package/README.md +10 -0
- package/dist/fontawesome/build.cjs +4 -0
- package/dist/fontawesome/build.d.ts +3 -0
- package/dist/fontawesome/build.mjs +4 -0
- package/dist/fontawesome/chunks/generate-Bobf_ghm.cjs +288 -0
- package/dist/fontawesome/chunks/generate-Bp92GTVi.mjs +289 -0
- package/dist/fontawesome/cli.cjs +66 -0
- package/dist/fontawesome/cli.d.ts +6 -0
- package/dist/fontawesome/cli.mjs +66 -0
- package/dist/fontawesome/cli.test.d.ts +1 -0
- package/dist/fontawesome/fontawesome-service.d.ts +5 -0
- package/dist/fontawesome/fontawesome-service.test.d.ts +1 -0
- package/dist/fontawesome/generate.d.ts +18 -0
- package/dist/fontawesome/generate.test.d.ts +1 -0
- package/dist/fontawesome/index.cjs +20 -0
- package/dist/fontawesome/index.d.ts +3 -0
- package/dist/fontawesome/index.mjs +20 -0
- package/dist/fontawesome/normalize.d.ts +3 -0
- package/dist/fontawesome/normalize.test.d.ts +1 -0
- package/dist/fontawesome/types.d.ts +21 -0
- package/dist/fontawesome/vite.cjs +72 -0
- package/dist/fontawesome/vite.d.ts +6 -0
- package/dist/fontawesome/vite.mjs +72 -0
- package/dist/fontawesome/vite.test.d.ts +1 -0
- package/docs/ICONS.md +1 -1
- package/docs/fontawesome/CreateFontAwesomeManifest.md +109 -0
- package/docs/fontawesome/FontAwesome.md +251 -0
- package/docs/fontawesome/FontAwesomeCLI.md +64 -0
- package/docs/fontawesome/LICENSING.md +140 -0
- package/package.json +39 -3
- package/scripts/fontawesome.mjs +4 -0
|
@@ -0,0 +1,251 @@
|
|
|
1
|
+
# Font Awesome Build Integration
|
|
2
|
+
|
|
3
|
+
Font Awesome support is opt-in. To use Font Awesome icons, Dev configures this build workflow to generate Kendo-compatible descriptors from the npm packages named by each manifest's `package` and exact `version` fields. UX/Design owns choosing the desired icon variants and recording them in the manifest; start with [Choose Font Awesome Icons and Create a Manifest](CreateFontAwesomeManifest.md). Consumers using only `getCustomIcon()` do not need this integration. `@featherk/icons` contains no Font Awesome artwork, Free or paid, and does not supply a license or authentication token.
|
|
4
|
+
|
|
5
|
+
Once UX/Design has supplied the approved manifest, Dev owns source installation, Vite configuration, validation, and application integration. For licensed sources, see [Pro licensing and setup](LICENSING.md), including optional local profiles, secret handling, GitHub Actions/TeamCity, and consuming applications.
|
|
6
|
+
|
|
7
|
+
## Quick Start
|
|
8
|
+
|
|
9
|
+
1. UX/Design selects and approves each exact icon variant and records it in the [manifest](CreateFontAwesomeManifest.md); the license owner confirms Pro entitlement and approved release coverage.
|
|
10
|
+
2. Dev installs `@featherk/icons` with the Font Awesome Vite entry point and ensures compatible Vite 7.x is available using [Install the Vite Integration](#install-the-vite-integration).
|
|
11
|
+
3. Dev confirms access and availability for each manifest `package` and exact `version`, configures authorized registry access when required, then installs those 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 to use the approved manifest and validates the installed selections in [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).
|
|
15
|
+
|
|
16
|
+
This Free example uses an illustrative `fa-solid-v7` installed alias. Resolve its actual package, availability, version, and entitlement before use. Install a FeatherK release/build containing these entry points; a prior published release does not gain them automatically. For CLI generation, including declaration preparation before an early type check, see [CLI and non-Vite setup](FontAwesomeCLI.md).
|
|
17
|
+
|
|
18
|
+
```json
|
|
19
|
+
{
|
|
20
|
+
"icons": [
|
|
21
|
+
{
|
|
22
|
+
"key": "account",
|
|
23
|
+
"name": "user",
|
|
24
|
+
"version": "7.0.0",
|
|
25
|
+
"family": "classic",
|
|
26
|
+
"style": "solid",
|
|
27
|
+
"package": "fa-solid-v7"
|
|
28
|
+
}
|
|
29
|
+
]
|
|
30
|
+
}
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
### Pro Demo Example
|
|
34
|
+
|
|
35
|
+
The repository's Pro demo selects Classic Light `house` from Font Awesome Pro 7 and exposes it with the manifest key `pro-house-light`. Use this selection only when the application has the required Font Awesome Pro access and license coverage:
|
|
36
|
+
|
|
37
|
+
```json
|
|
38
|
+
{
|
|
39
|
+
"icons": [
|
|
40
|
+
{
|
|
41
|
+
"key": "pro-house-light",
|
|
42
|
+
"name": "house",
|
|
43
|
+
"version": "7.0.0",
|
|
44
|
+
"family": "classic",
|
|
45
|
+
"style": "light",
|
|
46
|
+
"package": "@fortawesome/pro-light-svg-icons"
|
|
47
|
+
}
|
|
48
|
+
]
|
|
49
|
+
}
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
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:
|
|
53
|
+
|
|
54
|
+
```vue
|
|
55
|
+
<template>
|
|
56
|
+
<SvgIcon :icon="houseIcon" />
|
|
57
|
+
</template>
|
|
58
|
+
|
|
59
|
+
<script setup lang="ts">
|
|
60
|
+
import { SvgIcon } from "@progress/kendo-vue-common";
|
|
61
|
+
import { getFaIcon } from "virtual:featherk/fontawesome";
|
|
62
|
+
|
|
63
|
+
const houseIcon = getFaIcon("pro-house-light");
|
|
64
|
+
</script>
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
## Install the Vite Integration
|
|
68
|
+
|
|
69
|
+
The Dev integration requires `@featherk/icons` to export `@featherk/icons/fontawesome/vite`. Its Vite peer dependency is `^7.0.0`, which supports Vite 7.x (not a later major). Install them as development dependencies if they are not already available in the application:
|
|
70
|
+
|
|
71
|
+
```sh
|
|
72
|
+
npm install --save-dev @featherk/icons vite@^7.0.0
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
## Install Source Packages
|
|
76
|
+
|
|
77
|
+
Dev installs the npm package or alias named by each UX-approved manifest `package` field, pinned to that entry's exact `version`. The Free example uses the `fa-solid-v7` alias shown in the manifest; the Pro example installs `@fortawesome/pro-light-svg-icons@7.0.0` as recorded in its manifest entry and requires authorized Font Awesome package access before installation.
|
|
78
|
+
|
|
79
|
+
```sh
|
|
80
|
+
# Free alias used by the example manifest.
|
|
81
|
+
npm install --save-dev --save-exact fa-solid-v7@npm:@fortawesome/free-solid-svg-icons@7.0.0
|
|
82
|
+
|
|
83
|
+
# Pro package used by the example manifest.
|
|
84
|
+
npm install --save-dev --save-exact @fortawesome/pro-light-svg-icons@7.0.0
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
The Free command uses an alias to match the example manifest.
|
|
88
|
+
|
|
89
|
+
Note: Aliases (i.e Like `fa-solid-v7` in the example above) let one project install multiple versions of the same npm package under distinct dependency names. See [alias details](#about-aliases-and-why-use-them).
|
|
90
|
+
|
|
91
|
+
Never put a Pro token in the command or commit it. See [Pro licensing and setup](LICENSING.md) for secure registry configuration.
|
|
92
|
+
|
|
93
|
+
## Vite Setup
|
|
94
|
+
|
|
95
|
+
The following setup is Dev-owned and assumes the UX-approved manifest and required license approvals are in place.
|
|
96
|
+
|
|
97
|
+
```ts
|
|
98
|
+
import { defineConfig } from "vite";
|
|
99
|
+
import vue from "@vitejs/plugin-vue";
|
|
100
|
+
import { featherkFontAwesome } from "@featherk/icons/fontawesome/vite";
|
|
101
|
+
import type { FontAwesomeSelection } from "@featherk/icons/fontawesome";
|
|
102
|
+
import manifest from "./fontawesome.icons.json";
|
|
103
|
+
|
|
104
|
+
// Step 1: Use the UX-approved manifest and verify required entitlement.
|
|
105
|
+
// Step 2: Ensure @featherk/icons and Vite 7 are available.
|
|
106
|
+
// Step 3: Install the npm packages matching each manifest package and version before Vite starts.
|
|
107
|
+
export default defineConfig({
|
|
108
|
+
// Step 4: Use the selections from the manifest approved and installed above.
|
|
109
|
+
plugins: [
|
|
110
|
+
vue(),
|
|
111
|
+
featherkFontAwesome({
|
|
112
|
+
icons: manifest.icons as FontAwesomeSelection[],
|
|
113
|
+
}),
|
|
114
|
+
],
|
|
115
|
+
});
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
Enable JSON imports in the consumer's TypeScript configuration if necessary. The assertion above supplies TypeScript's selection type; the generator still validates the manifest's supported fields and resolved identities at runtime.
|
|
119
|
+
|
|
120
|
+
### Render the Selected Key
|
|
121
|
+
|
|
122
|
+
```vue
|
|
123
|
+
<template>
|
|
124
|
+
<!-- Step 5: Render the generated descriptor directly through Kendo. -->
|
|
125
|
+
<SvgIcon :icon="accountIcon" />
|
|
126
|
+
</template>
|
|
127
|
+
|
|
128
|
+
<script setup lang="ts">
|
|
129
|
+
import { SvgIcon } from "@progress/kendo-vue-common";
|
|
130
|
+
import { getFaIcon } from "virtual:featherk/fontawesome";
|
|
131
|
+
|
|
132
|
+
const accountIcon = getFaIcon("account");
|
|
133
|
+
</script>
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
The plugin requires Vite 7. It writes `src/featherk-fontawesome.d.ts` on startup by default; include that file in TypeScript and ignore it in version control. `virtualTypesFile` selects another project-local `.d.ts` file or disables writing with `false`. Startup is too late for a type checker invoked before Vite, so retain the explicit CLI preparation step in that build order.
|
|
137
|
+
|
|
138
|
+
### Preserve License Notices
|
|
139
|
+
|
|
140
|
+
The plugin emits `featherk-fontawesome.licenses.txt` into Vite build output (Step 6); Dev must preserve this file in application distribution. It registers source dependencies and refreshes on observed changes, failing rather than serving stale successful artwork after a bad refresh. Restart Vite after installing/upgrading packages: watcher exclusions, including `node_modules`, may prevent live events.
|
|
141
|
+
|
|
142
|
+
## Inspecting an Icon Descriptor
|
|
143
|
+
|
|
144
|
+
`getFaIcon(key)` returns a runtime `FontAwesomeIcon` object with `{ name, content, viewBox }`, structurally compatible with Kendo's `SVGIcon`. `name` is the selected manifest key, `content` is the inner SVG path markup without an outer `<svg>`, and `viewBox` preserves the source geometry. The property is case-sensitive: `viewBox`, not `viewbox`.
|
|
145
|
+
|
|
146
|
+
The following examples assume `rocket` is included in the project's enabled selections. Replace it with your selected key, such as `account` in the Quick Start manifest.
|
|
147
|
+
|
|
148
|
+
### Application Code
|
|
149
|
+
|
|
150
|
+
Use the supported virtual-module import in a Vite application:
|
|
151
|
+
|
|
152
|
+
```ts
|
|
153
|
+
import { getFaIcon } from "virtual:featherk/fontawesome";
|
|
154
|
+
|
|
155
|
+
console.log(getFaIcon("rocket"));
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
An illustrative result, with path data shortened, is:
|
|
159
|
+
|
|
160
|
+
```js
|
|
161
|
+
{
|
|
162
|
+
name: "rocket",
|
|
163
|
+
content: '<path d="..." fill="currentColor"/>',
|
|
164
|
+
viewBox: "0 0 512 512"
|
|
165
|
+
}
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
The real `content` contains the complete path data; the abbreviated example is not renderable SVG. Appearance changes applied through CSS in the demo do not rewrite this descriptor's `currentColor` paths.
|
|
169
|
+
|
|
170
|
+
### Browser DevTools
|
|
171
|
+
|
|
172
|
+
While viewing the application on a running Vite dev server, inspect a descriptor from the browser console:
|
|
173
|
+
|
|
174
|
+
```js
|
|
175
|
+
const { getFaIcon } =
|
|
176
|
+
await import("/@id/__x00__virtual:featherk/fontawesome");
|
|
177
|
+
|
|
178
|
+
console.log(getFaIcon("rocket"));
|
|
179
|
+
```
|
|
180
|
+
|
|
181
|
+
This URL is Vite's internal representation of the virtual module, not a public FeatherK API. The example assumes a root (`/`) base path; adjust for a different dev-server base. Do not use it in application imports or expect it to work in production/preview builds. Prefer the supported application import or a breakpoint on the demo's `selectedIcon` computed value for normal debugging.
|
|
182
|
+
|
|
183
|
+
Generated `.d.ts` files contain declarations and the selected-key union, not SVG objects or artwork. With Vite, descriptor values live in the transformed virtual module and application bundle. Pro descriptors exist only when the licensed profile is enabled and the selected sources resolve successfully; no package token is needed to inspect already generated values.
|
|
184
|
+
|
|
185
|
+
## Generated Output and Source Checks
|
|
186
|
+
|
|
187
|
+
The Vite plugin writes `src/featherk-fontawesome.d.ts` on startup by default. Keep this file included in TypeScript, but exclude it from source linting and formatting. Generation overwrites the file, so running a formatter after every build is not a durable fix; output formatting is not guaranteed to match each consumer's Prettier rules.
|
|
188
|
+
|
|
189
|
+
Add the exact generated declaration path to ESLint's global ignores, `.prettierignore`, and `.gitignore`. These are independent exclusions, not substitutes for one another. Do not ignore all `.d.ts` files or exclude the generated declaration from TypeScript.
|
|
190
|
+
|
|
191
|
+
For a Vite consumer using the default output, merge this entry into the existing ESLint flat configuration. The entry should contain only `ignores`, so it applies globally:
|
|
192
|
+
|
|
193
|
+
```js
|
|
194
|
+
export default [
|
|
195
|
+
// Step 1: Add this entry alongside the project's existing configuration.
|
|
196
|
+
{ ignores: ["src/featherk-fontawesome.d.ts"] },
|
|
197
|
+
];
|
|
198
|
+
```
|
|
199
|
+
|
|
200
|
+
Add this pattern separately to both `.prettierignore` and `.gitignore`:
|
|
201
|
+
|
|
202
|
+
```text
|
|
203
|
+
# Step 2: Ignore generated output, not handwritten declarations.
|
|
204
|
+
src/featherk-fontawesome.d.ts
|
|
205
|
+
```
|
|
206
|
+
|
|
207
|
+
Keep this file covered by the project's TypeScript `include` patterns, such as `src/**/*`. If `virtualTypesFile` is customized, use that configured path in all three ignore mechanisms and ensure TypeScript includes it.
|
|
208
|
+
|
|
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.
|
|
210
|
+
|
|
211
|
+
## Supported Sources and Licensing
|
|
212
|
+
|
|
213
|
+
### Verified Free Consumer
|
|
214
|
+
|
|
215
|
+
The private demo workspace pins `@fortawesome/free-solid-svg-icons@7.0.0` and selects Free Classic Solid `rocket`, `feather`, `heart`, `star`, and `user` through its JSON manifest. It also selects `rocket-v5` from `5.15.4` and `rocket-v6` from `6.7.2` using pinned npm aliases. After building `@featherk/icons`, run `npm run verify:fontawesome --workspace=@featherk/demos` from the repository root.
|
|
216
|
+
|
|
217
|
+
This generates the ignored demo-local virtual declaration, builds an isolated Vite consumer in memory, and checks every selected export's original path, viewBox, exact version, the generated key union, selected-only lookup, and emitted Free license notices. Font Awesome artwork is not copied into tracked source or published FeatherK artifacts. This validates these specific Free packages/exports, not all releases, Pro entitlement, or v4 artwork.
|
|
218
|
+
|
|
219
|
+
The local `/icons` page links to the owned gallery at `/icons/custom`, `FontAwesomeFreeDemo` at `/icons/fontawesome/free`, and `FontAwesomeProDemo` at `/icons/fontawesome/pro`. The old `/icons/fontawesome` URL redirects to Free. Free has ten Solid/Regular selections, top-level appearance controls, and version/source details. Pro is an opt-in licensed profile; without it, the Pro page shows an unavailable state. Both reuse the same demo renderer and remain separate from custom icons.
|
|
220
|
+
|
|
221
|
+
### Mixed Versions and Free Styles
|
|
222
|
+
|
|
223
|
+
#### About Aliases and Why Use Them
|
|
224
|
+
|
|
225
|
+
Font Awesome v5, v6, and v7 are different releases of the same npm package, `@fortawesome/free-solid-svg-icons`. A project can expose only one version under that package name at the top level. npm aliases give additional releases distinct local dependency names, allowing this integration to resolve each one through the manifest's `package` field. The manifest's `version` records the upstream release; the alias does not change it. If an application uses only one release, an alias is not needed.
|
|
226
|
+
|
|
227
|
+
The demo uses the canonical package name for v7 and aliases for v5 and v6:
|
|
228
|
+
|
|
229
|
+
```json
|
|
230
|
+
{
|
|
231
|
+
"@fortawesome/free-solid-svg-icons": "7.0.0",
|
|
232
|
+
"fa-solid-v5": "npm:@fortawesome/free-solid-svg-icons@5.15.4",
|
|
233
|
+
"fa-solid-v6": "npm:@fortawesome/free-solid-svg-icons@6.7.2"
|
|
234
|
+
}
|
|
235
|
+
```
|
|
236
|
+
|
|
237
|
+
For aliased selections, set manifest `package` to the local dependency name, `version` to its exact upstream release, and `key` to a unique application identifier such as `rocket-v5`. Identical canonical names from different releases can then coexist without resolving to the wrong installed version.
|
|
238
|
+
|
|
239
|
+
The generated `FontAwesomeKey` union now contains `"rocket" | "feather" | "heart" | "star" | "user" | "rocket-v5" | "rocket-v6"`. Descriptor geometry stays in generated browser output, not in the declaration file; adding selections expands the compile-time key union without adding SVG artwork to the types.
|
|
240
|
+
|
|
241
|
+
None of the selected icons has a Free Classic Light variant: Classic Light is a Pro style. Some icons have Free Regular variants, but Regular is not Light, and not every Solid icon has a Free Regular counterpart. A different style requires its matching installed source package and an available definition.
|
|
242
|
+
|
|
243
|
+
Version 4 remains pending by design. Its legacy font assets are not supported individual SVG definitions for this generator; exact v4 rendering needs an explicitly designed font-to-SVG conversion or a separate web-font example. The demo does not substitute newer artwork and label it as v4.
|
|
244
|
+
|
|
245
|
+
The npm package named by each manifest `package` field must expose `package.json`, individual CommonJS icon exports, and non-empty `LICENSE.txt`. Its exact installed `version`, canonical icon `name`, and family/style prefix must match the manifest. An optional `exportName` identifies the individual export when default name derivation is unsuitable. Only structured path definitions are supported; raw SVG parsing, ESM-only packages, automatic downloads, v4 artwork conversion, and Kits are not implemented.
|
|
246
|
+
|
|
247
|
+
Single-color paths use `currentColor`; supported duotone definitions retain their two layers with primary/secondary CSS variables. Unsupported layer structures and unsafe path content are rejected. No source module or Node acquisition code belongs in browser output.
|
|
248
|
+
|
|
249
|
+
License/registry authentication is the consumer's responsibility. Use secret environment variables in trusted GitHub Actions or TeamCity jobs, never browser-prefixed variables or committed tokens. Locked dependencies, access controls, and approved Creator coverage are required where applicable. Synthetic tests do not establish entitlement or real-package compatibility.
|
|
250
|
+
|
|
251
|
+
See the [design and licensing notes](https://github.com/NantHealth/featherk/blob/integration/docs/design/fa-integration.md) and the [Font Awesome license](https://fontawesome.com/license) before licensed deployment. Pro+ collections and exact historical versions require separate availability/entitlement verification.
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
# Font Awesome CLI and Non-Vite Setup
|
|
2
|
+
|
|
3
|
+
This Dev-owned supplement assumes UX/Design has supplied the approved selections in a manifest. For icon choice, approval, naming, and manifest authoring, start with [Choose Font Awesome Icons and Create a Manifest](CreateFontAwesomeManifest.md). For the default Vite integration, see [Font Awesome Build Integration](FontAwesome.md).
|
|
4
|
+
|
|
5
|
+
## Quick Start
|
|
6
|
+
|
|
7
|
+
1. Receive the UX-approved manifest and required license approvals.
|
|
8
|
+
2. Dev installs `@featherk/icons` at a release containing the CLI or Node API; for example, `npm install --save-dev @featherk/icons`.
|
|
9
|
+
3. Dev installs the npm package or alias named by each manifest `package` field at its exact `version` using authorized package access. 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 manifest.
|
|
11
|
+
5. Dev imports the generated module where needed, type-checks declarations, and preserves emitted license notices.
|
|
12
|
+
|
|
13
|
+
The CLI validates installed Font Awesome source packages; it does not install them or authenticate with a registry. A prior FeatherK release does not gain the CLI or Node API entry points automatically.
|
|
14
|
+
|
|
15
|
+
### Generate declarations before a Vite type check
|
|
16
|
+
|
|
17
|
+
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
|
+
|
|
19
|
+
```sh
|
|
20
|
+
# Step 4: Generate the virtual-module declarations before standalone type checking.
|
|
21
|
+
npm exec -- featherk-fontawesome --manifest fontawesome.icons.json --virtual-types src/featherk-fontawesome.d.ts
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
Configure `featherkFontAwesome` with the same selections. The CLI and plugin must use the same manifest; do not maintain conflicting selection lists. `virtualTypesFile` can select another project-local `.d.ts` path or disable plugin writing with `false`.
|
|
25
|
+
|
|
26
|
+
### Generate a module for a non-Vite application
|
|
27
|
+
|
|
28
|
+
No migration to Vite is required. Generate a regular ESM module and adjacent declarations/notices:
|
|
29
|
+
|
|
30
|
+
```sh
|
|
31
|
+
# Step 4: Generate application-local ESM output from the selected manifest.
|
|
32
|
+
npm exec -- featherk-fontawesome --manifest fontawesome.icons.json --out src/generated/fontawesome/icons.mjs
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
Import the generated module before running the existing application build:
|
|
36
|
+
|
|
37
|
+
```js
|
|
38
|
+
// Step 5: Use the manifest key selected for this application.
|
|
39
|
+
import { getFaIcon } from "./generated/fontawesome/icons.mjs";
|
|
40
|
+
|
|
41
|
+
const accountIcon = getFaIcon("account");
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
Run generation again when selections change, including before local development. A generation failure exits nonzero and must stop CI; do not continue with prior output. Preserve the emitted `icons.mjs.licenses.txt` notice in application distribution. Non-Vite bundlers do not automatically copy that sidecar.
|
|
45
|
+
|
|
46
|
+
## Node API and CLI Options
|
|
47
|
+
|
|
48
|
+
`generateFaIcons` from `@featherk/icons/fontawesome/build` accepts `icons`, optional `root`, `sourceRoot`, `outFile`, and `virtualTypesFile`. It returns ESM code, file-module declarations, ambient virtual-module declarations, notices, provenance, and source dependency paths. Without output options, it writes nothing.
|
|
49
|
+
|
|
50
|
+
The CLI accepts `--manifest`, `--root`, `--source-root`, `--out`, `--virtual-types`, and `--help`. The manifest must contain an `icons` array; 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.
|
|
51
|
+
|
|
52
|
+
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
|
+
|
|
54
|
+
The API and Vite plugin accept `sourceRoot` to resolve installed packages from a separate source project without moving the output boundary. The CLI equivalent is `--source-root`. Relative source paths resolve from `root`; authentication still happens during npm installation, never in the generator or browser.
|
|
55
|
+
|
|
56
|
+
## Generated Output and Source Checks
|
|
57
|
+
|
|
58
|
+
Generated declarations belong in TypeScript so selected keys receive type checking, but should be excluded from source linting, formatting, and version control. Add the exact output path separately to ESLint's global ignores, `.prettierignore`, and `.gitignore`; these are independent settings. Do not ignore all `.d.ts` files or exclude generated declarations from TypeScript.
|
|
59
|
+
|
|
60
|
+
For a Vite consumer using the default output, use `src/featherk-fontawesome.d.ts` in each ignore mechanism. In this monorepo, the path is `demos/src/featherk-fontawesome.d.ts`.
|
|
61
|
+
|
|
62
|
+
For non-Vite consumers, prefer a directory dedicated exclusively to generated Font Awesome output, such as `src/generated/fontawesome/`. Ignore that directory in ESLint, Prettier, and Git. If output is kept in a shared directory, ignore the exact generated module, declaration, and notice sidecar paths rather than handwritten files nearby. Keep generated declarations available to TypeScript and preserve license notices in application distribution.
|
|
63
|
+
|
|
64
|
+
Vite builds emit `featherk-fontawesome.licenses.txt` into the build output. Preserve that notice when distributing the application. Generation overwrites output, so do not rely on formatting generated files after every build; generated output formatting is not guaranteed to match consumer formatter rules.
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
# Font Awesome Pro Licensing and Setup
|
|
2
|
+
|
|
3
|
+
`@featherk/icons` supplies tooling, not Pro assets, entitlement, or credentials. Paid source packages belong to authorized application/development environments, never FeatherK's owned icon registry, public package, or tracked artwork.
|
|
4
|
+
|
|
5
|
+
## Requirements
|
|
6
|
+
|
|
7
|
+
The organization's license owner must confirm download/authenticated package access, the approved releases, Creator seats covering the people working with Pro assets, build automation, application embedding/deployment, and any restrictions after subscription expiry. An older perpetual license does not automatically cover new releases; limited plans can have different rights. A shared token or enterprise repository access does not grant additional seats.
|
|
8
|
+
|
|
9
|
+
The [published Pro license](https://fontawesome.com/license) permits covered Creators to embed icons in projects and restricts standalone distribution to non-Creators. End users viewing an embedded application are different from developers making new projects. Confirm your actual agreement with the license owner or Font Awesome; this guide is not a legal determination.
|
|
10
|
+
|
|
11
|
+
## Dev Setup Quick Start
|
|
12
|
+
|
|
13
|
+
The steps below are for Dev after UX/Design has selected the desired Pro variants and recorded them in an approved manifest. See [Choose Font Awesome Icons and Create a Manifest](CreateFontAwesomeManifest.md) for that UX-owned work.
|
|
14
|
+
|
|
15
|
+
1. Confirm entitlement, Creator coverage, and approved releases with the license owner.
|
|
16
|
+
2. Dev obtains an authorized **Pro Package Token** from the Font Awesome account and supplies it privately as `FONTAWESOME_PACKAGE_TOKEN`.
|
|
17
|
+
3. Dev installs the npm packages named by the manifest's `package` fields at their exact `version`s into the dedicated private project through its environment-referenced npm configuration.
|
|
18
|
+
4. Dev enables the Pro profile and prepares declarations before type checking/building the application.
|
|
19
|
+
5. Dev preserves upstream notices and verifies publication/deployment boundaries before distribution.
|
|
20
|
+
|
|
21
|
+
A package token is not a Kit code, account password, or Kendo license key. Never paste it into chat, screenshots, source files, command arguments, or logs. Follow the organization's approved token issuance/rotation process; do not share account passwords.
|
|
22
|
+
|
|
23
|
+
## This FeatherK Repository
|
|
24
|
+
|
|
25
|
+
Normal root installation/build, Free demos, tests, and public package publishing require no Pro token. `demos/pro` is a separate private source project, not a root workspace. It requests exact `@fortawesome/pro-regular-svg-icons@7.0.0` and `@fortawesome/pro-light-svg-icons@7.0.0` packages; no paid dependency is added to the normal demo workspace or public icons package.
|
|
26
|
+
|
|
27
|
+
The committed source-project npm configuration contains only a placeholder:
|
|
28
|
+
|
|
29
|
+
```ini
|
|
30
|
+
@fortawesome:registry=https://npm.fontawesome.com/
|
|
31
|
+
//npm.fontawesome.com/:_authToken=${FONTAWESOME_PACKAGE_TOKEN}
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
Do not replace the placeholder with a token or move this private registry configuration into the repository root. This keeps normal Free installation independent of Pro authentication.
|
|
35
|
+
|
|
36
|
+
From the repository root, after confirming Steps 1-2:
|
|
37
|
+
|
|
38
|
+
```sh
|
|
39
|
+
# Step 3: Authenticated installation runs only inside demos/pro.
|
|
40
|
+
npm run setup:fontawesome:pro --workspace=@featherk/demos
|
|
41
|
+
# Step 4: Start the explicitly licensed local profile.
|
|
42
|
+
npm run dev:pro --workspace=@featherk/demos
|
|
43
|
+
# Step 5: Build the application and preserve emitted notices.
|
|
44
|
+
npm run build:pro --workspace=@featherk/demos
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
The installer checks for the token without printing it. Initial installation creates an isolated lockfile; later runs use `npm ci` when it exists. Review and commit dependency/integrity metadata for reproducible CI, ensuring it contains no credentials. Source `node_modules` and application artifacts remain ignored. No paid installation has been performed as part of implementing this setup.
|
|
48
|
+
|
|
49
|
+
The UX-approved Pro manifest requests Regular Rocket, Light Feather, and Light Heart. These pins are requested examples, not verified downloads. If entitlement, releases, or exports are unavailable, Dev must stop installation/generation and return to UX/Design for approval before changing the manifest or dependencies; never substitute silently.
|
|
50
|
+
|
|
51
|
+
The profile wrappers enable the non-secret `FEATHERK_FONTAWESOME_PRO=1` build flag and remove the package token from child build environments. They invoke the demo's own commands, not the root Turborepo cached build. Do not put paid outputs into shared/untrusted caches.
|
|
52
|
+
|
|
53
|
+
`sourceRoot: "pro"` resolves installed licensed packages while output guards remain relative to the demo project. Node resolution also finds already installed Free packages in parent workspace directories. The next normal preparation restores the Free-only generated key union.
|
|
54
|
+
|
|
55
|
+
Routes are `/icons/fontawesome/free` and `/icons/fontawesome/pro`; `/icons/fontawesome` redirects to Free. The Pro page shows an unavailable state without a licensed profile, never fabricated artwork. Enabling the profile with missing/invalid sources fails the build rather than hiding an error.
|
|
56
|
+
|
|
57
|
+
### Private Local Token Input
|
|
58
|
+
|
|
59
|
+
Run one option in your own terminal. Secret input stays in the terminal, not the assistant.
|
|
60
|
+
|
|
61
|
+
Git Bash:
|
|
62
|
+
|
|
63
|
+
```bash
|
|
64
|
+
# Step 2: Type the token at the hidden prompt.
|
|
65
|
+
read -r -s -p "Font Awesome package token: " FONTAWESOME_PACKAGE_TOKEN
|
|
66
|
+
export FONTAWESOME_PACKAGE_TOKEN
|
|
67
|
+
# Step 3: Install, then remove the token from the shell environment.
|
|
68
|
+
npm run setup:fontawesome:pro --workspace=@featherk/demos
|
|
69
|
+
setup_status=$?
|
|
70
|
+
unset FONTAWESOME_PACKAGE_TOKEN
|
|
71
|
+
# Step 4: Start only after successful installation.
|
|
72
|
+
if [[ $setup_status -eq 0 ]]; then
|
|
73
|
+
npm run dev:pro --workspace=@featherk/demos
|
|
74
|
+
fi
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
PowerShell:
|
|
78
|
+
|
|
79
|
+
```powershell
|
|
80
|
+
# Step 2: Type the token at the secure prompt.
|
|
81
|
+
$env:FONTAWESOME_PACKAGE_TOKEN = [System.Net.NetworkCredential]::new(
|
|
82
|
+
"", (Read-Host "Font Awesome package token" -AsSecureString)
|
|
83
|
+
).Password
|
|
84
|
+
# Step 3: Keep credentials present only for installation.
|
|
85
|
+
try {
|
|
86
|
+
npm run setup:fontawesome:pro --workspace=@featherk/demos
|
|
87
|
+
if ($LASTEXITCODE -ne 0) { throw "Licensed source installation failed." }
|
|
88
|
+
} finally {
|
|
89
|
+
Remove-Item Env:FONTAWESOME_PACKAGE_TOKEN -ErrorAction SilentlyContinue
|
|
90
|
+
}
|
|
91
|
+
# Step 4: Start only after successful installation.
|
|
92
|
+
npm run dev:pro --workspace=@featherk/demos
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
Do not continue after an install error. `401`/`403` can indicate invalid/revoked credentials or insufficient entitlement. Inspect status codes without printing token/config contents. Missing releases/exports need a source/approval review, not an unpinned upgrade.
|
|
96
|
+
|
|
97
|
+
## Consuming Applications
|
|
98
|
+
|
|
99
|
+
Consumers need their own covered access or an enterprise agreement that actually covers them. The public FeatherK package grants no Pro rights.
|
|
100
|
+
|
|
101
|
+
Two supported Vite layouts are:
|
|
102
|
+
|
|
103
|
+
- **Application development dependencies:** configure environment-referenced authentication in the app and install exact Pro packages. Normal dependency installation then requires licensed access.
|
|
104
|
+
- **Isolated optional source project:** install sources separately and pass `sourceRoot` to the Vite plugin. Keep application output within the consumer project.
|
|
105
|
+
|
|
106
|
+
For non-Vite applications or declaration generation before a standalone type check, follow [CLI and non-Vite setup](FontAwesomeCLI.md). Registry authentication still belongs to the authorized package installation environment; the generator and browser never receive the token.
|
|
107
|
+
|
|
108
|
+
For Vite, use `featherkFontAwesome({ icons, sourceRoot: "pro" })`. The profile scripts above are repository demo helpers, not scripts automatically installed into consumer applications.
|
|
109
|
+
|
|
110
|
+
For applications using both Free and Pro, UX/Design approves both selection sets; Dev enables them together in the build manifest. Optional profiles must not silently include paid inputs in public/uncredentialed builds. Follow the [generated-output ignore guidance](FontAwesome.md#generated-output-and-source-checks): exclude generated files from ESLint/Prettier/Git while retaining TypeScript checks.
|
|
111
|
+
|
|
112
|
+
## CI and Deployment
|
|
113
|
+
|
|
114
|
+
FeatherK and `feather-k-<demo-name>` repositories use GitHub Actions. TeamCity applies only to enterprise apps using that platform.
|
|
115
|
+
|
|
116
|
+
Use a dedicated trusted Actions job with a protected Environment and approval/branch rules. Supply the token only to source installation, not public publishing or client compilation. After checkout and Node/root dependency setup:
|
|
117
|
+
|
|
118
|
+
```yaml
|
|
119
|
+
- name: Install licensed demo sources
|
|
120
|
+
env:
|
|
121
|
+
FONTAWESOME_PACKAGE_TOKEN: ${{ secrets.FONTAWESOME_PACKAGE_TOKEN }}
|
|
122
|
+
NPM_CONFIG_CACHE: ${{ runner.temp }}/fontawesome-pro-cache
|
|
123
|
+
run: npm run setup:fontawesome:pro --workspace=@featherk/demos
|
|
124
|
+
- name: Build licensed demo application
|
|
125
|
+
run: npm run build:pro --workspace=@featherk/demos
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
Configure the protected Environment separately; this fragment grants no license rights. Restrict paid caches/archives/artifacts, and never execute untrusted PR code with the token, including via `pull_request_target`. Normal public FeatherK publishing must not receive Pro credentials or use the licensed profile.
|
|
129
|
+
|
|
130
|
+
In TeamCity, limit `env.FONTAWESOME_PACKAGE_TOKEN` Password parameters to trusted acquisition steps/agents. Install locked sources, remove credentials from subsequent steps, then run the app's Vite or explicit generator build. Tokens do not expand Creator seats.
|
|
131
|
+
|
|
132
|
+
Enterprise Pages must enforce authentication on deployed URLs/static assets; repository privacy alone is insufficient. Rendered SVGs remain extractable by authorized viewers. Preserve notices and distribute an application, not a standalone paid-icon catalog. Actual license terms govern permitted deployment.
|
|
133
|
+
|
|
134
|
+
## Validation Boundary
|
|
135
|
+
|
|
136
|
+
Public `@featherk/icons` artifacts contain tooling and owned icons only: no paid dependencies/artwork, source caches, credentials, or generated paid-icon collections. Private distribution alone does not establish entitlement.
|
|
137
|
+
|
|
138
|
+
Isolated-source resolution uses synthetic tests. Free generation and Pro-unavailable UI can be checked without secrets. Real paid exports, license notices, and enabled Pro rendering remain unverified until an authorized installation succeeds. Pro+ collections requiring Kits remain outside this no-Kit implementation.
|
|
139
|
+
|
|
140
|
+
References: [package authentication](https://docs.fontawesome.com/web/setup/packages), [Pro license](https://fontawesome.com/license), and [Font Awesome account](https://fontawesome.com/account).
|
package/package.json
CHANGED
|
@@ -1,15 +1,51 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@featherk/icons",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.14.0",
|
|
4
4
|
"main": "dist/featherk-icons.umd.js",
|
|
5
5
|
"module": "dist/featherk-icons.es.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
7
|
+
"exports": {
|
|
8
|
+
".": {
|
|
9
|
+
"types": "./dist/index.d.ts",
|
|
10
|
+
"import": "./dist/featherk-icons.es.js",
|
|
11
|
+
"require": "./dist/featherk-icons.umd.js"
|
|
12
|
+
},
|
|
13
|
+
"./fontawesome": {
|
|
14
|
+
"types": "./dist/fontawesome/index.d.ts",
|
|
15
|
+
"import": "./dist/fontawesome/index.mjs",
|
|
16
|
+
"require": "./dist/fontawesome/index.cjs"
|
|
17
|
+
},
|
|
18
|
+
"./fontawesome/build": {
|
|
19
|
+
"types": "./dist/fontawesome/build.d.ts",
|
|
20
|
+
"import": "./dist/fontawesome/build.mjs",
|
|
21
|
+
"require": "./dist/fontawesome/build.cjs"
|
|
22
|
+
},
|
|
23
|
+
"./fontawesome/vite": {
|
|
24
|
+
"types": "./dist/fontawesome/vite.d.ts",
|
|
25
|
+
"import": "./dist/fontawesome/vite.mjs",
|
|
26
|
+
"require": "./dist/fontawesome/vite.cjs"
|
|
27
|
+
},
|
|
28
|
+
"./package.json": "./package.json"
|
|
29
|
+
},
|
|
7
30
|
"files": [
|
|
8
31
|
"dist",
|
|
9
|
-
"docs"
|
|
32
|
+
"docs",
|
|
33
|
+
"scripts/fontawesome.mjs"
|
|
10
34
|
],
|
|
35
|
+
"bin": {
|
|
36
|
+
"featherk-fontawesome": "scripts/fontawesome.mjs"
|
|
37
|
+
},
|
|
38
|
+
"peerDependencies": {
|
|
39
|
+
"vite": "^7.0.0"
|
|
40
|
+
},
|
|
41
|
+
"peerDependenciesMeta": {
|
|
42
|
+
"vite": {
|
|
43
|
+
"optional": true
|
|
44
|
+
}
|
|
45
|
+
},
|
|
11
46
|
"scripts": {
|
|
12
|
-
"build": "vite build && npm run build:types",
|
|
47
|
+
"build": "vite build && npm run build:fontawesome && npm run build:types",
|
|
48
|
+
"build:fontawesome": "vite build --config vite.fontawesome.config.ts",
|
|
13
49
|
"build:types": "vue-tsc --emitDeclarationOnly --declaration --declarationDir dist",
|
|
14
50
|
"test": "vitest --config vitest.config.ts",
|
|
15
51
|
"test:unit": "vitest run --config vitest.config.ts",
|