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) {