I’m working on the All Icons plugin, a library of popular icon sets. It has a dedicated post at Penpot Community.
However, here I would like to share some development details that might help you with your plugins.
- All Icons is FOSS, uses Vite, React, and TypeScript, and you can find the code at GitHub.
- If you are hosting a plugin’s code on GitHub (or GitLab) and it’s a static app, Pages is a good place to host the plugin itself. Pages hosting integrates well with the platform’s CI/CD system (you can see the Actions’ workflows in the code), has a great infrastructure, and you can set up a custom domain.
- If you are using Vite for development, you might encounter an issue with the dev server not being able to serve a standalone script (eg plugin.js) and an app simultaneously. For a partial workaround (at least until Vite 6), I wrote a Node server script for All Icons. It runs in front of the plugin script’s production build in watch mode and the app’s dev server, serving the plugin file and routing traffic accordingly. This means everything is available under a single port, and the app has all the development tools like source maps and HMR. The solution includes two dev config files and the server script, so it’s best to take a look at the “dev” npm script and go from there.
