@coreui/icons-vue - npm Package Compare versions

Comparing version 2.1.0 to 2.2.0

dist/index.es.js

@@ -1,2 +0,2 @@
-import { defineComponent, inject, computed, h, cloneVNode } from 'vue';
+import { defineComponent, inject, ref, watch, computed, h, cloneVNode } from 'vue';
 
@@ -86,3 +86,6 @@ const CIcon = defineComponent({
         const icons = inject('icons');
-        const _icon = props.icon || props.content || props.name;
+        const _icon = ref(props.icon || props.content || props.name);
+        watch(() => props.icon, () => {
+            _icon.value = props.icon;
+        });
         const toCamelCase = (str) => {
@@ -95,10 +98,14 @@ return str
         };
-        const iconName = computed(() => _icon && typeof _icon === 'string' ? (_icon.includes('-') ? toCamelCase(_icon) : _icon) : '');
+        const iconName = computed(() => _icon.value && typeof _icon.value === 'string'
+            ? _icon.value.includes('-')
+                ? toCamelCase(_icon.value)
+                : _icon.value
+            : '');
         const titleCode = props.title ? `<title>${props.title}</title>` : 'undefined';
-        const code = computed(() => Array.isArray(_icon)
-            ? _icon
-            : typeof _icon === 'string' && iconName.value && icons[iconName.value]
+        const code = computed(() => Array.isArray(_icon.value)
+            ? _icon.value
+            : typeof _icon.value === 'string' && iconName.value && icons[iconName.value]
                 ? icons[iconName.value]
                 : 'undefined');
-        const iconCode = Array.isArray(code.value) ? code.value[1] || code.value[0] : code.value;
+        const iconCode = computed(() => Array.isArray(code.value) ? code.value[1] || code.value[0] : code.value);
         const scale = Array.isArray(code.value) && code.value.length > 1 ? code.value[0] : '64 64';
@@ -125,3 +132,3 @@ const viewBox = attrs.viewBox || `0 0 ${scale}`;
                 viewBox: viewBox,
-                innerHTML: `${titleCode}${iconCode}`,
+                innerHTML: `${titleCode}${iconCode.value}`,
                 role: 'img',
@@ -128,0 +135,0 @@ });

dist/index.js

@@ -90,3 +90,6 @@ 'use strict';
         const icons = vue.inject('icons');
-        const _icon = props.icon || props.content || props.name;
+        const _icon = vue.ref(props.icon || props.content || props.name);
+        vue.watch(() => props.icon, () => {
+            _icon.value = props.icon;
+        });
         const toCamelCase = (str) => {
@@ -99,10 +102,14 @@ return str
         };
-        const iconName = vue.computed(() => _icon && typeof _icon === 'string' ? (_icon.includes('-') ? toCamelCase(_icon) : _icon) : '');
+        const iconName = vue.computed(() => _icon.value && typeof _icon.value === 'string'
+            ? _icon.value.includes('-')
+                ? toCamelCase(_icon.value)
+                : _icon.value
+            : '');
         const titleCode = props.title ? `<title>${props.title}</title>` : 'undefined';
-        const code = vue.computed(() => Array.isArray(_icon)
-            ? _icon
-            : typeof _icon === 'string' && iconName.value && icons[iconName.value]
+        const code = vue.computed(() => Array.isArray(_icon.value)
+            ? _icon.value
+            : typeof _icon.value === 'string' && iconName.value && icons[iconName.value]
                 ? icons[iconName.value]
                 : 'undefined');
-        const iconCode = Array.isArray(code.value) ? code.value[1] || code.value[0] : code.value;
+        const iconCode = vue.computed(() => Array.isArray(code.value) ? code.value[1] || code.value[0] : code.value);
         const scale = Array.isArray(code.value) && code.value.length > 1 ? code.value[0] : '64 64';
@@ -129,3 +136,3 @@ const viewBox = attrs.viewBox || `0 0 ${scale}`;
                 viewBox: viewBox,
-                innerHTML: `${titleCode}${iconCode}`,
+                innerHTML: `${titleCode}${iconCode.value}`,
                 role: 'img',
@@ -132,0 +139,0 @@ });

package.json

 {
   "name": "@coreui/icons-vue",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Official Vue component for CoreUI Icons",
@@ -45,3 +45,3 @@ "keywords": [
     "@types/jest": "^29.5.12",
-    "@vue/compiler-sfc": "^3.4.33",
+    "@vue/compiler-sfc": "^3.4.38",
     "@vue/test-utils": "^2.4.6",
@@ -51,8 +51,8 @@ "@vue/vue3-jest": "29.2.6",
     "jest-environment-jsdom": "^29.7.0",
-    "rollup": "^4.19.0",
+    "rollup": "^4.21.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-vue": "^6.0.0",
-    "ts-jest": "^29.2.3",
+    "ts-jest": "^29.2.5",
     "typescript": "^5.5.4",
-    "vue": "^3.4.33",
+    "vue": "^3.4.38",
     "vue-types": "^5.1.3"
@@ -59,0 +59,0 @@ },

src/CIcon.ts

@@ -1,2 +0,2 @@
-import { computed, defineComponent, h, inject, PropType } from 'vue'
+import { computed, defineComponent, h, inject, PropType, ref, watch } from 'vue'
 
@@ -86,4 +86,11 @@ const CIcon = defineComponent({
     const icons: any = inject('icons')
-    const _icon = props.icon || props.content || props.name
+    const _icon = ref(props.icon || props.content || props.name)
 
+    watch(
+      () => props.icon,
+      () => {
+        _icon.value = props.icon
+      },
+    )
+
     const toCamelCase = (str: string) => {
@@ -98,3 +105,7 @@ return str
     const iconName = computed(() =>
-      _icon && typeof _icon === 'string' ? (_icon.includes('-') ? toCamelCase(_icon) : _icon) : '',
+      _icon.value && typeof _icon.value === 'string'
+        ? _icon.value.includes('-')
+          ? toCamelCase(_icon.value)
+          : _icon.value
+        : '',
     )
@@ -105,10 +116,12 @@
     const code = computed(() =>
-      Array.isArray(_icon)
-        ? _icon
-        : typeof _icon === 'string' && iconName.value && icons[iconName.value]
-        ? icons[iconName.value]
-        : 'undefined',
+      Array.isArray(_icon.value)
+        ? _icon.value
+        : typeof _icon.value === 'string' && iconName.value && icons[iconName.value]
+          ? icons[iconName.value]
+          : 'undefined',
     )
 
-    const iconCode = Array.isArray(code.value) ? code.value[1] || code.value[0] : code.value
+    const iconCode = computed(() =>
+      Array.isArray(code.value) ? code.value[1] || code.value[0] : code.value,
+    )
 
@@ -145,3 +158,3 @@ const scale = Array.isArray(code.value) && code.value.length > 1 ? code.value[0] : '64 64'
             viewBox: viewBox,
-            innerHTML: `${titleCode}${iconCode}`,
+            innerHTML: `${titleCode}${iconCode.value}`,
             role: 'img',
@@ -148,0 +161,0 @@ })

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

40350

increased by3.06%

Lines of code

848

increased by3.16%

No dependency changes