mirror of
https://gitlab.com/openstapps/openstapps.git
synced 2026-01-03 12:02:53 +00:00
84 lines
2.2 KiB
Markdown
84 lines
2.2 KiB
Markdown
# Icons
|
|
|
|
A few notes to our icon set, for users and future maintainers.
|
|
|
|
You will need to setup fonttools with python
|
|
|
|
```shell
|
|
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](https://fonts.google.com/icons?icon.style=Rounded)
|
|
|
|
We have extended the `ion-icon` element via a directive. **Make sure your
|
|
module imports the `IonIconModule`**, you can then proceed using `ion-icon`s
|
|
as usual.
|
|
|
|
The modified `ion-icon` comes with a few extra features:
|
|
|
|
- `[fill]` controls the fill color of the icon.
|
|
- `[weight]` controls the font weight of the icon.
|
|
- `[size]` controls the font size of the icon.
|
|
- `[grade]` controls the font grade of the icon.
|
|
|
|
All of these attributes are animated as described
|
|
[here](https://developers.google.com/fonts/docs/material_symbols).
|
|
|
|
|
|
|
|
You can also control these attributes via css:
|
|
|
|
```scss
|
|
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:
|
|
|
|
1. Use the type-safe proxy for referencing icon names in
|
|
TypeScript files and code
|
|
|
|
```ts
|
|
SCIcon.icon_name;
|
|
```
|
|
|
|
2. When using `ion-icon` in HTML, reference either icons that went through
|
|
the `SCIcon` tag or write them as one of the following:
|
|
|
|
```html
|
|
<!-- 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
|
|
|
|
```shell
|
|
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](https://github.com/fonttools/fonttools).
|