diff --git a/README.md b/README.md
index c5eb2ee4..53cc5ffb 100644
--- a/README.md
+++ b/README.md
@@ -14,7 +14,77 @@
An icon library for the Zeta design system.
-## Testing
+## Web
+
+> 🚧 **Note**: Currently, the only way to use these icons is directly from `zeta-icons`. This will change in the future with the impending release of `zeta-web` and `zeta-react`.
+
+## Installation
+
+Zeta Icons is hosted on [npm](https://www.npmjs.com/package/@zebra-fed/zeta-icons), and can be installed with:
+
+`npm i @zebra-fed/zeta-icons`
+
+## Usage
+
+The zeta-icons fonts can be imported into any web project. There are two variants, `zeta-icons-round` and `zeta-icons-sharp`, for round and sharp icons respectively.
+Either one or both of these need to be imported via css
+
+```css
+@font-face {
+ font-family: zeta-icons-round;
+ font-weight: bold;
+ src: url("@zebra-fed/zeta-icons/font/zeta-icons-round.woff2");
+}
+
+.icon {
+ font-family: "zeta-icons-round";
+ line-height: 1;
+ -webkit-font-smoothing: antialiased;
+ text-rendering: optimizeLegibility;
+ -moz-osx-font-smoothing: grayscale;
+ font-feature-settings: "liga";
+}
+```
+
+If you are not using a framework that optimizes node modules imports, you may need to point directly to the font:
+
+```css
+src: url("./node_modules/@zebra-fed/zeta-icons/outputs/font/zeta-icons-round.woff2");
+```
+
+Zeta icons use **_ligatures_**, which allows for the icons to be rendered by simply entering their name. These icons behave as text characters, and so are styled as such:
+
+```html
+alarm
+```
+
+---
+
+# Flutter
+
+Zeta Icons for Flutter are part of [zeta_flutter](https://github.com/ZebraDevs/zeta_flutter).
+
+## Installation
+
+Zeta flutter is hosted on [pub.dev](https://pub.dev/packages/zeta_flutter/), and can be installed with:
+
+`flutter pub add zeta_flutter`
+
+## Usage
+
+The `ZetaIcons` class contains all the zeta icons, in both round and sharp variants.
+These can be displayed using the `Icon` class built into Flutter.
+
+```dart
+ Icon(ZetaIcons.activity_round, color: Colors.red, size: 24)
+```
+
+---
+
+
+Testing
+
+> 🚧 **Note**: This does not work with all versions of node - tested and working with node 18.17.0
1. Initialize test values:
@@ -25,3 +95,5 @@ An icon library for the Zeta design system.
3. Run tests
`ts-node -files test/test.ts`
+
+
diff --git a/scripts/generators/generateDefinitionFiles.ts b/scripts/generators/generateDefinitionFiles.ts
index d158862e..36a60eb1 100644
--- a/scripts/generators/generateDefinitionFiles.ts
+++ b/scripts/generators/generateDefinitionFiles.ts
@@ -37,12 +37,12 @@ export const generateDefinitionFiles = (
*/
const generateDartFile = (fontData: GenerateFontResult): string => {
let dartTemplate = readFileSync("./scripts/templates/icons.dart.template").toString();
- const newLine = "\n ";
+ const newLine = "\n";
const roundIcons = fontData.dartRoundTypes.join(newLine);
const sharpIcons = fontData.dartSharpTypes.join(newLine);
- const roundList = fontData.dartRoundList.join(newLine) + ",";
- const sharpList = fontData.dartSharpList.join(newLine) + ",";
+ const roundList = fontData.dartRoundList.join("," + newLine) + ",";
+ const sharpList = fontData.dartSharpList.join("," + newLine) + ",";
dartTemplate = dartTemplate.replace("{{roundIcons}}", roundIcons);
dartTemplate = dartTemplate.replace("{{sharpIcons}}", sharpIcons);
diff --git a/scripts/generators/generateFonts.ts b/scripts/generators/generateFonts.ts
index f055b8bc..bfc2eeec 100644
--- a/scripts/generators/generateFonts.ts
+++ b/scripts/generators/generateFonts.ts
@@ -122,7 +122,7 @@ function getDartIconDefinition(iconName: string, unicode: string, type: FontType
* @returns {string} Dart map item used for list of icons.
*/
function getDartIconListItem(iconName: string): string {
- return ` '${iconName}': ZetaIcons.${iconName}`;
+ return ` '${iconName}': ZetaIcons.${iconName}`;
}
/**
diff --git a/scripts/templates/icons.dart.template b/scripts/templates/icons.dart.template
index 26eb7b9f..fe8128fd 100644
--- a/scripts/templates/icons.dart.template
+++ b/scripts/templates/icons.dart.template
@@ -3,25 +3,26 @@ import 'package:flutter/material.dart';
const zetaIconsVersion = 'VERSION_NUM';
+/// Zeta Icons. Full list of icons can be found at [Zeta Icons](https://zeta-icons.web.app/).
class ZetaIcons {
ZetaIcons._();
static const String _familyRound = 'zeta-icons-round';
static const String _familySharp = 'zeta-icons-sharp';
static const String _package = 'zeta_flutter';
- /// Round Icons
- {{roundIcons}}
+ // Round Icons
+{{roundIcons}}
- /// Sharp Icons
- {{sharpIcons}}
+ // Sharp Icons
+{{sharpIcons}}
}
-/// List of all rounded icons.
+// List of all rounded icons.
const Map iconsRound = {
- {{roundIconList}}
+{{roundIconList}}
};
-/// List of all sharp icons.
+// List of all sharp icons.
const Map iconsSharp = {
- {{sharpIconList}}
+{{sharpIconList}}
};
diff --git a/test/reset-values.ts b/test/reset-values.ts
index cf56dc6b..0dd25699 100644
--- a/test/reset-values.ts
+++ b/test/reset-values.ts
@@ -2,14 +2,14 @@ import { getFigmaDocument, getImageFiles } from "../scripts/utils/api.js";
import { findIconPage, extractCategoryNodes } from "../scripts/utils/figmaUtils.js";
import { generateFonts } from "../scripts/generators/generateFonts.js";
import { generateIconManifest } from "../scripts/generators/generateIconManifest.js";
-import { figmaToken, outputDir, zdsAssetsfigmaFileId } from "./test-data.js";
+import { figmaToken, outputDir, testFigmaFileId, zdsAssetsfigmaFileId } from "./test-data.js";
import { writeFileSync } from "fs";
import { generateHash } from "../scripts/utils/hash.js";
import { Component } from "../scripts/types/figmaTypes.js";
process.env["NODE_TLS_REJECT_UNAUTHORIZED"] = "0";
-const _figmaDoc = await getFigmaDocument(zdsAssetsfigmaFileId, figmaToken);
+const _figmaDoc = await getFigmaDocument(testFigmaFileId, figmaToken);
writeFileSync("./test/test-data/figmaDoc.json", JSON.stringify(_figmaDoc));
const _iconPage = findIconPage(_figmaDoc.document, "🦓 Icons");
writeFileSync("./test/test-data/iconsPage.json", JSON.stringify(_iconPage));
@@ -18,7 +18,7 @@ writeFileSync("./test/test-data/categories.json", JSON.stringify(_categories));
const componentSet: Map = new Map(Object.entries(_figmaDoc.componentSets));
const _manifest = generateIconManifest(_categories, componentSet, outputDir, false);
writeFileSync("./test/test-data/manifest.json", JSON.stringify(Object.fromEntries(_manifest)));
-const _allImageFiles = await getImageFiles(_manifest, zdsAssetsfigmaFileId, figmaToken);
+const _allImageFiles = await getImageFiles(_manifest, testFigmaFileId, figmaToken);
writeFileSync("./test/test-data/allImageFiles.json", JSON.stringify(Object.fromEntries(_allImageFiles)));
const newHash = generateHash(_allImageFiles);
writeFileSync("./test/test-data/hash.txt", newHash);
diff --git a/test/test-data.ts b/test/test-data.ts
index 071c228a..9454c557 100644
--- a/test/test-data.ts
+++ b/test/test-data.ts
@@ -8,7 +8,7 @@ export const testIconsPageName = "Icons";
export const zdsAssetsfigmaFileId = "VQ7Aa3rDYB7mgpToI3bZ4D";
export const zdsAssetsFigmaIconsPageName = "🦓 Icons";
-export const figmaToken = process.env.FIGMA_ACCESS_TOKEN;
+export const figmaToken = process.env.FIGMA_ACCESS_TOKEN!;
export const outputDir = "test/outputs";
export const figmaDoc: DocumentResponse = JSON.parse(readFileSync("./test/test-data/figmaDoc.json").toString());
diff --git a/test/test.ts b/test/test.ts
index 870a0dba..37f4e6a0 100644
--- a/test/test.ts
+++ b/test/test.ts
@@ -6,7 +6,6 @@ import { generateIconManifest } from "../scripts/generators/generateIconManifest
import { saveSVGs } from "../scripts/utils/saveSvgs.js";
import {
figmaToken,
- testFigmaFileId,
outputDir,
allImageFiles,
categories,
@@ -15,6 +14,8 @@ import {
iconPage,
manifest,
categoryNames,
+ testFigmaFileId,
+ testIconsPageName,
zdsAssetsfigmaFileId,
zdsAssetsFigmaIconsPageName,
} from "./test-data.js";
@@ -44,11 +45,13 @@ const functionsToTest = {
};
const output = (name: string, val1: any, val2: any) => {
- return val1.toString() === val2.toString() ? console.log("✅ Success - " + name) : console.error("❌ Error - " + name);
+ return val1.toString() === val2.toString()
+ ? console.log("✅ Success - " + name)
+ : console.error("❌ Error - " + name);
};
if (functionsToTest.integration) {
checkFigmaTokenIsSet(figmaToken);
- fetchIcons(figmaToken, zdsAssetsfigmaFileId, zdsAssetsFigmaIconsPageName, hash, "outputs", true);
+ fetchIcons(figmaToken, testFigmaFileId, testIconsPageName, hash, outputDir, true);
}
if (functionsToTest.getFigmaDocument) {