# {{ font.name }} #

![Available logos](assets/readme-header.png)

{{ font.name }} is an icon font containing logos of popular linux distributions and other open source software.

*Note:* All brand icons are trademarks of their respective owners and should only be used to represent the company or product to which they refer.

## Installation ##

Install the font by downloading and unpacking the latest release's zip manually or installing it from npm:

	npm install {{ font.name }}

To use the font, include `assets/{{ font.name }}.css` as well as the
fonts in your project and use the CSS classes listed below.

	<link href="/assets/{{ font.name }}.css" rel="stylesheet">

Alternatively just link to it using a CDN such as [jsDelivr](//jsdelivr.com):

	<link href="//cdn.jsdelivr.net/npm/{{ font.name }}@{{ font.version.stable }}/assets/{{ font.name }}.css" rel="stylesheet">

## Usage ##

Include an icon using the corresponding CSS class in an empty element:

	<i class="fl-[icon]"></i>

Add `fl-fw` as class for a fixed width icon.

If you want to insert a glyph of this font on a GNU/Linux system press `Ctrl + Shift + u`, release the keys and then type the code point, for instance: `Ctrl + Shift + u` and `f31a` will insert the `Tux` glyph.

Available logos are:

{%- macro img(id) %}<img src="vectors/{{ id }}.svg" width="24">{% endmacro %}
{%- macro class(id) %}`fl-{{ id }}`{% endmacro %}
{%- macro code(id) %}`<i class="fl-{{ id }}"></i>`{% endmacro %}
{%- set ids = icons|keys|sort %}
{%- set nameW = icons|values|column('name')|maxLength %}
{%- set maxIdLength = ids|maxLength %}
{%- set imgW = maxIdLength + img("")|length %}
{%- set classW = maxIdLength + class("")|length %}
{%- set codeW = maxIdLength + code("")|length %}

| {{ "Distribution"|center(nameW) }} | {{ "CSS class"|center(classW) }} | {{ "Code"|center(codeW) }} | Code point | {{ "Image"|center(imgW) }} |
| {{ "-".repeat(nameW) }} | {{ "-".repeat(classW) }} | {{ "-".repeat(codeW) }} | :--------: | :{{ "-".repeat(imgW-2) }}: |
{%- for id in ids %}
{%- set icon=icons[id] %}
| {{ icon.name.padEnd(nameW) }} | {{ class(id).padEnd(classW) }} | {{ code(id).padEnd(codeW)|safe }} |  `0x{{ icon.codepoint.toString(16) }}`  | {{ img(id).padEnd(imgW)|safe }} |
{%- endfor %}

## Building ##

Make sure you have the following dependencies installed:
* Node, Python and jq to run the build scripts
* [FontForge](//fontforge.org) to generate the fonts
* [wkhtmltopdf](http://wkhtmltopdf.org/) to generate this readme's preview image

Then run `npm install`/`yarn install` and `make`.

## Releasing ##

If you are a maintainer of this repository and a new release is to be published
* Make sure all PRs (that shall be pulled) are pulled
  * The PRs add new `svg`s in `vectors/`
  * The `icons.tsv` is ammended (i.e. new icons added at the bottom)
* Every time the `svg`s or `icons.tsv` is touched in the `master` branch (i.e. through pulling) the preview image is updated
* Note that the `README.md` is NOT updated. You can manually modify it do indicate/add recently added but not released icons.
* Once the release seems ready:
* Edit the version number in `package.json` (and push that change to `master`)
* Trigger the "Draft a Release" workflow manually on the Actions page (on the `master` branch)
  * The workflow will add a git tag for the release
* Go to the releases list and find the draft release
  * Edit the description etc pp and finally
  * Push "publish release"
  * The release is published on Github
* Automatically the "Update README" workflow is triggered
  * The `README.md` is regenerated (the preview should already be up to date, see above)
* Automatically the "Publish release to npm" workflow is triggered
  * If the npm token is not expired the release is pushed to NPM
  * You need to publish on NPM manually if token is expired (expected)