feat: allow download missing frameworks zip from bag (#371)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

src/components/Bag.vue

@@ -87,6 +87,21 @@ async function PackSvgs(type: PackType = 'svg') {
         <button class="btn small mr-1 mb-1 opacity-75" @click="PackSvgs('tsx')">
           React<sup class="opacity-50 -mr-1">TS</sup>
         </button>
+        <button class="btn small mr-1 mb-1 opacity-75" @click="PackSvgs('svelte')">
+          Svelte
+        </button>
+        <button class="btn small mr-1 mb-1 opacity-75" @click="PackSvgs('qwik')">
+          Qwik
+        </button>
+        <button class="btn small mr-1 mb-1 opacity-75" @click="PackSvgs('solid')">
+          Solid
+        </button>
+        <button class="btn small mr-1 mb-1 opacity-75" @click="PackSvgs('astro')">
+          Astro
+        </button>
+        <button class="btn small mr-1 mb-1 opacity-75" @click="PackSvgs('react-native')">
+          React Native
+        </button>
         <button class="btn small mr-1 mb-1 opacity-75" @click="PackSvgs('json')">
           JSON
         </button>

src/utils/svg/helpers.ts

@@ -7,7 +7,7 @@ import { HtmlToJSX } from './htmlToJsx'
 import { getSvg } from './loader'
 import { prettierCode } from './prettier'
 
-export type PackType = 'svg' | 'tsx' | 'jsx' | 'vue' | 'json'
+export type PackType = 'svg' | 'tsx' | 'jsx' | 'vue' | 'solid' | 'qwik' | 'svelte' | 'astro' | 'react-native' | 'json'
 
 export function normalizeZipFleName(svgName: string): string {
   return svgName.replace(':', '-')

src/utils/worker/index.ts

@@ -4,15 +4,7 @@ import type { CollectionInfo } from '../../data'
 import type { PackType } from '../svg'
 import type { PackOperation, WorkerPackMessage } from './types'
 import { downloadZip } from 'client-zip'
-import {
-  getSvg,
-  LoadIconSvgs,
-  normalizeZipFleName,
-  SvgToJSX,
-  SvgToTSX,
-  SvgToVue,
-  toComponentName,
-} from '../svg'
+import { getSvg, LoadIconSvgs, normalizeZipFleName, SvgToAstro, SvgToJSX, SvgToQwik, SvgToReactNative, SvgToSolid, SvgToSvelte, SvgToTSX, SvgToVue, toComponentName } from '../svg'
 
 globalThis.onmessage = async (event: MessageEvent<WorkerPackMessage<PackOperation>>) => {
   const message = event.data
@@ -149,6 +141,8 @@ async function* PreparePackZip(
     return
   }
 
+  const ext = (type === 'solid' || type === 'qwik' || type === 'react-native') ? 'tsx' : type
+
   for (const name of icons) {
     if (!name)
       continue
@@ -165,6 +159,21 @@ async function* PreparePackZip(
       case 'jsx':
         content = await SvgToJSX(svg, componentName, false)
         break
+      case 'svelte':
+        content = SvgToSvelte(svg)
+        break
+      case 'astro':
+        content = SvgToAstro(svg)
+        break
+      case 'qwik':
+        content = await SvgToQwik(svg, componentName, false)
+        break
+      case 'react-native':
+        content = await SvgToReactNative(svg, componentName, false)
+        break
+      case 'solid':
+        content = await SvgToSolid(svg, componentName, false)
+        break
       case 'tsx':
         content = await SvgToTSX(svg, componentName, false)
         break
@@ -173,7 +182,7 @@ async function* PreparePackZip(
     }
 
     yield {
-      name: `${componentName}.${type}`,
+      name: `${componentName}.${ext}`,
       input: new Blob([content], { type: 'text/plain' }),
     }
   }