fix: add computed getters and fix props reactivity (#14)

Author: ghettoDdOS

Diff for: lib.d.ts

@@ -2,17 +2,21 @@ import { AllowedComponentProps, ComponentCustomProps, VNodeProps } from "vue";
 
 export interface IcomoonProps {
   iconSet: Record<any, any>;
-  icon: string;
+  icon?: string;
+  name: string;
   color?: string;
-  size?: number;
+  size?: number | string;
   disableFill?: boolean;
   removeInitialStyle?: boolean;
   style?: Record<any, any>;
 }
 
 export declare const Icomoon: {
   new (): {
-    $props: AllowedComponentProps & ComponentCustomProps & VNodeProps & IcomoonProps;
+    $props: AllowedComponentProps &
+      ComponentCustomProps &
+      VNodeProps &
+      IcomoonProps;
   };
 };
 

Diff for: src/components/Icomoon.vue

@@ -1,5 +1,10 @@
 <template>
-  <svg v-if="currentIcon" :viewBox="viewBox" :style="style" v-bind="svgProps">
+  <svg
+    v-if="currentIcon"
+    :viewBox="viewBox"
+    :style="style"
+    v-bind="{ style, color }"
+  >
     <path
       v-for="({ d, ...attrs }, index) in paths"
       :d="d"
@@ -11,6 +16,8 @@
 </template>
 
 <script>
+import { computed, ref, toRefs, watchEffect } from "vue";
+
 export default {
   name: "Icomoon",
   props: {
@@ -51,62 +58,68 @@ export default {
       default: {},
     },
   },
-  setup({
-    iconSet,
-    icon,
-    name,
-    size,
-    title,
-    disableFill,
-    removeInitialStyle,
-    ...svgProps
-  }) {
+  setup(props) {
+    const {
+      iconSet,
+      icon,
+      name,
+      size,
+      title,
+      disableFill,
+      removeInitialStyle,
+    } = toRefs(props);
+
     const initialStyle = {
       display: "inline-block",
       stroke: "currentColor",
       fill: "currentColor",
     };
 
-    const iconName = icon || name;
+    const iconName = computed(() => icon.value || name.value);
 
-    const currentIcon = iconSet.icons.find(
-      (item) => item.properties.name === iconName
+    const currentIcon = computed(() =>
+      iconSet.value.icons.find(
+        (item) => item.properties.name === iconName.value
+      )
     );
 
-    if (!currentIcon) return {};
-
-    const { width = "1024" } = currentIcon.icon;
+    if (!currentIcon.value) return {};
 
-    const viewBox = `0 0 ${width} 1024`;
+    const viewBox = computed(
+      () => `0 0 ${currentIcon.value.icon.width || "1024"} 1024`
+    );
 
-    const style = {
-      ...(removeInitialStyle ? {} : initialStyle),
-    };
+    const style = ref({
+      ...(removeInitialStyle.value ? {} : initialStyle),
+    });
 
-    if (size) {
-      style.width = size;
-      style.height = size;
-    }
+    watchEffect(() => {
+      if (size.value) {
+        style.value.width = size.value;
+        style.value.height = size.value;
+      }
+    });
 
-    const paths = currentIcon.icon.paths.map((path, index) => {
-      const attrs = currentIcon.icon.attrs
-        ? currentIcon.icon.attrs[index]
-        : null;
+    const paths = computed(() =>
+      currentIcon.value.icon.paths.map((path, index) => {
+        const attrs = currentIcon.value.icon.attrs
+          ? currentIcon.value.icon.attrs[index]
+          : null;
 
-      const pathProps = {
-        d: path,
-        ...(!disableFill && attrs ? attrs : {}),
-      };
+        const pathProps = {
+          d: path,
+          ...(!disableFill.value && attrs ? attrs : {}),
+        };
 
-      return pathProps;
-    });
+        return pathProps;
+      })
+    );
 
     return {
       currentIcon,
       viewBox,
       style,
       paths,
-      svgProps,
     };
   },
 };