Skip to content

Commit

Permalink
Update README.md to cover the entire automated flow so I'll not need …
Browse files Browse the repository at this point in the history 
…to re-learn how this stuff works in some years, long live laziness
  • Loading branch information
Alex Rintt authored Feb 21, 2023
1 parent 96354a3 commit 152b166
Showing 1 changed file with 63 additions and 71 deletions.
134 changes: 63 additions & 71 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,67 +1,60 @@
<samp>

<p align="center">
<img src="https://user-images.githubusercontent.com/51419598/152648731-567997ec-ac1c-4a9c-a816-a1fb1882abbe.png" width="150">
</p>

<samp><h6 align="center">#dart, #flutter, #package, #icons</h6></samp>
<samp><h1 align="center">Pixel Art Icons</h1></samp>
# Pixel Art Icons package for Flutter

<h6 align="center"><samp>Dart package to use <a href="https://pixelarticons.com/"><code>pixelarticons</code></a> in Flutter</samp></h6>
<a href="https://pub.dartlang.org/packages/pixelarticons"><img src="https://img.shields.io/pub/v/pixelarticons.svg" /></a>

<p align="center">
<img src="https://img.shields.io/badge/Dart-22272E?&style=for-the-badge&logo=dart&logoColor=48C1BB">
<img src="https://img.shields.io/badge/Flutter-22272E?style=for-the-badge&logo=flutter&logoColor=54C2F6">
<img src="https://img.shields.io/badge/Python-22272E?style=for-the-badge&logo=python&logoColor=326EA0">
</p>

<p align="center">
<a href="https://pub.dartlang.org/packages/pixelarticons"><img src="https://img.shields.io/pub/v/pixelarticons.svg" /></a>
</p>
This package provides a set of pixel art icons as font for Flutter, it can be used in the same way we use `Icons` class.

<kbd><img src="https://user-images.githubusercontent.com/51419598/152649069-fa447289-0e7f-4c5e-af4d-bef4c62c71ce.png"></kbd>
- See all available icons at https://pixelarticons.com/free/.
- Get the Figma file at https://www.figma.com/community/file/952542622393317653.

</samp>

<br />
Icon set created by [@halfmage](https://github.com/halfmage), if you like this free icon set you will also like the [premium ones](https://halfmage.gumroad.com/).

## Original author
<details>
<summary>Show preview</summary>

**The original author is [@halfmage](https://github.com/halfmage)** on the [pixelarticons](https://github.com/halfmage/pixelarticons).
![Pixelarticons - Frame](https://user-images.githubusercontent.com/51419598/220436077-1a1bd414-5f5c-42c6-a283-d6bc16be5259.png#gh-dark-mode-only)
![Pixelarticons - Frame](https://user-images.githubusercontent.com/51419598/220435552-9082c3fa-426b-4de7-b813-ef6b85f76073.png#gh-light-mode-only)

So, please if you like these icons, **thanks to [@halfmage](https://github.com/halfmage)!** and show support on the original repository!
</details>

> **Warning** This package is just an automated tool to generate the font from the svg icons created by [@halfmage](https://github.com/halfmage).
## Install the package

## How to use
You can check the latest version on [pub.dev/pixelarticons](https://pub.dartlang.org/packages/pixelarticons).

### 1. Install the package
```yaml
dependencies:
# ...
pixelarticons: <latest-version>
# ...
```

You can also check the on [pub.dev](https://pub.dartlang.org/packages/pixelarticons).
or run:

```shell
flutter pub add pixelarticons
```

### 2. Import in to the project
## Import the package

Import wherever you want.
Import wherever you want:

```dart
import 'package:pixelarticons/pixelarticons.dart';
```

### 3. Use as `IconData`
## Use as `IconData`

`pixelarticons` is the same of `Icons` class but renamed to `Pixel`.
`pixelarticons` package uses the `IconData` class, so the usage is pretty much the same of the `Icons` class but renamed to `Pixel`.

Be aware:

- **Lower-case for all icons and no separators**, for example `card-plus` is written as `Pixel.cardplus`.
- Icons that **starts with non-alpha characters**, like `4k`, `4k-box`, `4g` are prefixed with `k`.
- Icons that are Dart keywords, like `switch` are prefix with `k` as well.

So use `k4k`, `k4kbox`, `kswitch` instead:
So use `k4k`, `k4kbox`, `kswitch` instead.

Icon full list https://pixelarticons.com/free/.

```dart
/// 4k icon:
Expand All @@ -74,72 +67,71 @@ Icon(Pixel.kswitch)
Icon(Pixel.alignleft);
```

---

## Purpose of this library

You can download directly from the source, but you'll need convert all the svg files to font and generate the Dart classes... and you'll repeat the process if you want to include a new released icon in the future, so this library was made to automate this gap.
The process of including svgs as icons in Flutter is really boring:

1. Convert svg to font, you can choose a [raw method](https://stackoverflow.com/questions/13278707/how-can-i-convert-svg-files-to-a-font) for instance.
2. Import the icon font in the Flutter assets.
3. Create a class mapping each font charcode to a named static field.
4. Then you are (probably) ready to use your svgs as icons.

This library automates this process for [pixel art icons](https://pixelarticons.com/).

## Contribute

Use the issues tab to discuss new features and bug reports.

## Flow
## How it works

This library works automatically:
First we check [if there's a new update available](https://github.com/alexrintt/pixelarticons/blob/master/autoupdate/lib/has_new_release.dart) from the [pixel art icons repository](https://github.com/halfmage/pixelarticons):

- `/download` contains a python script that downloads svg from all icons of `pixelarticons`.
- `/lib` contains an entry point that exports the generated icon classes (generated by [fontify](https://github.com/westracer/fontify)).
https://github.com/alexrintt/pixelarticons/blob/96354a3b1e067484c743e016282c38ef6b03cf57/autoupdate/lib/has_new_release.dart#L8-L10

This flow is powered by GitHub actions, and the triggers are:
We use a [custom key in the `pubspec.yaml`](https://github.com/alexrintt/pixelarticons/blob/96354a3b1e067484c743e016282c38ef6b03cf57/pubspec.yaml#L5) file to compare the current published version of pixel art icons with the latest repository pixel art icons repository.

- **scheduled**: every 15 days we'll check if new icons are available, if so we'll update the `pub.dev` library otherwise we'll just ignore the possible update.
- **manually**: if we go to `actions` tab, we can trigger the `flow.yaml` action clicking `run` over the action card (need repo write access).
If there is no update available, ignore it:

## Run locally
https://github.com/alexrintt/pixelarticons/blob/96354a3b1e067484c743e016282c38ef6b03cf57/.github/workflows/flow.yaml#L12-L31

Steps to run this project locally.
Otherwise, update the `pubspec.yaml` with the latest pixel art icons repository version and push the new commit:

### Environment:
https://github.com/alexrintt/pixelarticons/blob/master/.github/workflows/flow.yaml#L40-L53

Required environment:
Now that we are up-to-date with the latest repository version in theory (since we just updated the version info), lets actually download the pixel art icons svgs, generate the font and the Dart font class:

```
Dart SDK version: 2.14.4 (stable)
Python 3.9.9
```
https://github.com/alexrintt/pixelarticons/blob/master/.github/workflows/flow.yaml#L55-L65

### Download the icons
Note that the fontify library knows how to find the files because we defined the configuration in the `pubspec.yaml`:

Working dir: `~/`:
https://github.com/alexrintt/pixelarticons/blob/96354a3b1e067484c743e016282c38ef6b03cf57/pubspec.yaml#L29-L43

1. Install `requests` library.
Now, the package is ready to be published, so we do it right after:

```
pip install requests
```
https://github.com/alexrintt/pixelarticons/blob/96354a3b1e067484c743e016282c38ef6b03cf57/.github/workflows/flow.yaml#L67-L84

2. Download icons using Python.
Note that the pub credentials are generated after you publish the package for the first time, so the first release of your automated tool must be manual, then you copy the credentials generated in your local machine to the GitHub secrets. I did this several years ago, so I don't know if there is a new method to auth on pub.dev.

```
py download/download.py
```
---

### Generate classes using `fontify`
This flow is triggered by a cron that runs every 15 days or manually:

1. Add `fontify` as global dependency:
https://github.com/alexrintt/pixelarticons/blob/96354a3b1e067484c743e016282c38ef6b03cf57/.github/workflows/flow.yaml#L1-L6

```
dart pub global activate fontify
```
## Run locally

2. Run `fontify`:
To run locally, follow the same steps as the [`flow.yaml` action](https://github.com/alexrintt/pixelarticons/blob/master/.github/workflows/flow.yaml).

```
dart pub global run fontify
```
The working directory is the repository root.

**Done**, you'll see a folder called `~/release` and a font `~/fonts/pixelarticons.otf`.
Required environment:

What you want is the font inside the `~/fonts` folder, the `~/release` folder should be ignored. Now you can publish or do whatever you want!
```
Dart SDK version: 2.14.4 (stable)
Python 3.9.9
```

## Breaking Change Exception

Expand Down

0 comments on commit 152b166

Please sign in to comment.