JET Icons and Your Custom SVGs

Combine your icons with Oracle Javascript Extension Toolkit's font file for optimization.

Preamble

I like Summer Camps. I especially like Oracle Summer Camps where experts of the new tech come together and share ideas and tips.

Speaking to Geertjan Wielenga on one lunch break, he pointed me to a useful technique which one of his course attendees was pursuing: injecting SVGs into a font file (namely a .woff file).

As I love optimisation, almost to the point where its bad for me, I decided to take this on a little further.

I currently have a website that is on a bare-bones infrastructure. I mean that literally. So gaining optimisation through reducing requests to my server got my juices flowing.

I had some SVGs being loaded in as images in the HTML which caused numerous requests to be created; the more icons you have on a page the chattier the application gets.

But what if you could put those images into a .woff file to serve as one file (and one request)? Even better, what if you could hook into JETs predefined .woff file and serve the images from there…

Finding JETs .woff Font File

Within your JET application you might have noticed you have a folder called themes in your root. There might also be a themes folder within src but ignore that for the moment.

To my knowledge, the /themes is a staging area for the build. This gets copied into the /web directory upon build.

So, within /themes we have a named theme directory. By default you get given alta. This is where the css lives. You have a directory called fonts here too. This is where the JET default .woff file lives

CSS File: /themes/alta/web/alta.css

Font File: /themes/alta/web/fonts/JetFW_iconfont.woff

The theme css file loads in the .woff file which means we can potentially create a new one in its place. However, we have to be careful because we do not want to knock out the arrows and other small icons JET has by default.

Building a New Font with IcoMoon

Now we know where the themes font is, we can use a neat little app within IcoMoon to start cherry picking which icons we want within our new font.

Whats really good about IcoMoon.io is that you can upload fonts too. Unforuntately you can only upload SVG fonts, not .woff.

So for the purpose of Oracle JET 3.2 I have manually saved JETs .woff file and exported it using FontForge as an SVG to help you.

Here is the JET .woff as an SVG file: https://nofile.io/f/Cob2g3Rw16E/JetFW_iconfont.svg

Now simply head over to IcoMoon and start choosing your custom font.

Using IcoMoon

You will get greeted to a screen similar to:

First things first, click “Import Icons” at the top (purple button) to upload the JET font file I provided above and choose everything from it

Say ‘Yes’ to this so we keep the same content slots…so nothing breaks!

Select all the JET icons

Now its up to you to add your own SVG files in the same way or to choose some from IcoMoons library by clicking the “books” icon next to Import Icons. Amazingly Font Awesome is included here!

Once you’re finished, click “Generate Font” to get a zip file containing your .woff, .svg file and CSS on how to use it.

For this tutorial, we will just use the .woff.

Installing Your New Font

1. Go to your /themes/alta/web/fonts directory and move the downloaded icomoon.woff file into it
2. Edit the alta.css and alta.min.css (or your custom theme if you have one) to replace fonts/JetFW_iconfont.woff with fonts/icomoon.woff
3. Build and Test

You should see icomoon.woff being downloaded in your Network tab of your browser with Developer Tools.

Using Your New Font

This is where style.css comes in handy within your zip.

I was actually pulling Font Awesome icons out in place of icons in my new font. So for example where I had this:

<div class=”fa my-fa-icon”/>

I could replace this with:

<div class=”my-icomoon-icon”/>

and within the CSS I copied the correct class across from style.css into the override.css:

.my-icomoon-icon:before {
   content: “\e900”;
}

If you get lost with this then my tips are:

1. Always use the :before prefix

2. Make sure the font family is correct. If you’ve followed the changes exactly to alta.css then use the following to set the font family in override.css:

font-family: ‘Alta Icon Font’;

3. Use FontForge if you’re struggling with what icon is what number.

Takeaways

You can dramatically reduce the number of requests by serving 1 single .woff file. Change the themes css and min.css accordinly to point to a new font file.

Transmit 1 file for 1…10….100 images!

— Jason Scarfe :: Griffiths Waite