Vue clean-ups / Drop support for Vue 2 (#502)

Vue Clean-ups / Drop support for Vue 2

Author: paescuj

bin/build/targets/vue/index.js

@@ -84,12 +84,9 @@ export default async (ctx, target) => {
         formats: ['cjs', 'es'],
       },
       rollupOptions: {
-        external: ['vue-demi', 'vue'],
+        external: ['vue'],
       },
     },
-    optimizeDeps: {
-      exclude: ['vue-demi'],
-    },
     plugins: [
       vue({
         isProduction: true,

bin/build/targets/vue/template.js

@@ -1,12 +1,14 @@
 function template(svg) {
   return `<script lang="ts">
-import { defineComponent, inject } from "vue-demi";
-import type { SVGAttributes } from "vue-demi";
-import providerKey from "../providerKey";
+import type { SVGAttributes } from 'vue';
+import { defineComponent, inject } from 'vue';
+import providerKey from '../providerKey';
 
-export default defineComponent<SVGAttributes>(() => {
-  const context = inject(providerKey);
-  return { context };
+export default defineComponent<SVGAttributes>({
+  setup() {
+    const context = inject(providerKey);
+    return { context };
+  },
 });
 </script>
 

examples/next/package.json

@@ -8,7 +8,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "next": "15.1.1",
+    "next": "15.1.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },

examples/vue/package.json

@@ -15,13 +15,13 @@
   "devDependencies": {
     "@iconoir/vue": "workspace:*",
     "@tsconfig/node22": "^22.0.0",
-    "@types/node": "^22.9.3",
+    "@types/node": "^22.10.2",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/tsconfig": "^0.7.0",
-    "npm-run-all2": "^7.0.1",
+    "npm-run-all2": "^7.0.2",
     "typescript": "~5.7.2",
-    "vite": "^6.0.1",
-    "vite-plugin-vue-devtools": "^7.6.5",
+    "vite": "^6.0.4",
+    "vite-plugin-vue-devtools": "^7.6.8",
     "vue-tsc": "^2.1.10"
   }
 }

examples/vue/src/App.vue

@@ -21,8 +21,6 @@ import {
       'height': '2em',
     }"
   >
-    <SomeOtherContainer>
-      <Check />
-    </SomeOtherContainer>
+    <Check />
   </IconoirProvider>
 </template>

package.json

@@ -56,8 +56,8 @@
     "semver": "^7.6.3",
     "types-tsconfig": "2.1.1",
     "typescript": "~5.7.2",
-    "vite": "^6.0.3",
-    "vite-plugin-dts": "^4.3.0"
+    "vite": "^6.0.4",
+    "vite-plugin-dts": "^4.4.0"
   },
   "pnpm": {
     "packageExtensions": {

packages/iconoir-flutter/README.md

@@ -57,6 +57,6 @@ Default values for the most common props are given below:
 | width     | "1.5em"        |
 | height    | "1.5em"        |
 
-## Icon names
+## Icon Names
 
 The Flutter widges are named as PascalCase variations of their reference names (i.e. `airplane-helix-45deg` becomes `AirplaneHelix45deg`).

packages/iconoir-react-native/README.md

@@ -71,6 +71,6 @@ return (
 );
 ```
 
-## Icon names
+## Icon Names
 
 The React components are named as PascalCase variations of their reference names (i.e. `airplane-helix-45deg` becomes `AirplaneHelix45deg`).

packages/iconoir-react/README.md

@@ -65,6 +65,6 @@ return (
 );
 ```
 
-## Icon names
+## Icon Names
 
 The React components are named as PascalCase variations of their reference names (i.e. `airplane-helix-45deg` becomes `AirplaneHelix45deg`).

packages/iconoir-vue/README.md

@@ -16,8 +16,6 @@
 
 ## Usage
 
-### Vue 3
-
 ```html
 <script setup>
   import { Iconoir } from '@iconoir/vue';
@@ -28,24 +26,6 @@
 </template>
 ```
 
-### Vue 2
-
-```html
-<script>
-  import { Iconoir } from '@iconoir/vue';
-
-  export default
-      components: {
-          Iconoir
-      }
-  }
-</script>
-
-<template>
-  <Iconoir />
-</template>
-```
-
 ### Properties
 
 Icons can take any standard SVG properties as optional props, e.g.
@@ -88,6 +68,6 @@ Tired of specifying the same props for every single icon, every time you use the
 </template>
 ```
 
-## Icon names
+## Icon Names
 
 The Vue components are named as PascalCase variations of their reference names (i.e. `airplane-helix-45deg` becomes `AirplaneHelix45deg`).

packages/iconoir-vue/package.json

@@ -29,8 +29,7 @@
       "require": {
         "types": "./dist/index.d.ts",
         "default": "./dist/index.js"
-      },
-      "default": "./dist/index.js"
+      }
     }
   },
   "main": "./dist/index.js",
@@ -40,18 +39,9 @@
     "dist"
   ],
   "peerDependencies": {
-    "@vue/composition-api": ">=1.0.0-rc.1",
-    "vue": "^2.6.11 || >=3.0.0"
-  },
-  "peerDependenciesMeta": {
-    "@vue/composition-api": {
-      "optional": true
-    }
-  },
-  "dependencies": {
-    "vue-demi": "^0.14.6"
+    "vue": "3"
   },
   "devDependencies": {
-    "vue": "^3.3.12"
+    "@vue/tsconfig": "^0.7.0"
   }
 }

packages/iconoir-vue/src/IconoirProvider.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
-import type { SVGAttributes } from 'vue-demi';
-import { provide } from 'vue-demi';
+import type { SVGAttributes } from 'vue';
+import { provide, toRef } from 'vue';
 import providerKey from './providerKey';
 
-interface Props {
+const props = defineProps<{
   iconProps: SVGAttributes;
-}
-const props = defineProps<Props>();
-provide(providerKey, props.iconProps);
+}>();
+
+const iconProps = toRef(props, 'iconProps');
+
+provide(providerKey, iconProps);
 </script>
 
 <template>

packages/iconoir-vue/src/providerKey.ts

@@ -1,4 +1,4 @@
-import type { InjectionKey, SVGAttributes } from 'vue-demi';
+import type { InjectionKey, Ref, SVGAttributes } from 'vue';
 
-const providerKey = Symbol('IconoirProvider') as InjectionKey<SVGAttributes>;
+const providerKey = Symbol('IconoirProvider') as InjectionKey<Ref<SVGAttributes>>;
 export default providerKey;

packages/iconoir-vue/tsconfig.json

@@ -1,28 +1,3 @@
 {
-  "compilerOptions": {
-    "target": "es2018",
-    "jsx": "preserve",
-    "lib": [
-      "esnext",
-      "dom",
-      "dom.iterable"
-    ],
-    "baseUrl": ".",
-    "rootDir": "src",
-    "module": "esnext",
-    "moduleResolution": "node",
-    // "isolatedModules": true,
-    "types": [
-      "vite/client"
-    ],
-    "strict": true,
-    "declarationMap": false,
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true
-  },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.vue"
-  ]
+  "extends": "@vue/tsconfig/tsconfig.dom.json"
 }