WordPress Meet Icomoon, Best Friends At Last!

So if anyone has been following along with some of my development work, one of my more successful plugins has been WP SVG Icons. At the time of this writing it has 6,962 downloads and 11 five star reviews, in 6 months.

What WP SVG Icons does, is install a little over 500 icons onto your WordPress site. They come in the form of .svg (scaleable vector graphics) meaning they can be increased or decreased to any size with out any degradation in quality. They’re great for responsive sites or web applications that will mainly be used on tablets and phones.

The Problem

One of the most requested features I kept receiving from the users was the ability to use icons they had created (weather it be in Illustrator or another program). My response each time was that if they wanted the icons included into the plugin, I would most likely need to perform the task for them, and it would take me some time so in return I would need a little remuneration. I didn’t like this approach at all. Yes, I was getting small freelance jobs here and there, but It was eating up a lot of my time and I was charging people to use a free plugin which I absolutely hated doing. So the gears began to turn, and for a few weeks I contemplated how I could develop something that would allow users to import their own icons and use them within the plugin. This would allow for a wider range of use of the plugin, and would most likely reach a much larger audience.

The Resolution?

Icomoon Web Application

The gears began turning, and I did some research before undertaking the task. I knew of an extremely useful web application over at www.Icomoon.io that I utilized in the initial release of my plugin. A breif background on Icomoon – Keymoon, the web-master over at Icomoon, maintains thousands of icons, in both .png and .svg formats free for both commercial and personal use under multiple free-use licenses. He also offers premium icon packs with higher quality and a wider selection than the free variants. You can select any number of icons in a mix and math format, and download a personalized .zip of either .png’s of the icons .svg files of the icons or even a web-font pack of your icon selection.

One of the reasons I love developing new plugins and taking on more challenging tasks is that you always learn new things about yourself as a developer, and as the language you are developing in. It’s a win-win.

This is such a huge help when it comes to developing sites, graphic layouts for print, web applications, mobile applications or anything that uses icons. You can download icons and open them in Illustrator, re-edit them and use them as you please. Or you can just download them and use them right away. The free library contains nearly 5,000 icons designed by multiple designers ranging from web hosting hub to smaller designers such as PJ Onri.

What makes the Icomoon web application so powerful is its ability to re-import old icon selections (from an included .json file) back into the application, add or remove icons, and then re-download the same package without altering the original icons. Its such a powerful tool for swapping in and out icons, I can’t emphasize enough. You can name your custom icon build, and even add meta-deta to your icon-pack with things like the designer name, designer url and other attribution fields.

WordPress meet Icomoon

Knowing all of this about such a powerful and free tool, I absolutely knew this was the route I wanted to take. Immediately I began conceiving ways of being able to select any number and combination of icons from Icomoon, naming it whatever you please and downloading the pack for use in the plugin. This would be so awesome, and helpful to potentially hundreds of thousands of people, but I just didn’t know how it could be done. Some of the more huge issues that I would face was the file structure of the .zip package downloaded from Icomoon, uploading, unzipping and referencing the necessary files from a safe location, altering, including and styling the provided Icomoon HTML and CSS files without any user intervention, and removing the unnecessary files that would bloat the file system.

Fortunately, I was able to develop a method where users can do just that, with minimal interaction. Once the user has installed the latest version of WP SVG Icons, you’ll see I included a new page for custom icon pack integration. All users have to do is go over to the Icomoon App, select ‘Import Icons From Library…’ and choose whichever pack (or packs) they like. Once the icon packs are loaded in the library, start selecting any number of individual icons that you need/want for your WordPress site. Select ‘Font’ at the bottom of the browser window, click ‘Preferences’ at the top to give your icon pack a name (and custom pre-fix if you choose), and then click ‘Download’. Once you have the .zip file on your local machine, just upload that .zip file through the new Custom Pack Upload screen in the plugin and you’ll be able to start using your new icons in a matter of seconds. All of the necessary files are loaded on both the front and backend of the site and on the appropriate pages. Fonts will work anywhere on your site. In themes, on the dashboard, in templates, and in posts and pages.

How Did You Do It?

Well, it took a lot of research and let me say I learned a ton of new things, both about PHP and WordPress core. One of the reasons I love developing new plugins and taking on more challenging tasks is that you always learn new things about yourself as a developer, and as the language you are developing in. It’s a win-win.t’s a win-win.

One of the new WordPress functions I got to work with and learn a bit about was unzip_file(). Their really wasn’t too much documented in the Codex about this function when I started this task. But by the time I was finished, I had actually contributed a bit into the codex so that when others need help using the function, a working example is there for them.

Another fun function I got to work with was wp_handle_upload(). Luckily, there was a good amount of documentation in the codex on this function so I was able to learn about and implement this function without much hiccup.

Finally, another huge help to the entire plugin was the ability to change the upload directory only when uploading files from the new custom pack importer page. This was done through a custom function that sets the upload directory when on the custom pack importer page only. Emphasis on the only, because I didn’t want to change the entire upload directory and affect where the entire site was uploading files too.

This was the exact function that I wrote to carry out the task:

And then later down in the plugin I wrote a separate function that gets the current page basename, and if it matches the plugin page basename it add’s our set_upload_dir filter:

Finally, one of the most important functions in the plugin is the ability to conditionally load the necessary CSS HTML and JS files for the new custom pack. This was done inside of a custom function that uses the file_exists() PHP function to check if the custom pack file resides in the upload directory. If the files do exits, the plugin continues on with enqueueing the necessary files. Very simple, but quite crucial to the success of loading in custom Icomoon icon packs. Unfortunately my function contains a lot of predefined varialbes so I’m going to show you the altered function:

By combining a few powerful PHP functions I was able to successfully get a customized Icomoon icon pack imported to the plugin, loaded via ajax and useable in a matter of minutes. Check out the quick demonstrating how easy it is to upload a customized icon pack to the plugin, uninstall the pack and upload a new pack.

What About Icons I’ve Designed?

I’m glad you asked, because with Icomoon you can upload .svg files right into the web application they provide. After you’ve designed your icons within Illustrator (or another program that allows you to export .svg files), save out the icon in .svg format and go over to the Icomoon web application. Click ‘Import’ on the top left of the browser window and upload your .svg files. You’ll see your icons on the site in a matter of seconds. You can then manually select your icons one at a time, and carry out with the download as you would any other way. Its extremely simple and so awesome. Uploading icons you’ve designed and using them on your site give your site a new layer of customization and personalization that’s hard to come by without writing any code.

I designed this plugin to be extremely easy to use for the end user and didn’t want them to have to touch any code at all. I also did so for free, to better the WordPress community and Web as a whole. I want to bring advanced functionality to the end user in the most simple fashion possible. In that respect, How would you say I did? Let me know in the comments below, and if you love the plugin as much as I do, why not go over and leave me a nice rating and review in the repository :)?
WP SVG Icons.

Get It Now!

Download Nowfor free   Fork Meon GitHub

About the Author

Evan Herman

Evan is a full time WordPress developer at Yikes Inc. where he makes all sorts of cool things with WordPress. When he's not there you can find him developing awesome plugins, blogging about WordPress or hanging out with his three cats and amazing girlfriend in Philadelphia, PA.

  • BJ

    Hi Evan,

    I really like the plugin. I have a little issue though. Some of the icons I purchased from The Noun Project work fine when uploading them to Iconmoon, but some don’t and have ended up being a waste of money with regard to your plugin.

    I know your plugin is not at fault, but how can I make sure an svg file is iconmoon compatible?

    Thanks,
    BJ

    • Hey BJ,

      I’m glad your finding some great use for the plugin. What format is the file when you download it from the noun project? I haven’t had the opportunity to use any off of their site. If they’re in .SVG format, and your unable to import them directly into IcoMoon, I would try importing them into Illustrator, or another program that allows you to export SVG files. Try and re-export the icon from the program, and then try and re-import it back into IcoMoon.

      What type of issues are you having when importing them into IcoMoon? Are you getting an error, or is the icon just not appearing? If you’d like, you can send me one of the icons you’ve purchased over there and I can take a look and maybe figure out what’s going on. If you want you can email me at Evan.M.Herman@nullGmail.com and we can take a look.

      Thanks!

  • Evan,
    Thanks for taking the time to build this for the community. I think it’s great and definetely helps personalize a site. Much appreciated.

    Thanks!

    • No problem at all Bernard! So glad it’s helping you out and you’re finding it very useful!

      All the best,
      Evan

  • Virgilio Calderon

    Hi Evan!

    Thanks for your time, i want to ask about wordpress cache, because sometimes icomoon plugin shows the svg icons and somentimes no, and i don´t know why, could you please help me with that? this is the website and the icon must be on left top under logo

    • Hi Vrigillio,

      Are you using a caching plugin? By default, WordPress as no cache built in, which leads me to believe you’re using some sort of third party.

      If that’s the case, I would recommend excluding the svg-icon-plugin from the plugins cache settings, so none of the web font files get stored in browser cache. The files are rather small, so you shouldn’t see any noticeable increase in page load times.