Script Kit - Tabler Icon

scriptkit-get-tabler-icon.js

// Name: Get Tabler Icons
// Description: Copies a Tabler Icon from tabler open-sourced repository.
// Author: Lucas Vogel
// Twitter: @soyvogelino

import "@johnlindquist/kit";

const iconsPath = "https://tabler-icons.io/icons.json";

let files = [];

try {
  let response = await get(iconsPath);
  files = response.data;
} catch (error) {
  notify(error);
}

const titleCase = (s) =>
  s
    .toLowerCase()
    .split("-")
    .map((w) => w[0].toUpperCase() + w.slice(1))
    .join(" ");

const options = files.map((file, idx) => {
  return {
    name: titleCase(file.n),
    description: file.t.split(" ").join(", "),
    value: file,
    preview: `
      <table class="w-full">
        <tr>
          <td class="p-8">
            <div className="m-8">${file.s}</div>
          </td>
          <td class="p-8">
            <div>${file.s.replaceAll('"24"', '"100"')}</div>
          </td>
        <tr>
          <td class="p-8 bg-black text-white">
            <div className="m-8">${file.s}</div>
          </td>
          <td class="p-8 bg-black text-white">
            <div>${file.s.replaceAll('"24"', '"100"')}</div>
          </td>
        </tr>
        </tr>
      </table>
    `,
  };
});

const icon = await arg("Search for an icon:", options);
try {
  await copy(icon.s);
  notify(`Copied ${titleCase(file.n)} icon to clipboard`);
} catch (error) {
  notify(error);
}