comet.sh
1const plugin = require("tailwindcss/plugin")
2const fs = require("fs")
3const path = require("path")
4
5module.exports = plugin(function({matchComponents, theme}) {
6 let iconsDir = path.join(__dirname, "../../deps/heroicons/optimized")
7 let values = {}
8 let icons = [
9 ["", "/24/outline"],
10 ["-solid", "/24/solid"],
11 ["-mini", "/20/solid"],
12 ["-micro", "/16/solid"]
13 ]
14 icons.forEach(([suffix, dir]) => {
15 fs.readdirSync(path.join(iconsDir, dir)).forEach(file => {
16 let name = path.basename(file, ".svg") + suffix
17 values[name] = {name, fullPath: path.join(iconsDir, dir, file)}
18 })
19 })
20 matchComponents({
21 "hero": ({name, fullPath}) => {
22 let content = fs.readFileSync(fullPath).toString().replace(/\r?\n|\r/g, "")
23 content = encodeURIComponent(content)
24 let size = theme("spacing.6")
25 if (name.endsWith("-mini")) {
26 size = theme("spacing.5")
27 } else if (name.endsWith("-micro")) {
28 size = theme("spacing.4")
29 }
30 return {
31 [`--hero-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,
32 "-webkit-mask": `var(--hero-${name})`,
33 "mask": `var(--hero-${name})`,
34 "mask-repeat": "no-repeat",
35 "background-color": "currentColor",
36 "vertical-align": "middle",
37 "display": "inline-block",
38 "width": size,
39 "height": size
40 }
41 }
42 }, {values})
43})