Skip to end of metadata
Go to start of metadata

In the interests of being able to create and update icon fonts used in UIO (and other systems), a more streamlined workflow is required to ensure the icons are kept uniform and consistent.

Overview of Steps

Part 1: Working with Adobe Illustrator (CS6 or CC and above)

  1. Creating a new artboard in the master .ai file that houses all the current icon fonts in use.
  2. Using actions in Adobe Illustrator to scale the image to 64 by 64 pixels.
  3. Aligning the image to its artboard.
  4. Exporting to (all or selected) images to SVG.

Part 2: Running grunt to generate the icon font

Part 3: Adding SVGs to Github repository

Part 1: Working with Adobe Illustrator (CS6 or CC and above)

  1. Open the master file (located in ownCloud under "IDRC-Design > Inclusive Resources and Tools > Design Templates > Infusion-icons.ai) with the current icons. The list of artboards on the right are named descriptively.


  2. Create a new artboard by clicking on the Artboards menu and rename it meaningfully.


  3. A new artboard is created and automatically sized at 64 by 64 pixels.


  4. Import or paste your new icon into the artboard. If it does not fit the artboard, select the image and resize it by using the following actions (located in ownCloud IDRC-Design > Inclusive Resources and Tools > Design Templates > Infusion Icons Actions.aia) or scale it to your liking while constraining proportions:


  5. To position it in the centre of the artboard:


  6. Export the new image as an SVG under File > Export > Export As and make sure your Format is SVG and that "Use Artboards" is checked. You may also specify which of the artboards gets converted into SVGs by inputting the range. Since we created just one icon, we will save the newest artboard we created (35th). 

Part 2: Running grunt to generate the icon font

  1. Install grunt-webfont from https://github.com/sapegin/grunt-webfont. Install the node engine version without fontforge.
  2. Create a Gruntfile.js such as the following below:

    Gruntfile.js
    module.exports = function(grunt) {
     // Project configuration.
     grunt.initConfig({
     pkg: grunt.file.readJSON('package.json'),
    
            webfont: {
                icons: {
                    src: 'icons/*.svg',
                    dest: 'src/fonts/',
                    destCss: 'src/css/',
                    options: {
                    	engine: 'node',
                        fontHeight: 52, // Avoid encountering metric-related issues.
                        normalize: false,
                        ascent: 64, // Top height measured from the bottom of the glyph boundary.
                        descent: 0, // Bottom height measured from the bottom of the glyph boundary.
                        font: 'icons', // Name of the font.
                        destHtml: 'assets/',
                        templateOptions: {
                            classPrefix: 'icon-'
                        }
                    }
                }
            }
    });
    
    // Load the plugin that provides the “uglify” task.
    grunt.loadNpmTasks('grunt-webfont');
    
    // Default task(s).
    grunt.registerTask('default', ['webfont']);
    
    };
  3. Run "grunt".


Part 3: Adding SVGs to Github repository

  • No labels