fix: use new icons export to drop bundle size (#110)

* Use new icons export to drop bundle size

* Bump to latest icons

---------

Co-authored-by: pramehra <prashast.mehra@finn.no>

components/alert/w-alert.vue

@@ -3,12 +3,10 @@ import { computed } from "vue";
 import { wExpandTransition } from "#generics";
 import { createModel, modelProps } from "create-v-model";
 import { alert as ccAlert } from "@warp-ds/css/component-classes";
-import {
-  IconAlertError16,
-  IconAlertSuccess16,
-  IconAlertWarning16,
-  IconAlertInfo16,
-} from "@warp-ds/icons/vue";
+import IconAlertError16 from "@warp-ds/icons/vue/alert-error-16";
+import IconAlertSuccess16 from "@warp-ds/icons/vue/alert-success-16";
+import IconAlertWarning16 from "@warp-ds/icons/vue/alert-warning-16";
+import IconAlertInfo16 from "@warp-ds/icons/vue/alert-info-16";
 
 const props = defineProps({
   title: String,

components/attention/w-attention.vue

@@ -2,7 +2,7 @@
 import { watch, computed, ref, onMounted, nextTick } from 'vue'
 import { attention as ccAttention } from '@warp-ds/css/component-classes'
 import { computePosition, flip, offset, shift, arrow } from '@floating-ui/dom'
-import { IconClose16 } from "@warp-ds/icons/vue";
+import IconClose16 from "@warp-ds/icons/vue/close-16";
 
 import { absentProp } from '#util'
 import {

components/expandable/w-expandable.vue

@@ -7,7 +7,8 @@ import {
   expandable as ccExpandable,
   box as ccBox,
 } from '@warp-ds/css/component-classes'
-import { IconChevronDown16, IconChevronUp16 } from '@warp-ds/icons/vue'
+import IconChevronDown16 from '@warp-ds/icons/vue/chevron-down-16'
+import IconChevronUp16 from '@warp-ds/icons/vue/chevron-up-16'
 
 const props = defineProps({
   title: String,

components/forms/w-affix.vue

@@ -1,7 +1,8 @@
 <script setup>
 import { suffix, prefix } from "@warp-ds/css/component-classes";
 import { computed } from "vue";
-import { IconClose16, IconSearch16 } from "@warp-ds/icons/vue";
+import IconClose16 from '@warp-ds/icons/vue/close-16'
+import IconSearch16 from "@warp-ds/icons/vue/search-16";
 
 const props = defineProps({
   prefix: Boolean,

components/forms/w-select.vue

@@ -3,8 +3,7 @@ import { computed } from 'vue';
 import { select as ccSelect } from '@warp-ds/css/component-classes';
 import { createModel } from 'create-v-model'
 import { default as wField, fieldProps } from './w-field.vue'
-import { IconChevronDown16 } from "@warp-ds/icons/vue";
-
+import IconChevronDown16 from "@warp-ds/icons/vue/chevron-down-16";
 
 const p = defineProps(fieldProps);
 const emit = defineEmits(['update:modelValue']);

components/forms/w-suffix.vue

@@ -9,8 +9,8 @@
 <script>
 import { onMounted } from 'vue'
 import { suffix as c } from '@warp-ds/css/component-classes'
-import { IconClose16, IconSearch16 } from "@warp-ds/icons/vue";
-
+import IconClose16 from '@warp-ds/icons/vue/close-16'
+import IconSearch16 from "@warp-ds/icons/vue/search-16"
 
 export default {
   name: 'wSuffix',

components/modal/w-modal.vue

@@ -9,7 +9,8 @@ import { i18n } from '@lingui/core';
 import { messages as enMessages} from './locales/en/messages.mjs';
 import { messages as nbMessages} from './locales/nb/messages.mjs';
 import { messages as fiMessages} from './locales/fi/messages.mjs';
-import { IconClose16, IconTableSortDown16 } from "@warp-ds/icons/vue";
+import IconClose16 from '@warp-ds/icons/vue/close-16';
+import IconTableSortDown16 from '@warp-ds/icons/vue/table-sort-down-16';
 
 activateI18n(enMessages, nbMessages, fiMessages);
 
@@ -103,15 +104,15 @@ const emit = defineEmits(['dismiss', 'left', 'right', 'shown', 'hidden']);
 </script>
 
 <template>
-  <transition 
+  <transition
     name="fade"
     leave-active-class="transition-opacity-200 ease-in-out"
     enter-active-class="transition-opacity-200 ease-in-out"
     enter-from-class="opacity-0"
     leave-to-class="opacity-0"
     >
     <div :class="[ccModal.backdrop, ccModal.transparentBg]" v-if="showModal" @click.self="emitDismiss" ref="backdropEl" data-test="backdrop">
-      <transition 
+      <transition
         name="slide"
         enter-from-class="translate-y-full"
         leave-to-class="translate-y-full sm:translate-y-2/4"
@@ -120,7 +121,7 @@ const emit = defineEmits(['dismiss', 'left', 'right', 'shown', 'hidden']);
         >
         <div v-if="showContent" :class="ccModal.modal" tabindex="-1" aria-modal="true" aria-labelledby="w-modal-title" role="dialog" ref="modalEl">
           <div :class="[ccModal.title, headerClasses]">
-            <transition-group 
+            <transition-group
               enter-from-class="opacity-0 backface-hidden"
               leave-to-class="opacity-0 backface-hidden"
               leave-active-class="absolute"
@@ -158,4 +159,4 @@ export default {
   name: 'wModal'
 };
 
-</script>
+</script>

components/steps/w-step.vue

@@ -3,7 +3,7 @@ import { computed, inject } from 'vue';
 import { i18n } from '@lingui/core';
 import { activateI18n } from '../util/i18n';
 import { step as ccStep } from '@warp-ds/css/component-classes';
-import { IconCheck16 } from "@warp-ds/icons/vue";
+import IconCheck16 from "@warp-ds/icons/vue/check-16";
 import { messages as enMessages} from './locales/en/messages.mjs';
 import { messages as nbMessages} from './locales/nb/messages.mjs';
 import { messages as fiMessages} from './locales/fi/messages.mjs';

dev/pages/Tabs.vue

@@ -1,8 +1,7 @@
 <script setup>
 import { wTabs, wTab, wTabPanel } from '#components';
 import { ref, h } from 'vue';
-import { IconProductStarred24 } from "@warp-ds/icons/vue";
-
+import IconProductStarred24 from "@warp-ds/icons/vue/product-starred-24";
 
 const Stars = {
   name: 'stars-svg',

package.json

@@ -30,10 +30,10 @@
   "dependencies": {
     "@floating-ui/dom": "^1.5.1",
     "@lingui/core": "^4.3.0",
-    "@warp-ds/core": "^1.0.0",
+    "@warp-ds/core": "^1.0.2",
     "@warp-ds/css": "^1.3.0",
+    "@warp-ds/icons": "1.2.0",
     "@warp-ds/uno": "^1.1.0",
-    "@warp-ds/icons": "1.1.0",
     "create-v-model": "^2.2.0",
     "dom-focus-lock": "^1.1.0",
     "element-collapse": "^1.1.0",