Refactored Chip

components/lib/chip/Chip.vue

@@ -1,7 +1,7 @@
 <template>
     <div v-if="visible" :class="cx('root')" :aria-label="label" v-bind="ptmi('root')">
         <slot>
-            <img v-if="image" :src="image" v-bind="ptm('image')" />
+            <img v-if="image" :src="image" v-bind="ptm('image')" :class="cx('image')" />
             <component v-else-if="$slots.icon" :is="$slots.icon" :class="cx('icon')" v-bind="ptm('icon')" />
             <span v-else-if="icon" :class="[cx('icon'), icon]" v-bind="ptm('icon')" />
             <div v-if="label" :class="cx('label')" v-bind="ptm('label')">{{ label }}</div>

components/lib/chip/style/ChipStyle.js

@@ -1,14 +1,10 @@
 import BaseStyle from 'primevue/base/style';
 
 const classes = {
-    root: ({ props }) => [
-        'p-chip p-component',
-        {
-            'p-chip-image': props.image != null
-        }
-    ],
+    root: 'p-chip p-component',
+    image: 'p-chip-image',
     icon: 'p-chip-icon',
-    label: 'p-chip-text',
+    label: 'p-chip-label',
     removeIcon: 'p-chip-remove-icon'
 };
 

components/lib/themes/primeone/base/chip/index.js

@@ -9,11 +9,7 @@ export default {
     padding: 0.25rem 0.75rem;
 }
 
-.p-chip:has(.p-chip-remove-icon) {
-    padding-right: 0.5rem;
-  }
-
-.p-chip-text {
+.p-chip-label {
     line-height: 1.5;
 }
 
@@ -22,6 +18,18 @@ export default {
     margin-right: 0.5rem;
 }
 
+.p-chip-image {
+    border-radius: 50%;
+    width: 2rem;
+    height: 2rem;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+}
+
+.p-chip:has(.p-chip-remove-icon) {
+    padding-right: 0.5rem;
+}
+
 .p-chip-remove-icon {
     line-height: 1.5;
     cursor: pointer;
@@ -31,14 +39,6 @@ export default {
     outline-color: transparent;
 }
 
-.p-chip img {
-    border-radius: 50%;
-    width: 2rem;
-    height: 2rem;
-    margin-left: -0.5rem;
-    margin-right: 0.5rem;
-}
-
 .p-chip-remove-icon:focus-visible {
     outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
     outline-offset: ${dt('focus.ring.offset')};