Iconography

Import, manage, get and store/cache icons into Pharo from standard icon libraries.

This project provides support of icon libraries (Material Design icons, Ant Design icons, Awesome Font icons, etc.). These libraries provide multiple icons themes and styles, with a lot of icons (more than thousands) and with multiple sizes and colorization for each one. This project has the objective of easily offering management of icons and provides a simple way to use them. The other objective is to provide a cache mechanism to get and cash only required Icons and not load every one of them every time.

Currently supported libraries :

• Material Design Icons 4.0.0 - https://github.com/google/material-design-icons
• Ant Design Icons - https://github.com/ant-design/ant-design-icons

This project embeds a SmockIconsLibrary used by us to store our project icons, if you have your own icons you can implement your own library class.

This project can be used to easily generate some icon sets for your project (see export/serialize section).

This project wraps ThemeIcons to provide common icon libraries. Each asked icon is on-the-fly downloaded from library files and cached into the system to have instant access.

Getting Started

Installation

To install Iconography on your Pharo image you can just execute the following script:

Metacellonewbaseline:'OpenSmockIconography';
repository:'github://OpenSmock/Iconography:main';
load.

How to use

Each library provides sets of icons in different styles, sizes, formats and customization capacities. Default returned style depends of the target library, see documentation about each library below. The name of each icon depends of the target library, see each link below to explore the library catalogue.

Get an icon as a Form (raster image)

To get an icon with the default style (from Object method) :

"Material Design icon"
form :=selfmaterialIconNamed:#check_circle.
"Ant Design icon"
form :=selfantIconNamed:#checkCircle.

To get an icon with a specific style :

"Material Design icon"
form :=selfmaterialSharpIconNamed:#check_circle.
"Ant Design icon"
form :=selfantOutlinedIconNamed:#checkCircle.

Export / Serialize icons

To serialize icons into your project classes :

iconDescription :=AntDesignIconsLibrarynewname:#checkCircle.
iconDescription serializeAsForm:MyProjectClassmaxWidth:32maxHeight:32.

The icon is stored in MyProjectClass as a class method, the name of the generated method is returned by SmockAbstractIconsLibrary>>serializeAsForm:maxWidth:maxHeight:.

Material Design Icons library

Explore available icons here : https://fonts.google.com/icons?icon.set=Material+Icons

Download icons package here : https://github.com/google/material-design-icons/releases/tag/4.0.0

Unzip the archive in your computer :

Set up the directory with the unzipped directory with the dedicated settings section :

There are three different ways to get an icon :

"from object method"selfmaterialIconNamed:#check.
"from class access method"MaterialDesignIconsLibraryname:#check.
"from direct class version access method, in case of multiple supported versions, here this is 4th version of the library"MaterialDesignIcons4Libraryname:#check.

Choose a style

Material Design 4 provides 5 icon styles : Filled (by default), Outlined, Rounded, Sharp and TwoTone.

These styles are enumerated in MaterialDesignIconsStyle.

To use it :

"3 ways to get a Form from Object method for each style"
form :=selfmaterialFilledIconNamed:#check_circle. "returned by default"
form :=selfmaterialIconNamed:#check_circlestyle:#filled. "returned by default"
form :=selfmaterialIconNamed:#check_circlestyle:MaterialDesignIconsStyle filled. "returned by default"
form :=selfmaterialOutlinedIconNamed:#check_circle.
form :=selfmaterialIconNamed:#check_circlestyle:#outlined.
form :=selfmaterialIconNamed:#check_circlestyle:MaterialDesignIconsStyle outlined.
form :=selfmaterialRoundedIconNamed:#check_circle.
form :=selfmaterialIconNamed:#check_circlestyle:#rounded.
form :=selfmaterialIconNamed:#check_circlestyle:MaterialDesignIconsStyle rounded.
form :=selfmaterialSharpIconNamed:#check_circle.
form :=selfmaterialIconNamed:#check_circlestyle:#sharp.
form :=selfmaterialIconNamed:#check_circlestyle:MaterialDesignIconsStyle sharp.
form :=selfmaterialTwoToneIconNamed:#check_circle.
form :=selfmaterialIconNamed:#check_circlestyle:#twoTone.
form :=selfmaterialIconNamed:#check_circlestyle:MaterialDesignIconsStyle twoTone.

Ant Design Icons library

Explore available icons here : https://ant.design/components/icon

Download the code of the official github project as a ZIP (it contains the icons package) here : https://github.com/ant-design/ant-design-icons

Unzip the archive on your computer.

Set up the directory with the unzipped directory with the dedicated settings section.

There are three different ways to get an icon :

"from object method"selfantIconNamed:#checkCircle.
"from class access method"AntDesignIconsLibraryname:#checkCircle.

Choose a style

Ant Design provides 3 icon styles : Filled (by default), Outlined and TwoTone.

These styles are enumerated in AntDesignIconsStyle.

To use it :

"3 ways to get a Form from Object method for each style"
form :=selfantFilledIconNamed:#checkCircle. "returned by default"
form :=selfantIconNamed:#checkCirclestyle:#filled. "returned by default"
form :=selfantIconNamed:#checkCirclestyle:AntDesignIconsStyle filled. "returned by default"
form :=selfantOutlinedIconNamed:#checkCircle. "returned by default"
form :=selfantIconNamed:#checkCirclestyle:#outlined. "returned by default"
form :=selfantIconNamed:#checkCirclestyle:AntDesignIconsStyle outlined.
form :=selfantTwoToneIconNamed:#checkCircle. "returned by default"
form :=selfantIconNamed:#checkCirclestyle:#twoTone. "returned by default"
form :=selfantIconNamed:#checkCirclestyle:AntDesignIconsStyle twoTone.

Dependencies

• Athens-SVG

License

This project is licensed under the MIT License - see the LICENSE file for details.