1214b31cfc
fix: changeset crashes because it uses internal prettier version refactor: add asdf tool versioning file fix: iOS build resources fix: backend tests break every year refactor: update some backend unit tests feat: add direnv for nix feat: update nix flake to not rely on buildFHSUserEnv feat: enable checkJs by default feat: custom ion-icon package feat: custom ion-icon package feat: custom ion-icon element feat: custom ion-icon element feat: custom ion-icon element feat: custom ion icon element fix: e2e tests
2.2 KiB
Icons
A few notes to our icon set, for users and future maintainers.
You will need to setup fonttools with python
python -m venv .venv && .venv/bin/python -m pip install -r requirements.txt
Alternatively, anything that puts fonttools within your path will do as well.
Usage
To find icon names, visit the Google Material Symbols Page
We have extended the ion-icon element via a directive. Make sure your
module imports the IonIconModule, you can then proceed using ion-icons
as usual.
The modified ion-icon comes with a few extra features:
[style.--fill]controls the fill color of the icon.[style.--weight]controls the font weight of the icon.[style.--size]controls the font size of the icon.[style.--grade]controls the font grade of the icon.
All of these attributes are animated as described here.
You can also control these attributes via css:
ion-icon ::ng-deep stapps-icon {
--fill: 1;
--grade: 0;
--weight: 400;
}
Sometimes icon code points cannot be determined automatically, for whatever reason. In this case, you will need to specify the code point manually in the config file.
Icon Font Minification
Icon font minification is done automatically, but requires you to follow a few simple rules:
- Use the Proxy object to reference icon names in TypeScript files and code
SCIcon.icon_name;
- When using
ion-iconin HTML, reference either icons that went through theSCIcontag or write them as one of the following:
<!-- do -->
<ion-icon name="icon_name"></ion-icon>
<ion-icon [name]="'icon_name'"></ion-icon>
<!-- don't -->
<ion-icon name="icon_name" />
<!-- self-closing -->
<ion-icon [name]="condition ? 'icon_name' : 'other_icon_name'"></ion-icon>
Icons that are unknown at compile time can be specified in the
additionalIcons property of the icons.config.ts file.
The minification can then be done by running
npm run minify-icons
Unfortunately, I was unable to find a JS package that could to the job, and had to rely on the Python module fonttools.