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 (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. You can scale it to your liking while constraining proportions, or you can use the scaling actions (after loading the Infusion Icons Actions):


    These scaling actions are located in ownCloud IDRC-Design > Inclusive Resources and Tools > Design Templates > Infusion Icons Actions.aia.


  5. 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. Create a new folder and name it whatever you would like.

  2. Navigate to that folder in Terminal, and install npm. (Notes on how to install for Mac: http://blog.teamtreehouse.com/install-node-js-npm-mac or Windows: http://blog.teamtreehouse.com/install-node-js-npm-windows or Linux: https://nodejs.org/en/download/package-manager/)

  3. Then install grunt-webfont from https://github.com/sapegin/grunt-webfont. Install the node engine version without fontforge:
    npm install grunt-webfont --save-dev

  4. 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', // Your local path where the svg files are located.
                    dest: 'src/fonts/', // Destination path for the font files.
                    destCss: 'src/css/',
                    options: {
                    	engine: 'node', // To use the node engine.
                        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']);
    
    };
  5. Run "grunt".

  6. In the folder you created, the following tree structure will appear:



  7. In src > fonts, you will find your icon font file. In icons you will find your .svg icons. The assets folder will contain an icons.html file that will preview the icon font.

Part 3: Adding SVGs to Github repository

  1. The Github repository for the icons is located here: https://github.com/fluid-project/infusion-icons/

  2. Clone or fork the repository and add your icons. You may then submit a Pull Request to get them integrated into the current icons.


  • No labels