FLUID-6244: Implement a build process for construction icon fonts in the Infusion-Icons repo

Metadata

Source
FLUID-6244
Type
New Feature
Priority
Major
Status
Closed
Resolution
Fixed
Assignee
Justin Obara
Reporter
Justin Obara
Created
2018-02-01T15:53:25.531-0500
Updated
2018-04-27T07:33:47.332-0400
Versions
N/A
Fixed Versions
N/A
Component
  1. Infusion-Icons

Description

The Infusion-Icons repo contains all of the SVGs that having been prepared for use as icons based off of the Infusion Icons Visual Style Guide.

We've been having discussions about how to best convert these into font icons. The "Standard workflow in maintaining and creating icon fonts" wiki page describes a process for using grunt-webfont to generate the icon font. This process seems to work with the caveat that the node engine is not robust enough. We've done some investigation and the fontforge engine seems to produce good icons, however, fontforge is a separate install.

The initial plan was for a project to pull in Infusion-Icons via npm and run grunt-webfont locally to generate the projects specific icon font. However, the need to install fontforge separately makes this problematic.

Here's the suggestion for a new process:

  • In Infusion-Icons add a grunt task to generate an icon font that includes all of the icons
  • In Infusion-Icons add a grunt task for building a custom icon font based on a config file
    • The config file will be versioned in the project's repo (e.g. Infusion), and include the paths to the SVGs to use, and their codepoints
    • The config file would be able to contain any configuration that is valid for grunt-webfont task
  • After an icon font is generated, the implementor will need to manually place it in the specific project

Example config:

{
    src: [
        "svg/contrast.svg",
        "svg/reset-undo-arrow.svg",
        "svg/line-space-expanded.svg",
        "svg/line-space-condensed.svg",
        "svg/line-space.svg"
    ],
    options: {
        font: "custom-icons",
        codepoints: {
            "contrast": 0xE005,
            "reset-undo-arrow": 0xE008,
            "line-space-expanded": 0xE009,
            "line-space-condensed": 0xE00a,
            "line-space": 0xE00b
        }
    }
}

Comments