SVGL For PowerToys

This PowerToys Run plugin enables quick searching and copying of SVG icons, powered by SVGL.

Features

• Browse and search SVG logos
• Choose from multiple different variant i.e. Light, Dark or Themed Wordmark
• Copy SVG to clipboard

Installation

1. Download the latest release of the SVGL Plugin from the Release page.
2. Extract the zip folder to your PowerToys Plugin modules directory. Usually:

%LOCALAPPDATA%\Microsoft\PowerToys\PowerToys Run\Plugins

3. Restart PowerToys

Usage

1. Open PowerToys Run using the default shortcut Alt + Space.
2. Type svgl to initialize the plugin. (If it's your first time, wait a moment for initialization.)
3. Search for a company's logo by typing its name.
4. Select your preferred logo—if multiple variants are available, you'll see relevant options in the context menu.

• Hover or focus on a context menu item to view its keyboard shortcut & action.
• (For a full list of available commands, click here.)

5. Press Enter to copy the SVG icon and paste it wherever you need—whether in Figma, Adobe Illustrator, or directly in your code! ✨

License

This project is licensed under the MIT License

Acknowledgements

1. The original SVGL project by Pablo Hdez for making this possible.
2. [Corey] for providing guidance on building a PowerToys plugin and sharing valuable resources.
3. Henrik Lau Erikson for writing an insightful blog on Creating Custom PowerToys Run Plugin and for developing a highly useful Dependency Referencing NuGet Package for PowerToys Run plugin development.
4. The SVGL Raycast Extension by Yiewi Ho, featured in a YouTube video by Theo, which inspired me and gave me the confidence to build something similar for Windows i.e. PowerToys.

Roadmap

Version 1.0.0 ✅

1. Search Enhancements

   • Debounce API calls to optimize search performance.
   • Improve search ranking: prioritize exact matches, titles starting with the query, and titles containing the query.
   • Cache search results for faster responses.

2. Context Menu Improvements

   • Fix broken icons in search results.
   • Show relevant options for "Request Logo" and "Submit a Logo."
   • Add options for copying Wordmark icons (both themes, if available).
   • Separate context menu options for copying light/dark theme SVGs.
   • Dynamically display theme-based context menu options based on SVG availability.
   • Add context menu actions for SVGL results (Copy SVG Logo, Copy Wordmark Logo).

3. Functionality Enhancements

   • Add a "Copy SVG Code" function.
   • Implement caching for default results.
   • Add a command to manually reload/re-validate cache without restarting PowerToys.
   • Automatically detect internet reconnection and refresh API results instead of showing cached No Internet data.

4. Codebase & Testing

   • Restructure the codebase into two projects: Main Plugin & Unit Tests.
   • Refactor code (separate types, API functions, etc.).
   • Handle exceptions, particularly when fetching SVGs (e.g., tRPC dark-themed Wordmark SVG errors).
   • Write unit tests to ensure reliability.

Future Improvements 🛠️

• Enhanced Functionality

  • Add support for copying SVGs as React components.
  • Implement fuzzy search for better result matching.
  • Allow customization of all context menu keyword shortcuts via settings.

• Code Quality & Performance

  • Refactor Types.cs for better structure and maintainability.
  • Improve overall code quality, resolve build warnings, and enable TreatWarningsAsErrors in csproj.

PowerToys Run Limitations & Workarounds ⚡

• Performance Optimizations

  • Implement caching for SVG code to speed up retrieval.
  • Introduce file-based caching with time-based re-validation for improved efficiency.

• UI/UX Enhancements

  • Improve context menu icons for better clarity.
  • Display actual SVGs as previews in search results.
  • Show a loading state when fetching results for the first time.