feat(vue3 compiler): use setup instead data (options api can be disabled)

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 />

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']

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:*",

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 />

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']

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",

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 />

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']

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",

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",

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>

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',
       }),
     ],

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`,