Introduction
For showing icons in my HTML, I am a big fan of using SVG icons sprites (instead of resorting to icon-fonts and its many drawbacks).
The problem is that you normally have to download each SVG icon manually to write down your SVG sprite. Or use some third party tool to automate this process, like Iconmoon.
What if you could easily pick icons from famous packs like FontAwesome, Material Design, and be able to easily use them through an automatically generated SVG sprite file?
IconDrop is an open-source desktop app that automates the whole process with a very intuitive interface:
Side note: IconDrop is also a handy tool for designers because it allows you to drag-n-drop SVG icons to your favorite design tool like Photoshop, Illustrator, Adobe XD or Sketch. That's why the name: IconDrop.
It works for Windows and OSX.
The HTML + SVG Sprite Approach Process Explained
Essentially you have a big .svg file with all your icons, each with an unique ID: (this is the SVG sprite code)
<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="account-alert" viewBox="2 4 20 16">
<path d="M 10,4C 12.2091,4 14,5.79086 14,8C 14,10.2091 12.2091,12 10,
12C 7.79086,12 6,10.2091 6,8C 6,5.79086 7.79086,4 10,4 Z M 10,14C 14.4183,
14 18,15.7909 18,18L 18,20L 2,20L 2,18C 2,15.7909 5.58172,14 10,14 Z M 20,
12L 20,7L 22,7L 22,12L 20,12 Z M 20,16L 20,14L 22,14L 22,16L 20,16 Z "></path>
</symbol>
<symbol id="account-alert" viewBox="2 4 20 16">
<path ... ></path>
</symbol>
...
</defs>
</svg>
Then, somehow you print this SVG just after your <body> tag. For example, in PHP:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
svg { width: 100px; height: 100px; }
</style>
</head>
<body>
<?php echo file_get_contents('icon-sprites.json'); ?>
...
Then, when you want to show the icon in the page, you write down a <use> tag referencing an icon from the sprite by its ID:
...
<!--
<svg class="icon icon-account-alert"><use xlink:href="#account-alert"></use></svg>
</body>
</html>
See Codepen result.
The whole point of IconDrop is how it can help you automate this process. Let's see how.
1. Create Your SVG Sprite Project and Activate It
In IconDrop, for each website you are creating, you create a separate sprite project, where you should specify where the generated .svg file will be saved.
In the Home screen, click 'Add new', and you will be asked the project name and directory where the auto-generated icon-sprites.svg file will be saved:
Then you need to activate the project for adding icons to it:
2. Searching and Adding Icons
IconDrop comes bundled with a HUGE catalog of icons. Each icon has many associated tags for a good search result:
To add the icon to the active project, just click the ⊕ button.
3. <use> the Icon in Your HTML
Select the icon you want to show in your HTML and click Copy SVG <use> code button:
And then paste this HTML where you want this icon to appear.
<svg class="icon icon-cart"><use xlink:href="#cart"></use></svg>
Summary
To picture the workflow of IconDrop usage, an image is worth a thousand words:
Download / Source-Code
So, here, I showed you how to use IconDrop as Frontend developer perspective.
IconDrop is also a tool aimed for designers. If you play both roles, IconDrop comes in very handy.
For downloading IconDrop and seeing some explanatory videos: http://icondrop.io/.
Source-code is available at https://github.com/ramon-mendes/IconDrop.
History
- 03/02/2019 - Article submission
Ramon has a bachelor in Information Systems at University of Caxias do Sul. He started his career in the creative area, working with web design, and then evolved to work with a more hardcore area of control systems engineering while making C#/.NET systems to automate every kind of process. This was when he discovered his passion for the low-level world, working with C, C++ and D development.
Check my things at http://misoftware.com.br/
Submit an article or tip
