Get svgs from svgl.app

[RicardoBassete]

Open search-svgl in Script Kit

/*
# Get svgs from [svgl.app](https://svgl.app)

Get svgs from svgl.app, select dark or light mode if necessary and paste

*/

// Name: Get svgs from svgl.app
// Description: Get svgs from svgl.app, select dark or light mode if necessary and paste
// Author: Ricardo Gonçalves Bassete

import '@johnlindquist/kit'
import { Choice } from '@johnlindquist/kit'

type ThemeOptions = {
  light: string
  dark: string
}

interface iSVG {
  id: number
  title: string
  category: string | string[]
  route: string | ThemeOptions
  wordmark?: string | ThemeOptions
  url: string
}

const API_ROUTE = 'https://api.svgl.app'

function buildPreview(src: string) {
  return `
    <div class="p-5 flex justify-center items-center h-full">
      <img class="rounded" src="${src}"/>
    </div>
  `
}

function buildResult(svg: iSVG) {
  const route = typeof svg.route == 'string' ? svg.route : svg.route.dark
  return `
    <div class="flex flex-row h-full w-full">
      <img class="w-8" src="${route}"/>        
      <p class="flex-1 pl-4 flex flex-row items-center justify-start">${svg.title}</p>
    </div>
  `
}

const result: iSVG[] = await fetch(API_ROUTE).then(res => res.json())

const choices: Choice[] = result.map(svg => {
  const route = typeof svg.route == 'string' ? svg.route : svg.route.dark
  return {
    name: svg.title,
    value: svg.id,
    html: buildResult(svg),
    preview: buildPreview(route),
  }
})

const id = await arg('Select svg', choices)

const target = result.find(svg => svg.id == id)

if (typeof target.route == 'string') {
  const content = await fetch(target.route).then(res => res.text())
  setSelectedText(content)
} else {
  const selectedMode: 'dark' | 'light' = await arg('Select dark or light mode', ['dark', 'light'])
  const content = await fetch(target.route[selectedMode]).then(res => res.text())
  setSelectedText(content)
}