feat(VCST-4218): test dev hugeicons

client-app/router/routes/main.ts

@@ -40,7 +40,12 @@ export const mainRoutes: RouteRecordRaw[] = [
   { path: "/confirm-invitation", name: "ConfirmInvitation", component: ConfirmInvitation, meta: { public: true } },
   { path: "/forgot-password", name: "ForgotPassword", component: ForgotPassword, meta: { public: true } },
   { path: "/reset-password", name: "ResetPassword", component: ResetPassword, meta: { public: true } },
-  { path: ROUTES.CHANGE_PASSWORD.PATH, name: ROUTES.CHANGE_PASSWORD.NAME, component: ChangePassword, meta: { public: false, redirectable: false } },
+  {
+    path: ROUTES.CHANGE_PASSWORD.PATH,
+    name: ROUTES.CHANGE_PASSWORD.NAME,
+    component: ChangePassword,
+    meta: { public: false, redirectable: false },
+  },
   { path: "/set-password", name: "SetPassword", component: ResetPassword, meta: { public: true } },
   { path: "/blocked", name: "Blocked", component: BlockedPage, meta: { public: true, redirectable: false } },
   { path: "/account/confirmemail", name: "ConfirmEmail", component: ConfirmEmail, meta: { public: true } },

client-app/ui-kit/components/atoms/icon/vc-icon.stories.ts

@@ -48,3 +48,10 @@ AllIcons.args = {
   size: "md",
   class: "text-secondary-600",
 };
+
+export const HugeIcon = Template.bind({});
+HugeIcon.args = {
+  hugeIcon: true,
+  name: "CheckmarkCircle02Icon",
+  size: "md",
+};

client-app/ui-kit/components/atoms/icon/vc-icon.vue

@@ -1,22 +1,49 @@
 <template>
-  <span :class="['vc-icon', sizeClass]" :style="style" v-html="icon"></span>
+  <HugeiconsIcon
+    v-if="hugeIcon"
+    class="vc-icon"
+    :icon="icon"
+    :size="hugeIconSize"
+    :color="_color"
+    :stroke-width="strokeWidth"
+  />
+
+  <span v-else :class="['vc-icon', 'vc-icon--common', sizeClass]" :style="style" v-html="icon"></span>
 </template>
 
 <script setup lang="ts">
+import { HugeiconsIcon } from "@hugeicons/vue";
 import { ref, computed, watch } from "vue";
-import { getColorValue, loadIconRaw } from "@/ui-kit/utilities";
+import { DEFAULT_ICON_STROKE_WIDTH } from "@/ui-kit/constants";
+import { getColorValue, loadHugeiconsIcon, loadIconRaw } from "@/ui-kit/utilities";
+
+// TODO: remove size calculation & some component styles after a complete transition to HugeiconsIcon.
 
 interface IProps {
   name?: string;
   size?: VcIconSizeType;
   color?: string;
+  hugeIcon?: boolean;
+  strokeWidth?: number;
 }
 
 const props = withDefaults(defineProps<IProps>(), {
   name: "document-text",
   color: "",
+  strokeWidth: DEFAULT_ICON_STROKE_WIDTH,
+  hugeIcon: false,
 });
 
+const hugeIconSizeMap = {
+  xxs: 16,
+  xs: 20,
+  sm: 24,
+  md: 28,
+  lg: 32,
+  xl: 36,
+  xxl: 40,
+};
+
 const icon = ref();
 
 const style = computed(() =>
@@ -29,11 +56,16 @@ const style = computed(() =>
 );
 
 const sizeClass = computed(() => (typeof props.size === "string" ? `vc-icon--size--${props.size}` : ""));
+const hugeIconSize = computed(() => (typeof props.size === "string" ? hugeIconSizeMap[props.size] : props.size));
 
 const _color = computed(() => getColorValue(props.color));
 
 async function loadIcon(name?: string) {
-  icon.value = await loadIconRaw(name);
+  if (props.hugeIcon) {
+    icon.value = await loadHugeiconsIcon(name);
+  } else {
+    icon.value = await loadIconRaw(name);
+  }
 }
 
 watch(
@@ -54,7 +86,9 @@ watch(
 
   $self: &;
 
-  @apply flex-none inline-block align-top size-[--size] leading-none fill-[--color] text-[--color];
+  &--common {
+    @apply flex-none inline-block align-top size-[--size] leading-none fill-[--color] text-[--color];
+  }
 
   &--size {
     &--xxs {

client-app/ui-kit/constants/common.ts

@@ -0,0 +1 @@
+export const DEFAULT_ICON_STROKE_WIDTH = 1.5;

client-app/ui-kit/constants/index.ts

@@ -1,3 +1,4 @@
 export * from "./colors";
+export * from "./common";
 export * from "./file-size";
 export * from "./rating";

client-app/ui-kit/utilities/images.ts

@@ -1,3 +1,4 @@
+import { loadIcon } from "@hugeicons/core-free-icons/loader";
 import DOMPurify from "dompurify";
 import { Logger } from "@/core/utilities";
 
@@ -26,3 +27,16 @@ export async function loadIconRaw(name?: string) {
     return "";
   }
 }
+
+export async function loadHugeiconsIcon(name?: string) {
+  if (!name) {
+    return "";
+  }
+
+  try {
+    return await loadIcon(name);
+  } catch (error) {
+    Logger.error(`Failed to load hugeicons icon: ${name}`, error);
+    return "";
+  }
+}

package.json

@@ -48,6 +48,8 @@
     "@googlemaps/js-api-loader": "^1.16.10",
     "@googlemaps/markerclusterer": "^2.6.2",
     "@headlessui/vue": "^1.7.23",
+    "@hugeicons/core-free-icons": "^1.2.1",
+    "@hugeicons/vue": "^1.0.3",
     "@tailwindcss/container-queries": "^0.1.1",
     "@unhead/vue": "2.0.19",
     "@vee-validate/rules": "^4.15.1",

yarn.lock

@@ -2984,6 +2984,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@hugeicons/core-free-icons@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "@hugeicons/core-free-icons@npm:1.2.1"
+  checksum: 10c0/5a3390c7636a83c65933344ac67c3c5d321361b4afdad36ec4a926479abb432b772d3a7076a04640938f9878bcc5057d8b6f25d00ff7b8b8be12196bb82d9f11
+  languageName: node
+  linkType: hard
+
+"@hugeicons/vue@npm:^1.0.3":
+  version: 1.0.3
+  resolution: "@hugeicons/vue@npm:1.0.3"
+  peerDependencies:
+    vue: ^2.6.0 || ^3.0.0
+  checksum: 10c0/cccf886e9d03078075ce564c52e15f079c31e8b73ac400533203fe6af8746accdbb26e29b682d644e751ee93aa6816f3673a7b6786738b575a58d73beaa73b7c
+  languageName: node
+  linkType: hard
+
 "@humanfs/core@npm:^0.19.1":
   version: 0.19.1
   resolution: "@humanfs/core@npm:0.19.1"
@@ -15218,6 +15234,8 @@ __metadata:
     "@graphql-codegen/typescript": "npm:4.1.6"
     "@graphql-codegen/typescript-operations": "npm:4.6.1"
     "@headlessui/vue": "npm:^1.7.23"
+    "@hugeicons/core-free-icons": "npm:^1.2.1"
+    "@hugeicons/vue": "npm:^1.0.3"
     "@rollup/plugin-graphql": "npm:^2.0.5"
     "@rushstack/eslint-patch": "npm:^1.14.1"
     "@storybook/addon-a11y": "npm:9.1.16"