💭 Inspiration
All front-end developers know the pain of finding perfect icons while building websites. You have to go to other sites like material-icons, font-awesome etc. and find suitable icons, download the SVG or copy the font or SVG snippet. Not to mention, you also need to include the libraries. Reducing this hassle and the bundle size associated with importing external packages was the main inspiration behind this VS Code extension.
With this extension, user can search for the icons in VS code itself and a simple click on the icon name will automatically insert the SVG snippet of the corresponding icon.
Feeling too lazy to go search for the icon? Don't worry, we have got you covered. Just type "icon-" (without quotes) appended with the icon name and you will get a list of all the relevant suggestions with icon previews, for eg, icon-alarm and you can see the preview of icons as well as get inline SVG snippet.
👩💻 What it does
Side Panel
- Side Panel with the search feature to browse through different icons. Icons can be searched by using their names or by tags resembling the icons
- Side Panel also provides with the option to adjust height and width of the SVG icons
- On clicking on any icon, the corresponding SVG snippet is added to the last active position of cursor on editor
Inline snippets
- User can type "icon-" appended with icon-name to show up a list of possible matches with their previews
- An inline replacement of the selected icon with its SVG will be done
Icon Preview on Hover
- On hovering over the class name in the SVG code , you can preview the icon of the corresponding SVG snippet
👻 How we built it
Typescript
Side panel and inline snippet part is implemented using typescript
Python Parser for scraping icons
Python parser is used to scrape the icons and convert the file to desired JSON format
Icon Library
For getting icons, we have used the opensource library, Bootstrap Icons https://github.com/twbs/icons
⌛ Challenges we ran into
- It was difficult to find enough resources for implementing the desired features in VS Code extension
- Typescript was completely new for all of us, so it was a bit difficult in the beginning to get the hang of it.
✨ Accomplishments that we're proud of
- Publishing our first VS Code extension to market place
- Learning and working with typescript
- Collaborating well despite being in different time-zones
- Sticking strictly to the planned timeline
🎉 What we learnt
From knowing zero about building VS Code extensions to actually publishing our extension to the marketplace, we learned a lot of stuff.
- Working with typescript and getting to know how cool it is!
- Learnt about different VS Code APIs
- Best GitHub Practices (Project boards, linking PR's with issues, branches, reviewing each others code)
🔜 What's next for Get SVG Icons
- Integrate GitHub Actions for Continuous Integration
- Add more Icon libraries to our project so that user could select icons from any library of their choice
- Making different customizations available for the user
- Integrate MeiliSearch to our project at a later point when the number of icons is considerably large
- Allow people to contribute and publish their icons
Built With
- azure
- python-parser
- typescript
- vscodeapi
- web-scraping
Log in or sign up for Devpost to join the conversation.