# core/formatters/icons.formatter.ts

> 56 lines of code and 8 definitions.

Tree: Bane's Lab Build Scripts
Language: typescript
Layer: processing
Canonical: https://banes-lab.com/anatomy/build-scripts#file-build-scripts-core-formatters-icons-formatter-ts
Source text: https://banes-lab.com/source/build-scripts/core/formatters/icons.formatter.ts.txt

Listed in [core/formatters](https://banes-lab.com/api/source/build-scripts/core/formatters.md), after [core/formatters/graph.formatter.ts](https://banes-lab.com/source/build-scripts/core/formatters/graph.formatter.ts.md) and before [core/formatters/index.formatter.ts](https://banes-lab.com/source/build-scripts/core/formatters/index.formatter.ts.md).

## Definitions

- `renderStylesheet` (lexical_declaration, line 14, exported)
- `renderIconPaths` (lexical_declaration, line 44, exported)
- `glyphTextOf` (lexical_declaration, line 58, exported)
- `HEX` (lexical_declaration, line 12)
- `face` (lexical_declaration, line 15, exported)
- `base` (lexical_declaration, line 22, exported)
- `glyphs` (lexical_declaration, line 38, exported)
- `entries` (lexical_declaration, line 47, exported)

## Contained in

- [core/formatters](https://banes-lab.com/anatomy/build-scripts/folder-build-scripts-core-formatters.md)

## Uses

- [core/resolvers/icons.resolver.ts](https://banes-lab.com/source/build-scripts/core/resolvers/icons.resolver.ts.md)

## Used by

- [core/coordinators/icons.coordinator.ts](https://banes-lab.com/source/build-scripts/core/coordinators/icons.coordinator.ts.md)

## Linked from

- [core/coordinators](https://banes-lab.com/anatomy/build-scripts/folder-build-scripts-core-coordinators.md)
- [core/resolvers](https://banes-lab.com/anatomy/build-scripts/folder-build-scripts-core-resolvers.md)

## Source

```typescript
import {
    FONT_FAMILY,
    FONT_ROUTE,
    ICON_BASE,
    ICON_PATH_TYPE,
    ICON_PREFIX,
    SUBSET_FILE,
} from "#configuration/constants/icons.constants";
import type { IconPath } from "@banes-lab/web/types/learning.types.js";
import { codepointOf } from "#core/resolvers/icons.resolver";

const HEX = 16;

export const renderStylesheet = function renderStylesheet(names: readonly string[]): string {
    const face = [
        "@font-face {",
        "    font-display: swap;",
        `    font-family: "${FONT_FAMILY}";`,
        `    src: url("${FONT_ROUTE}${SUBSET_FILE}") format("woff2");`,
        "}",
    ];
    const base = [
        `.${ICON_BASE}::before,`,
        `[class^="${ICON_PREFIX}"]::before,`,
        `[class*=" ${ICON_PREFIX}"]::before {`,
        "    display: inline-block;",
        `    font-family: "${FONT_FAMILY}";`,
        "    font-style: normal;",
        "    font-variant: normal;",
        "    font-weight: normal;",
        "    line-height: 1;",
        "    text-transform: none;",
        "    vertical-align: -0.125em;",
        "    -webkit-font-smoothing: antialiased;",
        "    -moz-osx-font-smoothing: grayscale;",
        "}",
    ];
    const glyphs = names.map(
        (name) => `.${ICON_PREFIX}${name}::before {\n    content: "\\${codepointOf(name).toString(HEX)}";\n}`,
    );
    return `${[face.join("\n"), base.join("\n"), ...glyphs].join("\n\n")}\n`;
};

export const renderIconPaths = function renderIconPaths(
    icons: readonly (readonly [string, readonly IconPath[]])[],
): string {
    const entries = icons.map(([name, paths]) => `    ["${ICON_PREFIX}${name}", ${JSON.stringify(paths)}],`);
    return [
        `import type { IconPath } from "${ICON_PATH_TYPE}";`,
        "",
        "export const ICON_PATHS: ReadonlyMap<string, readonly IconPath[]> = new Map([",
        ...entries,
        "]);",
        "",
    ].join("\n");
};

export const glyphTextOf = function glyphTextOf(names: readonly string[]): string {
    return names.map((name) => String.fromCodePoint(codepointOf(name))).join("");
};
```