Get-svg-icons : VS Code Extension

If you are a frontend developer, it's obvious about the time and thoughts you take to fix on a perfect icon for your website. You have to navigate to websites like Flaticon, Font Awesome, Material Icons etc., find suitable icons, download the SVG or copy the font and finally need to include the corresponding libraries to your code base. Reducing this hassle and the bundle size associated with importing external packages was the main inspiration behind this VS Code extension.

With Get-Svg-Icons extension, you no longer have to navigate to other websites to choose your icon, everything comes handy on VS code itself. A side panel with customizable icons and the inline icon suggestions on vscode editor makes the process easy and thus increase productivity of developers.

Features

Side Panel with customizable icons

Side Panel with around 1300+ icons

Users can search for the icon-name (or tags associated with it) and choose the desired icon

On clicking on the icon, corresponding svg code will be inserted at the last active position on the code editor

Users can change the height and width of the svg directly from the side panel

Inline Icon suggestions

Type "icon-" (without quotes) to start auto-completing icons. If the icon preview is not showing up (as shown in the GIF below), press Ctrl+Space (default hotkey) or press the ">" icon to expand the details view.

An inline replacement of the selected icon with its svg will be done.

Icon preview on hover

On hovering over the svg code (class name) , you can preview the icon of the corresponding svg snippet

Get the extension here
Want to contribute? Head over to the Github Repository