@zebra-fed/zeta-icons v0.9.7
zeta-icons
An icon library for the Zeta design system.
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 ofzeta-web
andzeta-react
.
Installation
Zeta Icons is hosted on npm, 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
@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:
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:
<span class="icon" style="font-size: 24px; color: blue;">alarm</span>
Flutter
Zeta Icons for Flutter are part of zeta_flutter.
Installation
Zeta flutter is hosted on pub.dev, 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.
Icon(ZetaIcons.activity_round, color: Colors.red, size: 24)
🚧 Note: This does not work with all versions of node - tested and working with node 18.17.0
Before any tests are ran, make sure to create an env.test.local
file with the value of FIGMA_ACCESS_TOKEN
set to a Figma token which has access to the ZDS Assets Figma and the Test Figma.
To test the functionality of the scripts against a test Figma file with a subset of the icons, run
npm run test
and inspect the outputs in test/outputs/test-figma.
To run a full test against the ZDS Assets Figma, run
npm run test:build
and inspect the outputs in test/outputs/zds.
Licensing
This software is licensed with the MIT license (see LICENSE).
7 months ago
7 months ago
8 months ago
9 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago