1. Introduction

TypIcons gives you scalable vector icons. This plugin enables toolkit specific icon support.

Currently supported TypIcons version is 2.0.7.

Typicons by Stephen Hutchings

Font License: SIL OFL 1.1 (http://scripts.sil.org/OFL)
Applies to all font files

Code License: CC BY-SA (http://creativecommons.org/licenses/by-sa/3.0/)
Applies to icons and artwork

Griffon version: 2.3.0

2. Usage

2.1. Swing

The griffon-typicons-swing:1.1.0 JAR provides a new Icon class: griffon.swing.support.typicons.TypIcon. You may use this class with any Swing component that supports an Icon property.

2.2. JavaFX

The griffon-typicons-javafx:1.1.0 JAR provides a new Node class: griffon.javafx.support.typicons.TypIcon. You may use this class with any JavaFX control that accepts a graphic property. You may also use the icon directly as it is a subclass of javafx.scene.control.Label. The icon class can be used inside an FXML file too.

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.GridPane?>
<?import griffon.javafx.support.typicons.TypIcon?>

<GridPane prefHeight="60.0" prefWidth="200.0"
          xmlns:fx="http://javafx.com/fxml"
          fx:controller="org.example.AppController">
    <children>
        <Button fx:id="preferencesActionTarget"
                GridPane.columnIndex="0" GridPane.rowIndex="0"
                mnemonicParsing="false"
                prefWidth="200.0">
            <graphic>
                <TypIcon typIcon="AT" iconSize="64"/>
            </graphic>
        </Button>
    </children>
</GridPane>

The JavaFX icon requires the usage of the TypIcon enum value.

2.3. Action Resources

Action icons can be set using resources files if the following format is used:

iconClassName|name:size:color

size and color are optional.

Here’s an example using the Swing icon

griffon-app/i18n/messages.properties
org.example.AppController.action.Preferences.small_icon=griffon.swing.support.typicons.TypIcon|at:64

The JavaFX version for the same icon value is

griffon-app/i18n/messages.properties
org.example.AppController.action.Preferences.icon=griffon.javafx.support.typicons.TypIcon|at:64

3. Configuration

The plugin delivers artifacts for both Swing and JavaFX. It also contains Groovy enhancements that can be used in combination with the respective UI toolkit DSL (SwingBuilder and GroovyFX).

3.1. Gradle

You have two options for configuring this plugin: automatic and manual.

3.1.1. Automatic

As long as the project has the org.codehaus.griffon.griffon plugin applied to it you may include the following snippet in build.gradle

dependencies {
    griffon 'org.codehaus.griffon.plugins:griffon-typicons-plugin:1.1.0'
}

The griffon plugin will take care of the rest given its configuration.

3.1.2. Manual

You will need to configure any of the following blocks depending on your setup

Java + Swing
dependencies {
    compile 'org.codehaus.griffon.plugins:griffon-typicons-swing:1.1.0'
}
Java + JavaFX
dependencies {
    compile 'org.codehaus.griffon.plugins:griffon-typicons-javafx:1.1.0'
}
Groovy + Swing
dependencies {
    compile 'org.codehaus.griffon.plugins:griffon-typicons-swing-groovy:1.1.0'
}
Groovy + JavaFX
dependencies {
    compile 'org.codehaus.griffon.plugins:griffon-typicons-javafx-groovy:1.1.0'
}

3.2. Maven

First configure the griffon-typicons-plugin BOM in your POM file, by placing the following snippet before the <build> element

<dependencyManagement>
    <dependencies>
        <dependency>
            <groupId>org.codehaus.griffon.plugins</groupId>
            <artifactId>griffon-typicons-plugin</artifactId>
            <version>1.1.0</version>
            <type>pom</type>
            <scope>import</scope>
        </dependency>
    </dependencies>
</dependencyManagement>

Next configure dependencies as required by your particular setup

Java + Swing
<dependency>
    <groupId>org.codehaus.griffon.plugins</groupId>
    <artifactId>griffon-typicons-swing</artifactId>
</dependency>
Java + JavaFX
<dependency>
    <groupId>org.codehaus.griffon.plugins</groupId>
    <artifactId>griffon-typicons-javafx</artifactId>
</dependency>
Groovy + Swing
<dependency>
    <groupId>org.codehaus.griffon.plugins</groupId>
    <artifactId>griffon-typicons-swing-groovy</artifactId>
</dependency>
Groovy + JavaFX
<dependency>
    <groupId>org.codehaus.griffon.plugins</groupId>
    <artifactId>griffon-typicons-javafx-groovy</artifactId>
</dependency>

4. Modules

The following sections display all bindings per module. Use this information to successfully override a binding on your own modules or to troubleshoot a module binding if the wrong type has been applied by the Griffon runtime.

4.1. JavaFX

Module name: typicons-javafx-groovy

Depends on: javafx-groovy

bind(BuilderCustomizer.class)
    .to(TypIconsJavaFXBuilderCustomizer.class)
    .asSingleton();

The following nodes will become available on a Groovy View

Node Type

typIcon

griffon.javafx.support.typicons.TypIcon

4.2. Swing

Module name: typicons-swing-groovy

Depends on: swing-groovy

bind(BuilderCustomizer.class)
    .to(TypIconsSwingBuilderCustomizer.class)
    .asSingleton();

The following nodes will become available on a Groovy View

Node Type

typIcon

griffon.swing.support.typicons.TypIcon

6. Icon Cheat Sheet

The following tables show all available icons.

Enum Name Icon

ADJUST_BRIGHTNESS

adjust-brightness

ADJUST_CONTRAST

adjust-contrast

ANCHOR

anchor

ANCHOR_OUTLINE

anchor-outline

ARCHIVE

archive

ARROW_BACK

arrow-back

ARROW_BACK_OUTLINE

arrow-back-outline

ARROW_DOWN

arrow-down

ARROW_DOWN_OUTLINE

arrow-down-outline

ARROW_DOWN_THICK

arrow-down-thick

ARROW_FORWARD

arrow-forward

ARROW_FORWARD_OUTLINE

arrow-forward-outline

ARROW_LEFT

arrow-left

ARROW_LEFT_OUTLINE

arrow-left-outline

ARROW_LEFT_THICK

arrow-left-thick

ARROW_LOOP

arrow-loop

ARROW_LOOP_OUTLINE

arrow-loop-outline

ARROW_MAXIMISE

arrow-maximise

ARROW_MAXIMISE_OUTLINE

arrow-maximise-outline

ARROW_MINIMISE

arrow-minimise

ARROW_MINIMISE_OUTLINE

arrow-minimise-outline

ARROW_MOVE

arrow-move

ARROW_MOVE_OUTLINE

arrow-move-outline

ARROW_REPEAT

arrow-repeat

ARROW_REPEAT_OUTLINE

arrow-repeat-outline

ARROW_RIGHT

arrow-right

ARROW_RIGHT_OUTLINE

arrow-right-outline

ARROW_RIGHT_THICK

arrow-right-thick

ARROW_SHUFFLE

arrow-shuffle

ARROW_SORTED_DOWN

arrow-sorted-down

ARROW_SORTED_UP

arrow-sorted-up

ARROW_SYNC

arrow-sync

ARROW_SYNC_OUTLINE

arrow-sync-outline

ARROW_UNSORTED

arrow-unsorted

ARROW_UP

arrow-up

ARROW_UP_OUTLINE

arrow-up-outline

ARROW_UP_THICK

arrow-up-thick

AT

at

ATTACHMENT

attachment

ATTACHMENT_OUTLINE

attachment-outline

BACKSPACE

backspace

BACKSPACE_OUTLINE

backspace-outline

BATTERY_CHARGE

battery-charge

BATTERY_FULL

battery-full

BATTERY_HIGH

battery-high

BATTERY_LOW

battery-low

BATTERY_MID

battery-mid

BEAKER

beaker

BEER

beer

BELL

bell

BOOK

book

BOOKMARK

bookmark

BRIEFCASE

briefcase

BRUSH

brush

BUSINESS_CARD

business-card

CALCULATOR

calculator

CALENDAR

calendar

CALENDAR_OUTLINE

calendar-outline

CAMERA

camera

CAMERA_OUTLINE

camera-outline

CANCEL

cancel

CANCEL_OUTLINE

cancel-outline

CHART_AREA

chart-area

CHART_AREA_OUTLINE

chart-area-outline

CHART_BAR

chart-bar

CHART_BAR_OUTLINE

chart-bar-outline

CHART_LINE

chart-line

CHART_LINE_OUTLINE

chart-line-outline

CHART_PIE

chart-pie

CHART_PIE_OUTLINE

chart-pie-outline

CHEVRON_LEFT

chevron-left

CHEVRON_LEFT_OUTLINE

chevron-left-outline

CHEVRON_RIGHT

chevron-right

CHEVRON_RIGHT_OUTLINE

chevron-right-outline

CLIPBOARD

clipboard

CLOUD_STORAGE

cloud-storage

CLOUD_STORAGE_OUTLINE

cloud-storage-outline

CODE

code

CODE_OUTLINE

code-outline

COFFEE

coffee

COG

cog

COG_OUTLINE

cog-outline

COMPASS

compass

CONTACTS

contacts

CREDIT_CARD

credit-card

CSS3

css3

DATABASE

database

DELETE

delete

DELETE_OUTLINE

delete-outline

DEVICE_DESKTOP

device-desktop

DEVICE_LAPTOP

device-laptop

DEVICE_PHONE

device-phone

DEVICE_TABLET

device-tablet

DIRECTIONS

directions

DIVIDE

divide

DIVIDE_OUTLINE

divide-outline

DOCUMENT

document

DOCUMENT_ADD

document-add

DOCUMENT_DELETE

document-delete

DOCUMENT_TEXT

document-text

DOWNLOAD

download

DOWNLOAD_OUTLINE

download-outline

DROPBOX

dropbox

EDIT

edit

EJECT

eject

EJECT_OUTLINE

eject-outline

EQUALS

equals

EQUALS_OUTLINE

equals-outline

EXPORT

export

EXPORT_OUTLINE

export-outline

EYE

eye

EYE_OUTLINE

eye-outline

FEATHER

feather

FILM

film

FILTER

filter

FLAG

flag

FLAG_OUTLINE

flag-outline

FLASH

flash

FLASH_OUTLINE

flash-outline

FLOW_CHILDREN

flow-children

FLOW_MERGE

flow-merge

FLOW_PARALLEL

flow-parallel

FLOW_SWITCH

flow-switch

FOLDER

folder

FOLDER_ADD

folder-add

FOLDER_DELETE

folder-delete

FOLDER_OPEN

folder-open

GIFT

gift

GLOBE

globe

GLOBE_OUTLINE

globe-outline

GROUP

group

GROUP_OUTLINE

group-outline

HEADPHONES

headphones

HEART

heart

HEART_FULL_OUTLINE

heart-full-outline

HEART_HALF_OUTLINE

heart-half-outline

HEART_OUTLINE

heart-outline

HOME

home

HOME_OUTLINE

home-outline

HTML5

html5

IMAGE

image

IMAGE_OUTLINE

image-outline

INFINITY

infinity

INFINITY_OUTLINE

infinity-outline

INFO

info

INFO_LARGE

info-large

INFO_LARGE_OUTLINE

info-large-outline

INFO_OUTLINE

info-outline

INPUT_CHECKED

input-checked

INPUT_CHECKED_OUTLINE

input-checked-outline

KEY

key

KEYBOARD

keyboard

KEY_OUTLINE

key-outline

LEAF

leaf

LIGHTBULB

lightbulb

LINK

link

LINK_OUTLINE

link-outline

LOCATION

location

LOCATION_ARROW

location-arrow

LOCATION_ARROW_OUTLINE

location-arrow-outline

LOCATION_OUTLINE

location-outline

LOCK_CLOSED

lock-closed

LOCK_CLOSED_OUTLINE

lock-closed-outline

LOCK_OPEN

lock-open

LOCK_OPEN_OUTLINE

lock-open-outline

MAIL

mail

MAP

map

MEDIA_EJECT

media-eject

MEDIA_EJECT_OUTLINE

media-eject-outline

MEDIA_FAST_FORWARD

media-fast-forward

MEDIA_FAST_FORWARD_OUTLINE

media-fast-forward-outline

MEDIA_PAUSE

media-pause

MEDIA_PAUSE_OUTLINE

media-pause-outline

MEDIA_PLAY

media-play

MEDIA_PLAY_OUTLINE

media-play-outline

MEDIA_PLAY_REVERSE

media-play-reverse

MEDIA_PLAY_REVERSE_OUTLINE

media-play-reverse-outline

MEDIA_RECORD

media-record

MEDIA_RECORD_OUTLINE

media-record-outline

MEDIA_REWIND

media-rewind

MEDIA_REWIND_OUTLINE

media-rewind-outline

MEDIA_STOP

media-stop

MEDIA_STOP_OUTLINE

media-stop-outline

MESSAGE

message

MESSAGES

messages

MESSAGE_TYPING

message-typing

MICROPHONE

microphone

MICROPHONE_OUTLINE

microphone-outline

MINUS

minus

MINUS_OUTLINE

minus-outline

MORTAR_BOARD

mortar-board

NEWS

news

NOTES

notes

NOTES_OUTLINE

notes-outline

PEN

pen

PENCIL

pencil

PHONE

phone

PHONE_OUTLINE

phone-outline

PI

pi

PIN

pin

PIN_OUTLINE

pin-outline

PIPETTE

pipette

PI_OUTLINE

pi-outline

PLANE

plane

PLANE_OUTLINE

plane-outline

PLUG

plug

PLUS

plus

PLUS_OUTLINE

plus-outline

POINT_OF_INTEREST

point-of-interest

POINT_OF_INTEREST_OUTLINE

point-of-interest-outline

POWER

power

POWER_OUTLINE

power-outline

PRINTER

printer

PUZZLE

puzzle

PUZZLE_OUTLINE

puzzle-outline

RADAR

radar

RADAR_OUTLINE

radar-outline

REFRESH

refresh

REFRESH_OUTLINE

refresh-outline

RSS

rss

RSS_OUTLINE

rss-outline

SCISSORS

scissors

SCISSORS_OUTLINE

scissors-outline

SHOPPING_BAG

shopping-bag

SHOPPING_CART

shopping-cart

SOCIAL_AT_CIRCULAR

social-at-circular

SOCIAL_DRIBBBLE

social-dribbble

SOCIAL_DRIBBBLE_CIRCULAR

social-dribbble-circular

SOCIAL_FACEBOOK

social-facebook

SOCIAL_FACEBOOK_CIRCULAR

social-facebook-circular

SOCIAL_FLICKR

social-flickr

SOCIAL_FLICKR_CIRCULAR

social-flickr-circular

SOCIAL_GITHUB

social-github

SOCIAL_GITHUB_CIRCULAR

social-github-circular

SOCIAL_GOOGLE_PLUS

social-google-plus

SOCIAL_GOOGLE_PLUS_CIRCULAR

social-google-plus-circular

SOCIAL_INSTAGRAM

social-instagram

SOCIAL_INSTAGRAM_CIRCULAR

social-instagram-circular

SOCIAL_LAST_FM

social-last-fm

SOCIAL_LAST_FM_CIRCULAR

social-last-fm-circular

SOCIAL_LINKEDIN

social-linkedin

SOCIAL_LINKEDIN_CIRCULAR

social-linkedin-circular

SOCIAL_PINTEREST

social-pinterest

SOCIAL_PINTEREST_CIRCULAR

social-pinterest-circular

SOCIAL_SKYPE

social-skype

SOCIAL_SKYPE_OUTLINE

social-skype-outline

SOCIAL_TUMBLER

social-tumbler

SOCIAL_TUMBLER_CIRCULAR

social-tumbler-circular

SOCIAL_TWITTER

social-twitter

SOCIAL_TWITTER_CIRCULAR

social-twitter-circular

SOCIAL_VIMEO

social-vimeo

SOCIAL_VIMEO_CIRCULAR

social-vimeo-circular

SOCIAL_YOUTUBE

social-youtube

SOCIAL_YOUTUBE_CIRCULAR

social-youtube-circular

SORT_ALPHABETICALLY

sort-alphabetically

SORT_ALPHABETICALLY_OUTLINE

sort-alphabetically-outline

SORT_NUMERICALLY

sort-numerically

SORT_NUMERICALLY_OUTLINE

sort-numerically-outline

SPANNER

spanner

SPANNER_OUTLINE

spanner-outline

SPIRAL

spiral

STAR

star

STARBURST

starburst

STARBURST_OUTLINE

starburst-outline

STAR_FULL_OUTLINE

star-full-outline

STAR_HALF

star-half

STAR_HALF_OUTLINE

star-half-outline

STAR_OUTLINE

star-outline

STOPWATCH

stopwatch

SUPPORT

support

TABS_OUTLINE

tabs-outline

TAG

tag

TAGS

tags

THERMOMETER

thermometer

THUMBS_DOWN

thumbs-down

THUMBS_OK

thumbs-ok

THUMBS_UP

thumbs-up

TH_LARGE

th-large

TH_LARGE_OUTLINE

th-large-outline

TH_LIST

th-list

TH_LIST_OUTLINE

th-list-outline

TH_MENU

th-menu

TH_MENU_OUTLINE

th-menu-outline

TH_SMALL

th-small

TH_SMALL_OUTLINE

th-small-outline

TICK

tick

TICKET

ticket

TICK_OUTLINE

tick-outline

TIME

time

TIMES

times

TIMES_OUTLINE

times-outline

TRASH

trash

TREE

tree

UPLOAD

upload

UPLOAD_OUTLINE

upload-outline

USER

user

USER_ADD

user-add

USER_ADD_OUTLINE

user-add-outline

USER_DELETE

user-delete

USER_DELETE_OUTLINE

user-delete-outline

USER_OUTLINE

user-outline

VENDOR_ANDROID

vendor-android

VENDOR_APPLE

vendor-apple

VENDOR_MICROSOFT

vendor-microsoft

VIDEO

video

VIDEO_OUTLINE

video-outline

VOLUME

volume

VOLUME_DOWN

volume-down

VOLUME_MUTE

volume-mute

VOLUME_UP

volume-up

WARNING

warning

WARNING_OUTLINE

warning-outline

WATCH

watch

WAVES

waves

WAVES_OUTLINE

waves-outline

WEATHER_CLOUDY

weather-cloudy

WEATHER_DOWNPOUR

weather-downpour

WEATHER_NIGHT

weather-night

WEATHER_PARTLY_SUNNY

weather-partly-sunny

WEATHER_SHOWER

weather-shower

WEATHER_SNOW

weather-snow

WEATHER_STORMY

weather-stormy

WEATHER_SUNNY

weather-sunny

WEATHER_WINDY

weather-windy

WEATHER_WINDY_CLOUDY

weather-windy-cloudy

WINE

wine

WI_FI

wi-fi

WI_FI_OUTLINE

wi-fi-outline

WORLD

world

WORLD_OUTLINE

world-outline

ZOOM

zoom

ZOOM_IN

zoom-in

ZOOM_IN_OUTLINE

zoom-in-outline

ZOOM_OUT

zoom-out

ZOOM_OUTLINE

zoom-outline

ZOOM_OUT_OUTLINE

zoom-out-outline