Phosphor Icons Vue v3 Port

13 Dec 2020 | 3 minute read

I recently had the opportunity to use the beautiful Phosphor Icons in a personal project¹ written in the recently-released version 3 of Vue.js. Phosphor offers a Vue plugin for using the icons in component form, but unfortunately at the time it only supported Vue v2 which is largely incompatible with Vue v3. Initially I just directly used the SVG versions of the icons, but it quickly became tedious enough that I desperately missed the components.

Finally fed up, but not wanting to throw such a huge request at a single-man project, I reached out to Phosphor maintainer Tobias Fried for permission to port the plugin to Vue v3. He was enthusiastic, so I set aside a few days to port it over. It was quite the learning experience, and fun in the hair-pulling, problem-solving kind of way.

You can find the result of my efforts on GitHub, or on NPM under the @next tag.

Quick Postmortem

This ended up being a larger undertaking than initially planned. While the actual API changes between Vue v2 and v3 were relatively straightforward to accommodate, the build tooling requirements also changed between major releases. It took less than two hours to port most of the library code, but getting type generation and Rollup up-to-snuff took the better part of a week.

In particular a lot of problems came from the “magic” of the Vue ecosystem, which leverages a dedicated CLI and pluggable config to make a lot of things “just work”. Unfortunately that doesn’t include support for building standalone, bundled libraries that can be consumed by other Vue applications. Once you’re forced to dive directly into Webpack (or in this case Rollup) you lose all of the conveniences and have to tap into each part of the build process manually. Since it’s not normally something users have to deal with, documentation is sparse, to put it kindly. In fact the closest thing to helpful documentation I found on the build process was an un-documented, comment-less GitHub repo from someone else who had struggled through the same process.

At risk of sounding like an DIY-OS-from-scratch advocate (i.e. Richard Stallman), I do feel it’s important to understand the full build process of your projects. When you’re building it from the ground up that’s pretty easy—I’ve manually set up a Webpack build for Vue v2 before—but as soon as you have to fix a “magic” build system it becomes a massive undertaking.