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
Top comments (13)
This is good one. But I think it will slow down the performance of website if we are adding CDNs for every icon we use. Better approach would be to have them in Local System and then use it, if I am not wrong.
However the trick is damn cool, will try it for sure 😍.
Thanks a lot.. ❤
We are not actually adding any CDNs. When we select the icon, its corresponding svg snippet is added to the code. (user need not have to import any icon libraries or add any CDN links).
If it is so, then its really great, but I wonder that url - w3.org, will it impact the performance of website when deployed in production, I mean loading time and all stuffs ??
This is the namespace, which is required for all svgs afaik
I have created a site icon2image.com where Bootstrap icons, Font Awesome free icons, Material icons can be resized with changing of background and icon color, Rotate and convert into image and download in png, jpg, svg, webp and base64 format for free.
ohh really a great productivity booster. No need to include those libraries.
This is handy, especially for placeholders where you just want something there quickly. Nice stuff.
Nice. I like it. Congratss
Thanks a lot.. ❤ @juanma1331
Amazing work @bodhisha ✨💯✨, It's really helpful, (icons in SocioMark 😁)
Awesome, thank you!
Awesome 👍
Thanks a lot.. ❤