Pixel Art Icons package for 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, if you like this free icon set you will also like the premium ones.

Show preview

Install the package

You can check the latest version on pub.dev/pixelarticons.

dependencies:
  # ...
  pixelarticons: <latest-version>
  # ...

or run:

flutter pub add pixelarticons

Import the package

Import wherever you want:

import 'package:pixelarticons/pixelarticons.dart';

Use as `IconData`

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.

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

/// 4k icon:
Icon(Pixel.k4k)

/// switch icon:
Icon(Pixel.kswitch)

/// align-left icon:
Icon(Pixel.alignleft);

Purpose of this library

The process of including svgs as icons in Flutter is really boring:

Convert svg to font, you can choose a raw method for instance.
Import the icon font in the Flutter assets.
Create a class mapping each font charcode to a named static field.
Then you are (probably) ready to use your svgs as icons.

This library automates this process for pixel art icons.

Contribute

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

How it works

First we check if there's a new update available from the pixel art icons repository:

pixelarticons/autoupdate/lib/has_new_release.dart

Lines 8 to 10 in 96354a3

    
           final bool hasUpdate = await hasUpdateAvailable(); 
        
           stdout.write('::set-output name=$kHasNewReleaseActionKey::$hasUpdate');

We use a custom key in the pubspec.yaml file to compare the current published version of pixel art icons with the latest repository pixel art icons version.

If there is no update available, ignore it:

pixelarticons/.github/workflows/flow.yaml

Lines 12 to 31 in 96354a3

    
           check_if_there_is_a_new_release_update_available: 
        
             name: Check if there's a new release update available 
        
             runs-on: ubuntu-latest 
        
             outputs: 
        
               # 'update_available' came from 'has_new_release.dart' script 
        
               update_available: ${{ steps.there_is_a_new_update_available.outputs.update_available }} 
        
             steps: 
        
               - uses: actions/checkout@v2 
        
               - uses: dart-lang/setup-dart@v1 
        
               - name: Get dependencies 
        
                 run: cd autoupdate && dart pub get && cd .. 
        
               - name: Check if there's a new update 
        
                 id: "there_is_a_new_update_available" 
        
                 run: dart run autoupdate/lib/has_new_release.dart 
        
           publish_new_release: 
        
             name: Publish new package release 
        
             needs: ["check_if_there_is_a_new_release_update_available"] 
        
             if: ${{ needs.check_if_there_is_a_new_release_update_available.outputs.update_available == 'true' }}

Otherwise, update the pubspec.yaml with the latest pixel art icons repository version and push the new commit:

pixelarticons/.github/workflows/flow.yaml

Lines 40 to 53 in cfc1919

    
           - name: Get dependencies 
        
             run: cd autoupdate && dart pub get && cd .. 
        
           - name: Update pubspec.yaml [version] and [pixelarticons_version] 
        
             run: dart run autoupdate/lib/update.dart 
        
           - name: Generate commit message 
        
             id: commit_msg 
        
             run: dart run autoupdate/lib/commit_msg.dart 
        
           # Add, commit and push changes of the previous step (Update pubspec.yaml...) 
        
           - uses: EndBug/add-and-commit@v9 # You can change this to use a specific version. 
        
             with: 
        
               message: ${{ steps.commit_msg.outputs.new_release_commit_msg }}

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:

pixelarticons/.github/workflows/flow.yaml

Lines 55 to 65 in cfc1919

    
           - name: Install requests python library 
        
             run: pip install requests 
        
           - name: Download latest release 
        
             run: python3 download/download.py 
        
           - name: Install fontify library 
        
             run: dart pub global activate fontify 
        
           - name: Run fontify to generate the icons font (.ttf) 
        
             run: dart pub global run fontify

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

pixelarticons/pubspec.yaml

Lines 29 to 43 in 96354a3

    
           fontify: 
        
             input_svg_dir: "release/svg/" 
        
             output_font_file: "fonts/pixelarticons.otf" 
        
             output_class_file: "lib/pixel.dart" 
        
             class_name: "Pixel" 
        
             indent: 2 
        
             package: pixelarticons 
        
             font_name: "Pixel Art Icons" 
        
             normalize: true 
        
             ignore_shapes: true 
        
             recursive: true 
        
             verbose: false

Now, the package is ready to be published, so we do it right after:

pixelarticons/.github/workflows/flow.yaml

Lines 67 to 84 in 96354a3

    
                 - name: Create credentials file 
        
                   run: echo $PUB_CREDENTIALS > ~/pub-credentials.json 
        
                   env: 
        
                     PUB_CREDENTIALS: ${{ secrets.PUB_CREDENTIALS }} 
        
                 - name: Add credentials to Dart folder 
        
                   run: | 
        
                     mkdir -p ${XDG_CONFIG_HOME:-${HOME:-default}}/dart 
        
                     touch ${XDG_CONFIG_HOME:-${HOME:-default}}/dart/pub-credentials.json 
        
                     cp ~/pub-credentials.json ${XDG_CONFIG_HOME:-${HOME:-default}}/dart/pub-credentials.json 
        
                   env: 
        
                     PUB_CREDENTIALS: ${{ secrets.PUB_CREDENTIALS }} 
        
                 - name: Format generated files 
        
                   run: dart format . 
        
                 - name: Publish 
        
                   run: dart pub publish --force

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.

This flow is triggered by a cron that runs every 15 days or manually:

pixelarticons/.github/workflows/flow.yaml

Lines 1 to 6 in 96354a3

    
           name: Generate Font and Publish 
        
           on: 
        
             workflow_dispatch: 
        
             schedule: 
        
               # Every 1st and 15st of each month. Basically the library update itself every 15 days 
        
               - cron: "0 0 1,15 * *"

Run locally

To run locally, follow the same steps as the flow.yaml action.

The working directory is the repository root.

Required environment:

Dart SDK version: 2.14.4 (stable)
Python 3.9.9

Breaking Change Exception

This means that this tool can't find the latest release of the pixelarticons repository.

But this can have several causes, so the best way to fix that is to first figure out where the icons are located in the original repository and then update the ~/download/download.py script to fix/cover the breaking changes if they exists (this error can also be caused by a simple python exception).

Please fill a issue to see what is going wrong and do not worry: all current releases and versions will be available.

Name		Name	Last commit message	Last commit date
Latest commit History 4 Commits
.github/workflows		.github/workflows
autoupdate		autoupdate
download		download
example		example
fonts		fonts
lib		lib
.gitignore		.gitignore
.pubignore		.pubignore
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md
analysis_options.yaml		analysis_options.yaml
pubspec.yaml		pubspec.yaml

	final bool hasUpdate = await hasUpdateAvailable();

	stdout.write('::set-output name=$kHasNewReleaseActionKey::$hasUpdate');

	check_if_there_is_a_new_release_update_available:
	name: Check if there's a new release update available
	runs-on: ubuntu-latest
	outputs:
	# 'update_available' came from 'has_new_release.dart' script
	update_available: ${{ steps.there_is_a_new_update_available.outputs.update_available }}
	steps:
	- uses: actions/checkout@v2
	- uses: dart-lang/setup-dart@v1

	- name: Get dependencies
	run: cd autoupdate && dart pub get && cd ..

	- name: Check if there's a new update
	id: "there_is_a_new_update_available"
	run: dart run autoupdate/lib/has_new_release.dart
	publish_new_release:
	name: Publish new package release
	needs: ["check_if_there_is_a_new_release_update_available"]
	if: ${{ needs.check_if_there_is_a_new_release_update_available.outputs.update_available == 'true' }}

	- name: Get dependencies
	run: cd autoupdate && dart pub get && cd ..

	- name: Update pubspec.yaml [version] and [pixelarticons_version]
	run: dart run autoupdate/lib/update.dart

	- name: Generate commit message
	id: commit_msg
	run: dart run autoupdate/lib/commit_msg.dart

	# Add, commit and push changes of the previous step (Update pubspec.yaml...)
	- uses: EndBug/add-and-commit@v9 # You can change this to use a specific version.
	with:
	message: ${{ steps.commit_msg.outputs.new_release_commit_msg }}

	- name: Install requests python library
	run: pip install requests

	- name: Download latest release
	run: python3 download/download.py

	- name: Install fontify library
	run: dart pub global activate fontify

	- name: Run fontify to generate the icons font (.ttf)
	run: dart pub global run fontify

	fontify:
	input_svg_dir: "release/svg/"
	output_font_file: "fonts/pixelarticons.otf"

	output_class_file: "lib/pixel.dart"
	class_name: "Pixel"
	indent: 2
	package: pixelarticons

	font_name: "Pixel Art Icons"
	normalize: true
	ignore_shapes: true

	recursive: true
	verbose: false

	- name: Create credentials file
	run: echo $PUB_CREDENTIALS > ~/pub-credentials.json
	env:
	PUB_CREDENTIALS: ${{ secrets.PUB_CREDENTIALS }}

	- name: Add credentials to Dart folder
	run: \|
	mkdir -p ${XDG_CONFIG_HOME:-${HOME:-default}}/dart
	touch ${XDG_CONFIG_HOME:-${HOME:-default}}/dart/pub-credentials.json
	cp ~/pub-credentials.json ${XDG_CONFIG_HOME:-${HOME:-default}}/dart/pub-credentials.json
	env:
	PUB_CREDENTIALS: ${{ secrets.PUB_CREDENTIALS }}

	- name: Format generated files
	run: dart format .

	- name: Publish
	run: dart pub publish --force

	name: Generate Font and Publish
	on:
	workflow_dispatch:
	schedule:
	# Every 1st and 15st of each month. Basically the library update itself every 15 days
	- cron: "0 0 1,15 * *"

License

alexrintt/pixelarticons

Folders and files

Latest commit

History

Repository files navigation

Pixel Art Icons package for Flutter

Install the package

Import the package

Use as IconData

Purpose of this library

Contribute

How it works

Run locally

Breaking Change Exception

Open Source

About

Topics

Resources

License

Stars

Watchers

Forks

Languages

Use as `IconData`