Creating font icon package for ExtJs

As part of our recently launched Catalog theme for ExtJs, we wanted to incorporate custom font icons into our theme for consumption by our users. As you would know, ExtJs 6 ships with Font Awesome out of the box, which has a really nice collection of off-the-shelf font icons. Font icons give you the distinct advantage of scalable vector icons that you can very easily use for a variety of purposes, from responsive websites to your enterprise applications.

Anyways, coming back, we really wanted our icons to be a regular package in Ext parlance so its easy for a theme to add a dependency on it in its package.json file thereby enabling the fonts and the css to be automatically included in one or more themes when they are built for distribution by Sencha Cmd. So lets get started with the steps for creating a font package for ExtJs.

1. The first step as you can well imagine, would be to draw your icons in your favourite graphics editor. We here at Imbibe internally use Photoshop but you can practically use any vector graphics editor for the purpose. Take care to keep your icon drawings simple and clutter free so they look good when used from smallest to comparatively bigger font sizes.
2. The next step is to export your icons as a font file. There are various ways to do this, including using Fontastic, a free online site that makes it a breeze to convert your icon set to font files. You will need to export your icon drawings from your graphics editor as svg files that you can then import using Fontastic.
3. Moving on, assuming you now have the font files (in one or more formats, e.g. eot, svg, ttf, woff, woff2 etc) for your font drawings, the next step is to create a Sencha Cmd package for them. After some fiddling around with the font-awesome package that ships with ExtJs itself, we were able to trim down its content and structure to a bare minimum that can be built as package. You basically need to:
   • Have a resources directory which contains your font files (and can also include other assets if any that you want to ship with your package output)
   • A sass folder which houses sass rules for your fonts. The font-awesome package that ships with ExtJs contains a lot of rules around font awesome icons including animations, rotations, screen reader support, icon stacking etc, but you really do not need to specify all those rules if all you want is simple icon fonts to be used in ExtJs, e.g. as button icons, or in panel headers etc. We will cover the sass part in more detail below.
   • Finally come the packaging files used by Sencha Cmd to understand and build your package. You would atleast need a build.xml file and a package.json file to make Sencha Cmd understand your package.

To make it easier for you to follow through the post, we have created a skeleton font package for ExtJs that you can download from here.

Coming over to the sass part and discuss it in a bit more detail

• It starts with ~/sass/src/all.scss file from the referenced package, which includes other sass files from ~/sass/etc/ folder from the package.
• _variables.scss file from ~/sass/etc/ folder contains the basic variables that define the package:
  
  //# fashion warn -elevation // Variables // -------------------------- $my-font-path: "../fonts" !default; $my-font-size-base: 14px !default; $my-line-height-base: 1 !default; $my-css-prefix: my !default; $my-version: "1.0.0" !default; $my-border-color: #eee !default; $my-inverse: #fff !default; $my-li-width: (30em / 14) !default; $my-var-adjust: "\e000"; //# fashion warn +elevation

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

  //# fashion warn -elevation   // Variables // --------------------------   $my-font-path:        "../fonts" !default; $my-font-size-base:   14px !default; $my-line-height-base: 1 !default; $my-css-prefix:       my !default; $my-version:          "1.0.0" !default; $my-border-color:     #eee !default; $my-inverse:          #fff !default; $my-li-width:         (30em / 14) !default;   $my-var-adjust: "\e000";   //# fashion warn +elevation

  Here:

  1. $my-font-path defines the path of your fonts directive relative to _variables.scss file.
  2. $my-css-prefix defines the prefix for your font icons. Font Awesome uses fa, we have defined the same as my for our font package.
  3. $my-var-adjust defines variable for a single font icon, mapping it to its character in your font file.

  Other variables above are hopefully self explanatory. If you need to ask something, feel free to in comments below.

• The next important file is _core.scss which defines the basic characteristics of your font-icon as below (you can customise these as per your needs):
  // Base Class Definition // ------------------------- .#{$my-css-prefix} { display: inline-block; font: normal normal normal #{$my-font-size-base}/#{$my-line-height-base} font-myicons; // shortening font declaration font-size: inherit; // can't have font-size inherit on line above, so need to override text-rendering: auto; // optimizelegibility throws things off #1094 -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

  1 2 3 4 5 6 7 8 9 10 11 12

  // Base Class Definition // -------------------------   .#{$my-css-prefix} {   display: inline-block;   font: normal normal normal #{$my-font-size-base}/#{$my-line-height-base} font-myicons; // shortening font declaration   font-size: inherit; // can't have font-size inherit on line above, so need to override   text-rendering: auto; // optimizelegibility throws things off #1094   -webkit-font-smoothing: antialiased;   -moz-osx-font-smoothing: grayscale;   }

• Then we have _icons.scss file which defines the class of individual font icons, e.g.
  .#{$my-css-prefix}-adjust:before { @include ext-declare-my-var($my-var-adjust); }

  1	.#{$my-css-prefix}-adjust:before { @include ext-declare-my-var($my-var-adjust); }

  This combined with the icon entry in _variables.scss file defines a single font icon. To add more icons, you would need to add the variable declaration in _variables.scss and defines its css class in _icons.scss. We are trying to follow ExtJs’ convention in font-awesome package here, you can off-course choose another structure for defining your scss rules.

There are other files in ~/sass/etc/ folder defining more characteristics of your font icons, e.g. class when they are used in fixed width mode, their sizes etc. If you check the ~/sass/etc/ folder in font-awesome package, you would find more rules defined for things like borders, rotation etc. that you might not need for simpler use cases. Feel free to copy them over from font-awesome package or otherwise use fa as $my-css-prefix to inherit those properties from font-awesome package itself, which would mean your theme would need to define a dependendency on both your icon package as well as font-awesome package. If you are inheriting your ExtJs theme from theme-triton, or theme neptune as base themes, this should not be a problem as they have a dependency on font-awesome already.

Finally assuming you used my as $my-css-prefix, here’s how you would use your font icons in your ExtJs javascript code:

Replace icon in my-icon with the actual icon name.

That’s all there is to it. You can easily build your package using sencha package build command which would produce the .css files for consumption. Alternatively you can declare dependency on your font package in your theme’s package.json file as follows and have the icons built in to your theme automatically:

Hopefully you would find the process of creating icon font packages for ExtJs as interesting and easy as we did. Let us know your thoughts in comments below, and don’t forget to check out the Catalog theme for ExtJs which embodies and extends this and other awesome features of ExtJs theming bundled in a crisp and professional user interface. Contact Imbibe for help with your font icons, font package, customising or building an ExtJs theme etc.