feat: add solid support (#141)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
antfu-collective · Apr 26, 2023 · 807e076 · 807e076
1 parent 3678e38
commit 807e076
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/src/components/IconDetail.vue b/src/components/IconDetail.vue
@@ -66,10 +66,9 @@ async function download(type: string) {
   const text = await getIconSnippet(props.icon, type, false, color.value)
   if (!text)
     return
-
-  const name = `${toComponentName(props.icon)}.${type}`
+  const ext = (type === 'solid' || type === 'qwik') ? 'tsx' : type
+  const name = `${toComponentName(props.icon)}.${ext}`
   const blob = new Blob([text], { type: 'text/plain;charset=utf-8' })
-
   Download(blob, name)
 }
 
@@ -231,6 +230,9 @@ const collection = computed(() => {
           <button class="btn small mr-1 mb-1 opacity-75" @click="copy('qwik')">
             Qwik
           </button>
+          <button class="btn small mr-1 mb-1 opacity-75" @click="copy('solid')">
+            Solid
+          </button>
           <button class="btn small mr-1 mb-1 opacity-75" @click="copy('unplugin')">
             Unplugin Icons
           </button>
@@ -268,6 +270,9 @@ const collection = computed(() => {
           <button class="btn small mr-1 mb-1 opacity-75" @click="download('qwik')">
             Qwik
           </button>
+          <button class="btn small mr-1 mb-1 opacity-75" @click="download('solid')">
+            Solid
+          </button>
         </div>
         <div class="mr-4">
           <div class="my-1 text-gray-500 text-sm">

diff --git a/src/utils/icons.ts b/src/utils/icons.ts
@@ -106,6 +106,18 @@ export default {
   return prettierCode(code, 'vue')
 }
 
+export function SvgToSolid(svg: string, name: string, snippet: boolean) {
+  let code = `
+export function ${name}(props: JSX.IntrinsicElements['svg'], key: string) {
+  return (
+    ${ClearSvg(svg, false).replace(/<svg (.*?)>/, '<svg $1 {...props} key={key}>')}
+  )
+}`
+
+  code = snippet ? code : `import type { JSX } from 'solid-js'\n${code}\nexport default ${name}`
+  return prettierCode(code, 'babel-ts')
+}
+
 export function SvgToSvelte(svg: string) {
   return ClearSvg(svg)
 }
@@ -145,6 +157,8 @@ export async function getIconSnippet(icon: string, type: string, snippet = true,
       return SvgToVue(await getSvg(icon, undefined, color), toComponentName(icon))
     case 'vue-ts':
       return SvgToVue(await getSvg(icon, undefined, color), toComponentName(icon), true)
+    case 'solid':
+      return SvgToSolid(await getSvg(icon, undefined, color), toComponentName(icon), snippet)
     case 'svelte':
       return SvgToSvelte(await getSvg(icon, undefined, color))
     case 'unplugin':