☢️ Copy an SVG icon from tabler-icons.io ✴️

https://user-images.githubusercontent.com/2759340/190516628-921adc55-f83c-4a60-9223-f7a3ada7564a.mov

Install on Script Kit

---

Lists all icons of the tabler-icons open source icon set an copies the selected icon's SVG code to the clipboard. This is inspired by @benjaminmodayil script (Get Hero Icons #832)

---

// 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);
}