feat: download SVG Sprite (#193)

antfu-collective · Sep 3, 2023 · 7fa9b0d · 7fa9b0d
1 parent 80ce91d
commit 7fa9b0d
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 2 deletions.
diff --git a/src/components/Bag.vue b/src/components/Bag.vue
@@ -1,6 +1,6 @@
 <script setup lang='ts'>
 import { bags, clearBag } from '../store'
-import { PackIconFont, PackZip } from '../utils/pack'
+import { PackIconFont, PackSVGSprite, PackZip } from '../utils/pack'
 import type { PackType } from '../utils/pack'
 
 const emit = defineEmits<{
@@ -25,6 +25,12 @@ async function packIconFont() {
   )
 }
 
+async function packSVGSprite() {
+  await PackSVGSprite(
+    bags.value,
+  )
+}
+
 async function PackSvgs(type: PackType = 'svg') {
   await PackZip(
     bags.value,
@@ -89,6 +95,7 @@ async function PackSvgs(type: PackType = 'svg') {
       >
         <IconButton class="p-1 cursor-pointer hover:text-primary" icon="carbon:download" text="Download Zip" :active="true" @click="showPackOption = true" />
         <IconButton class="p-1 cursor-pointer hover:text-primary" icon="carbon:function" text="Generate Icon Fonts" :active="true" @click="packIconFont" />
+        <IconButton class="p-1 cursor-pointer hover:text-primary" icon="carbon:apps" text="Download SVG Sprite" :active="true" @click="packSVGSprite" />
       </div>
     </template>
 

diff --git a/src/utils/pack.ts b/src/utils/pack.ts
@@ -2,7 +2,7 @@ import { isVSCode } from '../env'
 import { bufferToString } from './bufferToSring'
 import {
   SvgToJSX, SvgToTSX, SvgToVue,
-  getSvg, toComponentName,
+  getSvg, getSvgSymbol, toComponentName,
 } from './icons'
 
 export async function LoadIconSvgs(icons: string[]) {
@@ -39,6 +39,25 @@ export async function Download(blob: Blob, name: string) {
   }
 }
 
+export async function PackSVGSprite(icons: string[], options: any = {}) {
+  if (!icons.length)
+    return
+  const data = await LoadIconSvgs(icons)
+
+  let symbols = ''
+  for (const { name } of data)
+    symbols += `${await getSvgSymbol(name, options.size, options.color)}\n`
+
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<defs>
+${symbols}
+</defs>
+</svg>`
+
+  const blob = new Blob([svg], { type: 'image/svg+xml' })
+  Download(blob, 'sprite.svg')
+}
+
 export async function PackIconFont(icons: string[], options: any = {}) {
   if (!icons.length)
     return