daily-tracker

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README

heroicons.js (1394B)

      1 const plugin = require("tailwindcss/plugin")
      2 const fs = require("fs")
      3 const path = require("path")
      4 
      5 module.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 })