Switch icons from inline SVG to CSS masks

CSP doesn't allow inline styles, which includes the url-masks that our
app was using for icons. This removes the icons/asset pipeline in favor
of the standard Tailwind plugin approach used by modern Phoenix apps.

Closes #176

Author: sorentwo

assets/css/app.css

@@ -92,6 +92,7 @@ select:-moz-focusring {
 
 @import "tailwindcss";
 @plugin "@tailwindcss/forms";
+@plugin "../icons.plugin.js";
 
 @custom-variant dark (&:where(.dark, .dark *));
 

assets/icons.plugin.js

@@ -0,0 +1,45 @@
+const plugin = require("tailwindcss/plugin")
+const fs = require("fs");
+const path = require("path");
+
+module.exports = plugin(function ({ matchComponents, theme }) {
+  let iconsDir = path.join(process.cwd(), "icons");
+  let values = {};
+  let icons = [
+    ["", "outline"],
+    ["-solid", "solid"],
+    ["-special", "special"],
+  ];
+
+  icons.forEach(([suffix, dir]) => {
+    let dirPath = path.join(iconsDir, dir);
+
+    fs.readdirSync(dirPath).forEach((file) => {
+      if (!file.endsWith(".svg")) return;
+
+      let name = path.basename(file, ".svg") + suffix;
+      values[name] = { name, fullPath: path.join(dirPath, file) };
+    });
+  });
+
+  matchComponents(
+    {
+      icon: ({ name, fullPath }) => {
+        let content = fs.readFileSync(fullPath).toString().replace(/\r?\n|\r/g, "")
+        content = encodeURIComponent(content)
+
+        return {
+          [`--icon-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,
+          "-webkit-mask": `var(--icon-${name})`,
+          "mask": `var(--icon-${name})`,
+          "background-color": "currentColor",
+          "vertical-align": "middle",
+          "display": "inline-block",
+          "width": theme("spacing.6"),
+          "height": theme("spacing.6"),
+        };
+      },
+    },
+    { values },
+  );
+});