@weni/unnnic-system 3.6.0 → 3.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "type": "commonjs",
   "files": [
     "dist",
@@ -38,7 +38,7 @@
     "test": "vitest",
     "test:ui": "vitest --ui",
     "coverage": "vitest --coverage",
-    "style-dictionary:generate": "style-dictionary build --config styleDictionary.config.js"
+    "style-dictionary:generate": "style-dictionary build --config styleDictionary.config.mjs"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -51,6 +51,7 @@
     "vue": "^3.4.8"
   },
   "dependencies": {
+    "@iconify/vue": "^5.0.0",
     "@vueuse/components": "^10.4.1",
     "emoji-mart-vue-fast": "^15.0.5",
     "lodash": "^4.17.21",

package/src/components/Icon.vue

@@ -1,7 +1,24 @@
 <template>
+  <Icon
+    v-if="isIconify"
+    :icon="props.icon as string"
+    :class="[
+      'unnnic-icon',
+      `unnnic-icon-scheme--${scheme}`,
+      `unnnic-icon-size--${size}`,
+      {
+        'unnnic--clickable': clickable,
+      },
+    ]"
+    data-testid="iconify-icon"
+    @click="onClick"
+    @mousedown="(event) => $emit('mousedown', event)"
+    @mouseup="(event) => $emit('mouseup', event)"
+  />
+
   <component
     :is="customSvgIcon"
-    v-if="customSvgIcon"
+    v-else-if="customSvgIcon"
     :class="[
       'unnnic-icon',
       `unnnic-icon--size-svg-${size}`,
@@ -40,6 +57,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
+import { Icon } from '@iconify/vue';
 
 import icons from '../utils/icons';
 import OldIconsMap from './Icon/OldIconsMap.json';
@@ -67,6 +85,10 @@ const emit = defineEmits<{
   mouseup: [event: Event];
 }>();
 
+const isIconify = computed(
+  () => (props.icon as string)?.includes(':') ?? false,
+);
+
 const customSvgIcon = computed(() => icons[props.icon as string] ?? null);
 
 const materialSymbolsName = computed(

package/src/stories/Icon.stories.js

@@ -1,6 +1,15 @@
 import UnnnicIcon from '../components/Icon.vue';
 
-const iconsOptions = ['add'];
+const iconsOptions = [
+  'add',
+  'add-1',
+  'warning',
+  'bi:stars',
+  'indicator',
+  'fitness-biceps-1',
+  'close-1',
+  'check-2',
+];
 
 const schemes = [
   'background-solo',
@@ -93,27 +102,27 @@ const schemes = [
 ];
 
 export default {
-  title: 'example/Icon',
+  title: 'Misc/Icon',
   component: UnnnicIcon,
   argTypes: {
-    scheme: { control: { type: 'select', options: schemes } },
+    scheme: { control: { type: 'select' }, options: schemes },
     size: {
       control: {
         type: 'select',
-        options: [
-          'nano',
-          'xs',
-          'sm',
-          'md',
-          'lg',
-          'avatar-lg',
-          'avatar-md',
-          'avatar-sm',
-          'avatar-xs',
-          'avatar-nano',
-        ],
       },
+      options: [
+        'xs',
+        'sm',
+        'md',
+        'lg',
+        'avatar-lg',
+        'avatar-md',
+        'avatar-sm',
+        'avatar-xs',
+        'avatar-nano',
+      ],
     },
+    icon: { control: { type: 'select' }, options: iconsOptions },
   },
 };