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

Vue Clean-ups / Drop support for Vue 2

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