How to generate PNGs of components as service command

Howdy Vue fans!

I use vue-awesome for icon support, and everything works wonderfully. Some parts of my site cause emails to be generated, which I’d like to use the icons on. Since emails aren’t browsers, I can’t use Vue (or even SVGs for that matter), so I thought having the site serve PNGs of the needed icons would be a nice solution. My first thought would be an approach along the lines of:

  1. Add a new command (or hijack the build and serve ones, but that seems more brittle) that’ll generate the PNGs
  2. In the command, render the HTML for the icons (really just the <svg>) by loading Vue and having it render the component that contains the icon.
  3. Use a third-party library to turn those SVGs into PNGs
  4. (In my backend server) Find the name of the generated and unique-ified asset and use a link to it through /static/...

The only piece I struggle with is getting Vue and vue-awesome all set up in my service command. I’m not sure how I can set up my service function to be able to import/load/use Vue single-file components (like my custom component which uses v-icon, or the v-icon itself). This is my first web project, so some things (like babel) are dark magic to me.

Any suggestions on how to proceed so that I can render vue components in my command?


If it matters I have:


    module.exports = {presets: ['@vue/app']}

package.json (contains)

      "vuePlugins": {
        "service": ["scripts/iconPNGs.js"]

scripts/iconPNGs.js (contains)

        () => {
            const Vue = require("vue");
            Vue.component('v-icon', require('vue-awesome/components/Icon').default);
            const icon  = new Vue({
                template: `<v-icon name="check" color="green"/>`