From 1af3d6f9aeeb4005a816f9e4399e635d9b26737f Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Wed, 30 Oct 2024 16:45:04 +0100
Subject: [PATCH 1/4] fix(vue3): use `setup` instead `data`

---
 examples/vite-vue2/App.vue                |  3 +++
 examples/vite-vue2/components.d.ts        |  2 +-
 examples/vite-vue2/package.json           |  1 +
 examples/vite-vue3-legacy/App.vue         |  2 ++
 examples/vite-vue3-legacy/components.d.ts |  2 +-
 examples/vite-vue3-legacy/package.json    |  2 +-
 examples/vite-vue3/App.vue                |  2 ++
 examples/vite-vue3/components.d.ts        |  2 +-
 examples/vite-vue3/package.json           |  1 +
 examples/vue-cli-vue2/package.json        |  2 +-
 examples/vue-cli-vue2/src/App.vue         |  3 +++
 examples/vue-cli-vue2/vue.config.js       |  2 +-
 pnpm-lock.yaml                            | 13 +++++++++++++
 src/core/compilers/vue3.ts                |  1 +
 14 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/examples/vite-vue2/App.vue b/examples/vite-vue2/App.vue
index 709a3ef2..0a36a753 100644
--- a/examples/vite-vue2/App.vue
+++ b/examples/vite-vue2/App.vue
@@ -1,11 +1,13 @@
 <script lang='ts'>
 import MdiStore24Hour from 'virtual:icons/mdi/store-24-hour'
 import MdiAlarmOff from 'virtual:icons/mdi/alarm-off'
+import VSCodePython from 'virtual:icons/vscode-icons/file-type-python'
 
 export default {
   components: {
     MdiStore24Hour,
     MdiAlarmOff,
+    VSCodePython,
   },
 }
 </script>
@@ -19,6 +21,7 @@ export default {
       <i-carbon-app-connectivity />
       <i-mdi-account class="inject" />
       <MdiAlarmOff />
+      <VSCodePython />
       <i-fa-solid-dice-five />
       <i-heroicons-outline-menu-alt-2 />
       <i-ri-apps-2-line />
diff --git a/examples/vite-vue2/components.d.ts b/examples/vite-vue2/components.d.ts
index da5feae5..89ba3ccd 100644
--- a/examples/vite-vue2/components.d.ts
+++ b/examples/vite-vue2/components.d.ts
@@ -1,10 +1,10 @@
 /* eslint-disable */
-/* prettier-ignore */
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 export {}
 
+/* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
     ICarbonAppConnectivity: typeof import('~icons/carbon/app-connectivity')['default']
diff --git a/examples/vite-vue2/package.json b/examples/vite-vue2/package.json
index 498f99e4..0067c5f7 100644
--- a/examples/vite-vue2/package.json
+++ b/examples/vite-vue2/package.json
@@ -20,6 +20,7 @@
     "@iconify-json/mdi-light": "^1.1.10",
     "@iconify-json/noto-v1": "^1.1.11",
     "@iconify-json/ri": "^1.1.21",
+    "@iconify-json/vscode-icons": "^1.2.2",
     "@vitejs/plugin-vue2": "^2.3.1",
     "typescript": "^5.5.4",
     "unplugin-icons": "workspace:*",
diff --git a/examples/vite-vue3-legacy/App.vue b/examples/vite-vue3-legacy/App.vue
index 2d1fc0ed..f9a8172c 100644
--- a/examples/vite-vue3-legacy/App.vue
+++ b/examples/vite-vue3-legacy/App.vue
@@ -1,6 +1,7 @@
 <script setup lang='ts'>
 import MdiStore24Hour from 'virtual:icons/mdi/store-24-hour'
 import MdiAlarmOff from 'virtual:icons/mdi/alarm-off'
+import VSCodePython from 'virtual:icons/vscode-icons/file-type-python'
 </script>
 
 <template>
@@ -12,6 +13,7 @@ import MdiAlarmOff from 'virtual:icons/mdi/alarm-off'
       <i-carbon-app-connectivity />
       <i-mdi-account />
       <MdiAlarmOff />
+      <VSCodePython />
       <i-fa-solid-dice-five />
       <i-heroicons-outline-menu-alt-2 />
       <i-ri-apps-2-line />
diff --git a/examples/vite-vue3-legacy/components.d.ts b/examples/vite-vue3-legacy/components.d.ts
index dbe34ccf..e027e2a4 100644
--- a/examples/vite-vue3-legacy/components.d.ts
+++ b/examples/vite-vue3-legacy/components.d.ts
@@ -1,10 +1,10 @@
 /* eslint-disable */
-/* prettier-ignore */
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 export {}
 
+/* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
     ICarbonAppConnectivity: typeof import('~icons/carbon/app-connectivity')['default']
diff --git a/examples/vite-vue3-legacy/package.json b/examples/vite-vue3-legacy/package.json
index 70dc84dd..aaf42e75 100644
--- a/examples/vite-vue3-legacy/package.json
+++ b/examples/vite-vue3-legacy/package.json
@@ -10,7 +10,7 @@
     "vue": "^3.2.37"
   },
   "devDependencies": {
-    "@iconify/json": "^2.2.232",
+    "@iconify/json": "^2.2.265",
     "@vitejs/plugin-vue": "^5.1.1",
     "cross-env": "^7.0.3",
     "typescript": "^5.5.4",
diff --git a/examples/vite-vue3/App.vue b/examples/vite-vue3/App.vue
index 98285ad7..a940d203 100644
--- a/examples/vite-vue3/App.vue
+++ b/examples/vite-vue3/App.vue
@@ -8,6 +8,7 @@ import RawMdiAlarmOff3 from 'virtual:icons/mdi/alarm-off?raw&width=unset&height=
 import Custom1 from 'virtual:icons/plain-color-icons/about?raw'
 import Custom2 from 'virtual:icons/test-color-icons/about?raw'
 import ExternalCustom3 from 'virtual:icons/test-color-icons/about'
+import VSCodePython from 'virtual:icons/vscode-icons/file-type-python'
 </script>
 
 <template>
@@ -30,6 +31,7 @@ import ExternalCustom3 from 'virtual:icons/test-color-icons/about'
       <i-twemoji-1st-place-medal />
       <IIcTwotone23mp />
       <MdiStore24Hour />
+      <VSCodePython />
       <ExternalCustom3 />
       <i-test-color-icons:about />
       <i-plain-color-icons:about />
diff --git a/examples/vite-vue3/components.d.ts b/examples/vite-vue3/components.d.ts
index 012f342e..50abe32d 100644
--- a/examples/vite-vue3/components.d.ts
+++ b/examples/vite-vue3/components.d.ts
@@ -1,10 +1,10 @@
 /* eslint-disable */
-/* prettier-ignore */
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 export {}
 
+/* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
     ICarbonAppConnectivity: typeof import('~icons/carbon/app-connectivity')['default']
diff --git a/examples/vite-vue3/package.json b/examples/vite-vue3/package.json
index fd797db4..c66a4dad 100644
--- a/examples/vite-vue3/package.json
+++ b/examples/vite-vue3/package.json
@@ -22,6 +22,7 @@
     "@iconify-json/noto-v1": "^1.1.11",
     "@iconify-json/ri": "^1.1.21",
     "@iconify-json/twemoji": "^1.1.15",
+    "@iconify-json/vscode-icons": "^1.2.2",
     "@vitejs/plugin-vue": "^5.1.1",
     "cross-env": "^7.0.3",
     "typescript": "^5.5.4",
diff --git a/examples/vue-cli-vue2/package.json b/examples/vue-cli-vue2/package.json
index bf81ba12..e1a3207a 100644
--- a/examples/vue-cli-vue2/package.json
+++ b/examples/vue-cli-vue2/package.json
@@ -12,7 +12,7 @@
     "vue": "^2.7.8"
   },
   "devDependencies": {
-    "@iconify/json": "^2.2.232",
+    "@iconify/json": "^2.2.265",
     "@vue/cli-plugin-babel": "^5.0.8",
     "@vue/cli-plugin-typescript": "^5.0.8",
     "@vue/cli-service": "^5.0.8",
diff --git a/examples/vue-cli-vue2/src/App.vue b/examples/vue-cli-vue2/src/App.vue
index d77bb61f..74354983 100644
--- a/examples/vue-cli-vue2/src/App.vue
+++ b/examples/vue-cli-vue2/src/App.vue
@@ -2,12 +2,14 @@
 import LogosVue from '~icons/logos/vue'
 import MdiStore24Hour from '~icons/mdi/store-24-hour'
 import MdiAlarmOff from '~icons/mdi/alarm-off'
+import VSCodePython from 'virtual:icons/vscode-icons/file-type-python'
 
 export default {
   components: {
     LogosVue,
     MdiStore24Hour,
     MdiAlarmOff,
+    VSCodePython,
   },
 }
 </script>
@@ -20,6 +22,7 @@ export default {
       Icons
       <MdiStore24Hour />
       <MdiAlarmOff />
+      <VSCodePython />
       from <code>unplugin-icons</code>
     </p>
   </div>
diff --git a/examples/vue-cli-vue2/vue.config.js b/examples/vue-cli-vue2/vue.config.js
index 437e019e..2a683603 100644
--- a/examples/vue-cli-vue2/vue.config.js
+++ b/examples/vue-cli-vue2/vue.config.js
@@ -6,7 +6,7 @@ const Icons = require('unplugin-icons/webpack')
 module.exports = {
   configureWebpack: {
     plugins: [
-      Icons({
+      Icons.default({
         compiler: 'vue2',
       }),
     ],
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cc9c65b6..4b6c630d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -427,6 +427,9 @@ importers:
       '@iconify-json/ri':
         specifier: ^1.1.21
         version: 1.1.21
+      '@iconify-json/vscode-icons':
+        specifier: ^1.2.2
+        version: 1.2.2
       '@vitejs/plugin-vue2':
         specifier: ^2.3.1
         version: 2.3.1(vite@5.3.5(@types/node@22.0.0)(terser@5.27.0))(vue@2.7.8)
@@ -488,6 +491,9 @@ importers:
       '@iconify-json/twemoji':
         specifier: ^1.1.15
         version: 1.1.15
+      '@iconify-json/vscode-icons':
+        specifier: ^1.2.2
+        version: 1.2.2
       '@vitejs/plugin-vue':
         specifier: ^5.1.1
         version: 5.1.1(vite@5.3.5(@types/node@22.0.0)(terser@5.27.0))(vue@3.2.37)
@@ -2023,6 +2029,9 @@ packages:
   '@iconify-json/twemoji@1.1.15':
     resolution: {integrity: sha512-ze2CAOwIWBKIP6ih6qMDItasVjRicktl2Qr3/ohZSMToAHm9z3Q6HCwE48eT0+D+uFpGBlNRQ22HHyE5izyhDg==}
 
+  '@iconify-json/vscode-icons@1.2.2':
+    resolution: {integrity: sha512-bTpT0HJDRqGkxQv8oiETNHLEnBZpnA1QaRD35CQyO7M7qgWVLx2xwn/lK6e4waojmlPC3ckMBx3WFIUUn0/Jdg==}
+
   '@iconify/json@2.2.110':
     resolution: {integrity: sha512-S7aKdBkVyAVOlxy/DD91NoGR/dAjpyLjEPYjaC+Ff2tkd7pzQnylNoR4h+K+N9su+fLUpD1XrKyw/oIYEyBfOg==}
 
@@ -9787,6 +9796,10 @@ snapshots:
     dependencies:
       '@iconify/types': 2.0.0
 
+  '@iconify-json/vscode-icons@1.2.2':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify/json@2.2.110':
     dependencies:
       '@iconify/types': 2.0.0
diff --git a/src/core/compilers/vue3.ts b/src/core/compilers/vue3.ts
index c9ef461d..2bd32b39 100644
--- a/src/core/compilers/vue3.ts
+++ b/src/core/compilers/vue3.ts
@@ -8,6 +8,7 @@ export const Vue3Compiler = (async (svg: string, collection: string, icon: strin
   const { injectScripts, svg: handled } = handleSVGId(svg)
 
   let { code } = compileTemplate({
+
     source: handled,
     id: `${collection}:${icon}`,
     filename: `${collection}-${icon}.vue`,

From 1caff542a7e44d93371e8f7dafb2bda03689f9fc Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Wed, 30 Oct 2024 16:55:57 +0100
Subject: [PATCH 2/4] chore: replace `data` with `setup`

---
 src/core/compilers/vue3.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/core/compilers/vue3.ts b/src/core/compilers/vue3.ts
index 2bd32b39..6015e152 100644
--- a/src/core/compilers/vue3.ts
+++ b/src/core/compilers/vue3.ts
@@ -8,7 +8,6 @@ export const Vue3Compiler = (async (svg: string, collection: string, icon: strin
   const { injectScripts, svg: handled } = handleSVGId(svg)
 
   let { code } = compileTemplate({
-
     source: handled,
     id: `${collection}:${icon}`,
     filename: `${collection}-${icon}.vue`,
@@ -17,7 +16,7 @@ export const Vue3Compiler = (async (svg: string, collection: string, icon: strin
   code = `import { markRaw } from 'vue'\n${code}`
   code = code.replace(/^export /gm, '')
   code += `\n\nexport default markRaw({ name: '${collection}-${icon}', render${
-    injectScripts ? `, data() {${injectScripts};return { idMap }}` : ''
+    injectScripts ? `, setup() {${injectScripts};return { idMap }}` : ''
   } })`
   code += '\n/* vite-plugin-components disabled */'
 

From 408689e574f0068b7b615b493a56f68859736b92 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Wed, 30 Oct 2024 18:32:27 +0100
Subject: [PATCH 3/4] chore: update lock file

---
 pnpm-lock.yaml | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0291a43d..cbc61220 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -523,8 +523,8 @@ importers:
         version: 3.2.37
     devDependencies:
       '@iconify/json':
-        specifier: ^2.2.232
-        version: 2.2.232
+        specifier: ^2.2.265
+        version: 2.2.266
       '@vitejs/plugin-vue':
         specifier: ^5.1.1
         version: 5.1.1(vite@5.3.5(@types/node@22.0.0)(terser@5.27.0))(vue@3.2.37)
@@ -569,8 +569,8 @@ importers:
         version: 2.7.8
     devDependencies:
       '@iconify/json':
-        specifier: ^2.2.232
-        version: 2.2.232
+        specifier: ^2.2.265
+        version: 2.2.266
       '@vue/cli-plugin-babel':
         specifier: ^5.0.8
         version: 5.0.8(@vue/cli-service@5.0.8(@vue/compiler-sfc@3.4.34)(esbuild@0.23.0)(lodash@4.17.21)(vue-template-compiler@2.7.16)(webpack-sources@3.2.3))(core-js@3.37.1)(esbuild@0.23.0)(vue@2.7.8)
@@ -2038,6 +2038,9 @@ packages:
   '@iconify/json@2.2.232':
     resolution: {integrity: sha512-o1W5bNDuXTd3ugywfX9uRmhuJTKYOLhH4qk+eUpkR8WEYdTmMW+FSiFO5R2KqD94Tzoi8Ef8u/R7felU5xk3eQ==}
 
+  '@iconify/json@2.2.266':
+    resolution: {integrity: sha512-lv+lmPjhDh5/sCaom8AX39USmneRMcQRT/SKoDsxizOjVKycZ8PRk7kNKi776YkKzuksb0Xv5Tfi/Mrr3YLQgQ==}
+
   '@iconify/types@2.0.0':
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
 
@@ -9787,6 +9790,11 @@ snapshots:
       '@iconify/types': 2.0.0
       pathe: 1.1.2
 
+  '@iconify/json@2.2.266':
+    dependencies:
+      '@iconify/types': 2.0.0
+      pathe: 1.1.2
+
   '@iconify/types@2.0.0': {}
 
   '@iconify/utils@2.1.29':

From 953c6919b7d8aff2b85ed6eb6a350a4e798082fc Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Wed, 30 Oct 2024 19:08:09 +0100
Subject: [PATCH 4/4] chore: fix vue 2 cli example

---
 examples/vue-cli-vue2/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/vue-cli-vue2/package.json b/examples/vue-cli-vue2/package.json
index e1a3207a..9690c9f8 100644
--- a/examples/vue-cli-vue2/package.json
+++ b/examples/vue-cli-vue2/package.json
@@ -22,6 +22,6 @@
   },
   "stackblitz": {
     "installDependencies": false,
-    "startCommand": "node .stackblitz.js && npm install && npm run dev"
+    "startCommand": "node .stackblitz.js && npm install && npm add -D vue-template-compiler && npm run dev"
   }
 }