diff --git a/README.md b/README.md index 0aa47a0..5bb2bf0 100644 --- a/README.md +++ b/README.md @@ -1,59 +1,50 @@ - - -

- -

- -
#dart, #flutter, #package, #icons
-

Pixel Art Icons

+# Pixel Art Icons package for Flutter -
Dart package to use pixelarticons in Flutter
+ -

- - - -

- -

- -

+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. - +- See all available icons at https://pixelarticons.com/free/. +- Get the Figma file at https://www.figma.com/community/file/952542622393317653. -
- -
+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 +
+ Show preview -**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! +
-> **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: + # ... +``` -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: @@ -61,7 +52,9 @@ Be aware: - 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: @@ -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