View Source PhosphorIcons (Phosphor Icons v0.0.1)

Documentation for PhosphorIcons.

Sample tailwindcss.config.js

  plugin(function ({ matchComponents, theme }) {
    let baseDir = path.join(__dirname, "./vendor/phosphoricons/assets");
    let values = {};
    let icons = fs
      .readdirSync(baseDir, { withFileTypes: true })
      .filter((dirent) => dirent.isDirectory())
      .map((dirent) => dirent.name);

    icons.forEach((dir) => {
      fs.readdirSync(path.join(baseDir, dir)).map((file) => {
        let name = path.basename(file, ".svg");

        values[name] = { name, fullPath: path.join(baseDir, dir, file) };
      });
    });

    matchComponents(
      {
        pi: ({ name, fullPath }) => {
          let content = fs
            .readFileSync(fullPath)
            .toString()
            .replace(/
?
|
/g, "");

          return {
            [`--pi-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,
            "-webkit-mask": `var(--pi-${name})`,
            mask: `var(--pi-${name})`,
            "background-color": "currentColor",
            "vertical-align": "middle",
            display: "inline-block",
            width: theme("spacing.10"),
            height: theme("spacing.10"),
          };
        },
      },
      { values }
    );
  }),