open-sourced-olaf / get-svg-icons

A VS code extension for inline replacement of icons to svg

Get Svg Icons

View icons from bootstrap's icon library and insert them into your code through snippets.

Installation

• Go to VS Marketplace https://marketplace.visualstudio.com/items?itemName=marcochan.get-svg-icons to install the extension

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

Built with:

• Typescript
• VS Code API
• Python for web-scraping

Extension Settings

To customize languages we support for inline snippet completion, icon-color and icon-size for hover preview

• Navigate to extension settings
• Choose Extension Settings
• From here, you can customize getSvgIcons.iconColor, getSvgIcons.iconSize and getSvgIcons.selector

Icon source

• Bootstrap Icons

Prefixes

Prefix	SVG Icons	Version
icon-	Bootstrap Icons	1.0

Contributors

• Bodhisha Thomas
• Marco Chan
• Rashi Sharma
• Steven Tey
• Sumi Kolli

How to run locally?

• Clone the repository

  git clone https://github.com/Open-Sourced-Olaf/Get-svg-icons.git

• Install node dependencies with npm install

• Open project with VS Code

• Press F5 or run Launch Extension in the debug window or run npm run compile

How to contribute?

Take a look at the contribution guidelines and open a new issue or pull request on GitHub.

Release Notes

1.0.0

Initial release of the extension

---

get-svg-icons's Issues

Hover icon preview

Hover over an SVG to preview the icon

Add "favorite icons" functionality

In the sidebar list of icons, add a functionality to mark favorite icons and add a "Show favorite" button in the sidebar from where all those icons can be accessed.

Publish extension

Publish extension MVP

Integrate MeiliSearch

Integrate super fast and efficient MeiliSearch into our icon search feature.

Add more icon libraries

Currently, we are using bootstrap icon library to get icons for this extension. It will be great if we can incorporate some more icon libraries.

JSON file Creation

Create a JSON file of all the key-value pairs of icon_names & their corresponding svg

Update VS Marketplace documentation

In the VS Marketplace documentation, the demo gif's do not load. It will be great if that can be fixed.

Add color picker in sidebar

Currently, we have height and width customization options available. It will be great to have a color picker as well to change the color of icons from the sidebar itself.

Display icons in the dropdown

Displaying the icons along with icon_name in the dropdown menu so that users can select the required icon

Testing

Unit testing our extension

Use icon font

Hello there and thank you for this great extension!
Do you plan to implement autocompletion for the "icon font" mode that's provided by Bootstrap Icons? This would keep markup code to a minimum.
https://icons.getbootstrap.com/#icon-font

Thanks in advance!

Snippets and hover preview

Typing '!prefix' generates an SVG snippet of the icon. Also implement hover to preview icon.

Proper Documentation

Update sidebar with additional field to specify SVG dimensions

Add optional width/height field to specify SVG dimensions.