Griffon Typ Icon Font Plugin

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

Node	Type
typIcon	`griffon.javafx.support.typicons.TypIcon`

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

Node	Type
typIcon	`griffon.swing.support.typicons.TypIcon`

typIcon

griffon.swing.support.typicons.TypIcon

5. Links

Javadoc

API Sources

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

Enum

Name

Icon

ADJUST_BRIGHTNESS

adjust-brightness

ADJUST_CONTRAST

adjust-contrast

ANCHOR

anchor

ANCHOR_OUTLINE

anchor-outline