Grab Icon from TailwindLabs's HeroIcons set

This script lets you copy a solid/outline icon variant from TailwindLab's Hero Icons set.

I created this as I wanted a fast way to find a specific icon while working in Sketch without referencing the site to copy the svgs. This script uses the "optimized" versions of the SVGs. These are good for development, but I've had some bugs with the optimized SVGs (not script related) when pasting it in Sketch. I think if you want to have the uncompressed/less performant version of the SVGs for design programs, you just need to change the GitHub API/paths from the optimized folder to the src folder.

https://user-images.githubusercontent.com/12306850/179084850-6702912c-7b66-4165-a6df-f878e9bd2f98.mov

// Name: Get Hero Icons
// Description: Copies a Hero Icon from TailwindLabs open-sourced repository.
// Author: Benjamin Modayil
// Twitter: @modayilme

/** @type {import("@johnlindquist/kit")} */

const baseRoute = 'https://api.github.com/repos/tailwindlabs/heroicons/contents/optimized';
let outlineFolderPath = `${baseRoute}/outline`;
let solidFolderPath = `${baseRoute}/solid`;

let outlineFiles;
let solidFiles;

const headers = {
  'User-Agent': 'scriptkit/hero-icons'
};

try {
  let outlineResponse = await get(outlineFolderPath, headers);
  let solidResponse = await get(solidFolderPath, headers);
  outlineFiles = outlineResponse.data;
  solidFiles = solidResponse.data;
} catch (error) {
  notify(error);
}

const outlineRemotePath =
  'https://raw.githubusercontent.com/tailwindlabs/heroicons/master/optimized/outline';
const solidRemotePath =
  'https://raw.githubusercontent.com/tailwindlabs/heroicons/master/optimized/solid';

// We only loop over the outline folder files as the only difference in folders is the icon style type, solid versus outline, (230 files in each folder).
const options = outlineFiles.map((file) => {
  return {
    name: file.name,
    description: file.path,
    value: file.name,
    preview: `
      <div class="bg-white flex">
        <figure class="flex flex-col items-center flex-auto w-40 m-0">
          <img class="w-40" src="${outlineRemotePath}/${file.name}" alt="outline ">
          <figcaption class="center text-black">outline</figcaption>
        </figure>
        <figure class="flex flex-col items-center flex-auto w-40 m-0">
          <img class="w-40" src="${solidRemotePath}/${file.name}" alt="solid ">
          <figcaption class="center text-black">solid</figcaption>
        </figure>
      </div>
    `
  };
});

const fileName = await arg('Search for an icon:', options);
const typeOptions = [
  {
    name: 'outline',
    value: `${outlineRemotePath}/${fileName}`,
    preview: `
      <div>
        <figure class="bg-white flex flex-col items-center flex-auto w-40 m-0">
          <img class="w-40" src="${outlineRemotePath}/${fileName}" alt="outline ${fileName}">
          <figcaption class="center text-black">outline</figcaption>
        </figure>
      </div>
    `
  },
  {
    name: 'solid',
    value: `${solidRemotePath}/${fileName}`,
    preview: () => `
      <div>
        <figure class="bg-white flex flex-col items-center flex-auto w-40 m-0">
          <img class="w-40" src="${solidRemotePath}/${fileName}" alt="solid ${fileName}">
          <figcaption class="center text-black">solid</figcaption>
        </figure>
      </div>
    `
  }
];

const downloadLink = await arg('Which type?', typeOptions);
const type = downloadLink.includes('outline') ? 'outline' : 'solid';
try {
  let buffer = await download(downloadLink, headers);
  await copy(buffer.toString());
  notify(`Copied ${type} ${fileName} icon to clipboard`);
} catch (error) {
  notify(error);
}