Adding Support for your Favorite Library in Glyphfriend

With Glyphfriend 2.0 being released, one of the points of emphasis for the re-write was to allow members of the community to more easily add support for their favorite glyph families. This comes in addition to all of the other great benefits like performance and flexibility, but this post in particular will talk about how you can add your own icons to it.

The Previous Approach

Previously accomplishing this could be a pain and required the following things to occur:

• Creating a specific Provider class to handle listening for all autocompletion events to check if they matched a given library (via a regular expression).
• A set of 16x16 optimized and transparent .png files representing all of the glyphs in your library (and properly named including the prefix, i.e., fa-beer, glyphicon-party, etc.).
• Ensuring that all of the glyphs were included in the project and had the IncludeinVSIX property set to true.

An example of one of these looked like the following:

[Export(typeof(ICssCompletionEntryGlyphProvider))]
[Name("Glyphfriend Font Awesome")]
internal class FontAwesomeGlyphCompletionProvider : BaseGlyphfriendProvider  
{
        public FontAwesomeGlyphCompletionProvider()
        {
            Library = "FontAwesome";
            GlyphCssDefinitionExpression = new Regex(@"^font(-?)awesome(-.*)?(\.min)?\.css$", 
                                           RegexOptions.IgnoreCase | RegexOptions.Compiled);
            DefaultIconClass = "fa-default";
        }
}

Again - not super hard, but the process wasn't as inviting or as easy as I would have liked it to be.

The Newer, Better Way

I wanted this process to be dead simple and as flexible as possible, as there are countless libraries out there that folks use, and although this project tries to support the most popular, it can sometimes fall short.

In the new version, you can take all of those steps (save one) and throw them out of the window. All you now need to add support for your library are the images themselves. Or as previously mentioned as a bullet point, this:

• A set of 16x16 optimized and transparent .png files representing all of the glyphs in your library (and properly named including the prefix, i.e., fa-beer, glyphicon-party, etc.).

Gathering your images can sometimes be a pain, depending on how their creator chooses to distribute them. You can occasionally find .png images in the appropriate size and be good to go, but other times, you may have to either resize them to 16x16 pixels, or use a tool like InkscapeBatch to handle running a series of .svg images through a batch conversion to the appropriate type.

Once you have your images, simply add a folder under the Glyphs directory of the Glyphfriend.Packager project seen below:

After a quick build, the packager will add it to the dictionary, serialize it up, and include it in the extension. So if you install it, or are running it locally, you should see your new icon appear:

It's All Up to You!

Glyphfriend is completely open-source, and I gladly accept any suggestions and pull requests (obviously after review). If you have an idea for a library that isn't currently supported, and it's popular enough, let me know and we can talk about adding it in.

Or if you have a more specific use-case, perhaps your own private set of icons that your company uses that you don't want anyone else to have, that's fine too. Simply create your own build of Glyphfriend, distribute it out to your team, and do your thing. :)

CodeProject