Use Phoenix 1.8.0rc heroicons plugin

assets/css/app.css

@@ -3,7 +3,10 @@
 @source "../js";
 @source "../../lib/music_library_web";
 
-@plugin "./heroicons.tailwind.plugin.js";
+/* A Tailwind plugin that makes "hero-#{ICON}" classes available.
+   The heroicons installation itself is managed by your mix.exs */
+@plugin "../vendor/heroicons";
+
 @plugin "@tailwindcss/forms";
 
 @custom-variant phx-click-loading (.phx-click-loading&, .phx-click-loading &);

assets/css/heroicons.tailwind.plugin.js

@@ -1,47 +0,0 @@
-const fs = require("fs");
-const path = require("path");
-
-module.exports = function ({ matchComponents, theme }) {
-  let iconsDir = path.join(process.cwd(), "deps/heroicons/optimized");
-  let values = {};
-  let icons = [
-    ["", "/24/outline"],
-    ["-solid", "/24/solid"],
-    ["-mini", "/20/solid"],
-    ["-micro", "/16/solid"],
-  ];
-  icons.forEach(([suffix, dir]) => {
-    fs.readdirSync(path.join(iconsDir, dir)).forEach((file) => {
-      let name = path.basename(file, ".svg") + suffix;
-      values[name] = { name, fullPath: path.join(iconsDir, dir, file) };
-    });
-  });
-  matchComponents(
-    {
-      hero: ({ name, fullPath }) => {
-        let content = fs
-          .readFileSync(fullPath)
-          .toString()
-          .replace(/\r?\n|\r/g, "");
-        let size = theme("spacing.6");
-        if (name.endsWith("-mini")) {
-          size = theme("spacing.5");
-        } else if (name.endsWith("-micro")) {
-          size = theme("spacing.4");
-        }
-        return {
-          [`--hero-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,
-          "-webkit-mask": `var(--hero-${name})`,
-          mask: `var(--hero-${name})`,
-          "mask-repeat": "no-repeat",
-          "background-color": "currentColor",
-          "vertical-align": "middle",
-          display: "inline-block",
-          width: size,
-          height: size,
-        };
-      },
-    },
-    { values },
-  );
-};

assets/vendor/heroicons.js

@@ -0,0 +1,43 @@
+const plugin = require("tailwindcss/plugin")
+const fs = require("fs")
+const path = require("path")
+
+module.exports = plugin(function({matchComponents, theme}) {
+  let iconsDir = path.join(__dirname, "../../deps/heroicons/optimized")
+  let values = {}
+  let icons = [
+    ["", "/24/outline"],
+    ["-solid", "/24/solid"],
+    ["-mini", "/20/solid"],
+    ["-micro", "/16/solid"]
+  ]
+  icons.forEach(([suffix, dir]) => {
+    fs.readdirSync(path.join(iconsDir, dir)).forEach(file => {
+      let name = path.basename(file, ".svg") + suffix
+      values[name] = {name, fullPath: path.join(iconsDir, dir, file)}
+    })
+  })
+  matchComponents({
+    "hero": ({name, fullPath}) => {
+      let content = fs.readFileSync(fullPath).toString().replace(/\r?\n|\r/g, "")
+      content = encodeURIComponent(content)
+      let size = theme("spacing.6")
+      if (name.endsWith("-mini")) {
+        size = theme("spacing.5")
+      } else if (name.endsWith("-micro")) {
+        size = theme("spacing.4")
+      }
+      return {
+        [`--hero-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,
+        "-webkit-mask": `var(--hero-${name})`,
+        "mask": `var(--hero-${name})`,
+        "mask-repeat": "no-repeat",
+        "background-color": "currentColor",
+        "vertical-align": "middle",
+        "display": "inline-block",
+        "width": size,
+        "height": size
+      }
+    }
+  }, {values})
+})