vueless 0.0.490 → 0.0.492

package/constants.js

@@ -185,6 +185,17 @@ export const DEFAULT_SVGO_CONFIG = {
   ],
 };
 
+/* Vueless general */
+export const ICONS_DIR = "assets/icons";
+export const VUELESS_LIBRARY = "vueless";
+export const VUELESS_CONFIG_FILE_NAME = "vueless.config";
+export const VUELESS_CACHE_DIR = "node_modules/.cache/vueless";
+export const VUELESS_DIR = `node_modules/${VUELESS_LIBRARY}`;
+export const VUELESS_LOCAL_DIR = `src`;
+export const VUELESS_ICONS_DIR = `${VUELESS_DIR}/${ICONS_DIR}`;
+export const VUELESS_ICONS_LOCAL_DIR = `src/${ICONS_DIR}`;
+export const VUELESS_ICONS_CACHED_DIR = `${VUELESS_CACHE_DIR}/${ICONS_DIR}`;
+
 /* Other */
 export const PX_IN_REM = 16;
 export const NESTED_COMPONENT_REG_EXP = /\{U[^}]*}/g;
@@ -192,5 +203,3 @@ export const DYNAMIC_COLOR_PATTERN = "{color}";
 export const TAILWIND_COLOR_OPACITY_DELIMITER = "/";
 export const TAILWIND_VARIANT_DELIMITER = ":";
 export const TAILWIND_VARIANT_DELIMITER_REG_EXP = /:(?![^[]*])/;
-export const CACHE_PATH = "node_modules/.cache/vueless";
-export const VUELESS_CONFIG_FILE_NAME = "vueless.config";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.490",
+  "version": "0.0.492",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/plugin-vite.d.ts

@@ -7,4 +7,5 @@ export function Vueless(options?: {
   mode?: string;
   debug?: boolean;
   include?: string[];
+  mirrorCacheDir?: string;
 }): never;

package/plugin-vite.js

@@ -6,9 +6,9 @@
 import UnpluginVueComponents from "unplugin-vue-components/vite";
 
 import { loadSvg } from "./utils/node/loaderSvg.js";
-import { copyIcons, removeIcons } from "./utils/node/loaderIcon.js";
+import { cacheIcons, removeIconsCache, copyIconsCache } from "./utils/node/loaderIcon.js";
 import { createTailwindSafelist, clearTailwindSafelist } from "./utils/node/tailwindSafelist.js";
-import { getNuxtFiles, getVueSourceFile } from "./utils/node/helper.js";
+import { getNuxtFiles, getVueFiles } from "./utils/node/helper.js";
 import { componentResolver, directiveResolver } from "./utils/node/vuelessResolver.js";
 
 /* Automatically importing Vueless components on demand */
@@ -25,21 +25,22 @@ export const VuelessUnpluginComponents = (options) =>
   – Loads SVG images as a Vue components.
  */
 export const Vueless = function (options = {}) {
-  const { mode, debug, env, include } = options;
+  const { mode, debug, env, include, mirrorCacheDir } = options;
 
   const isVuelessEnv = env === "vueless";
   const isNuxt = mode === "nuxt-module";
-  const srcDir = isNuxt ? process.cwd() : getVueSourceFile();
 
-  const targetFiles = [srcDir, ...(include || []), ...(isNuxt ? getNuxtFiles() : [])];
+  const targetFiles = [...(include || []), ...(isNuxt ? getNuxtFiles() : getVueFiles())];
 
   /* if server stopped by developer (Ctrl+C) */
   process.on("SIGINT", async () => {
-    /* remove dynamically copied icons */
-    await removeIcons({ debug });
+    /* remove cached icons */
+    await removeIconsCache(mirrorCacheDir, debug);
 
     /* clear tailwind safelist */
     clearTailwindSafelist(debug);
+
+    /* stop command line process */
     process.exit(0);
   });
 
@@ -57,28 +58,36 @@ export const Vueless = function (options = {}) {
     }),
 
     configResolved: async (config) => {
-      /* collect used in project colors for tailwind safelist */
       if (!isNuxt) {
+        /* collect used in project colors for tailwind safelist */
         await createTailwindSafelist({ mode, env, debug, targetFiles });
       }
 
       if (config.command === "build") {
-        await removeIcons({ debug });
+        /* remove cached icons */
+        await removeIconsCache(mirrorCacheDir, debug);
+
+        /* cache vueless built-in and project icons */
+        await cacheIcons({ mode: "vuelessIcons", env, debug, targetFiles });
+        await cacheIcons({ mode, env, debug, targetFiles });
 
-        /* dynamically copy used icons before build */
-        await copyIcons({ mode: "vuelessIcons", env, debug, targetFiles });
-        await copyIcons({ mode, env, debug, targetFiles });
+        /* copy vueless cache folder */
+        await copyIconsCache(mirrorCacheDir, debug);
       }
 
       if (config.command === "dev" || config.command === "serve") {
-        /* remove dynamically copied icons on dev server start */
-        await removeIcons({ debug });
+        /* remove cached icons */
+        await removeIconsCache(mirrorCacheDir, debug);
+        /* cache vueless built-in icons */
+        await cacheIcons({ mode: "vuelessIcons", env, debug, targetFiles });
+        /* copy vueless cache folder */
+        await copyIconsCache(mirrorCacheDir, debug);
       }
     },
 
-    /* remove dynamically copied icons after build */
     buildEnd: async () => {
-      await removeIcons({ debug });
+      /* remove cached icons */
+      await removeIconsCache(mirrorCacheDir, debug);
     },
 
     /* load SVG images as a Vue components */

package/ui.form-select/USelect.vue

@@ -209,7 +209,6 @@
             autocomplete="off"
             :spellcheck="false"
             :placeholder="inputPlaceholder"
-            :value="search"
             :disabled="disabled"
             :aria-controls="'listbox-' + elementId"
             v-bind="searchInputAttrs"

package/ui.image-icon/UIcon.vue

@@ -11,15 +11,15 @@
 
 <script setup>
 import { computed, defineAsyncComponent } from "vue";
+import { vTooltip } from "../directives";
 import { getDefault } from "../utils/ui.ts";
 import { isSSR } from "../utils/helper.ts";
+import { VUELESS_ICONS_CACHED_DIR, VUELESS_LIBRARY } from "../constants.js";
 
 import { UIcon } from "./constants.js";
 import defaultConfig from "./config.ts";
 import useAttrs from "./useAttrs.js";
 
-import { vTooltip } from "../directives";
-
 defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
@@ -140,10 +140,12 @@ const generatedIcons = computed(() => {
 const dynamicComponent = computed(() => {
   const FILL_SUFFIX = "-fill";
 
-  const isDefaultIcon = Boolean(generatedIcons.value.find(([path]) => path.includes(props.name)));
-  const userLibrary = config.value.defaults.library;
+  const isInternalIcon = Boolean(
+    generatedIcons.value.find(([path]) => path.includes(VUELESS_LIBRARY + "/" + props.name)),
+  );
 
-  const library = props.internal && isDefaultIcon ? "vueless" : userLibrary;
+  const userLibrary = config.value.defaults.library;
+  const library = props.internal && isInternalIcon ? VUELESS_LIBRARY : userLibrary;
   const weight = config.value.defaults.weight;
   const style = config.value.defaults.style;
   const isFill = props.name.endsWith(FILL_SUFFIX);
@@ -176,8 +178,8 @@ const dynamicComponent = computed(() => {
       return import.meta.env.PROD
         ? await getIcon([name])
         : isSSR
-          ? import(/* @vite-ignore */ `node_modules/.cache/vueless/assets/icons/${name}.svg?component`)
-          : import(/* @vite-ignore */ `/node_modules/.cache/vueless/assets/icons/${name}.svg?component`);
+          ? import(/* @vite-ignore */ `${VUELESS_ICONS_CACHED_DIR}/${VUELESS_LIBRARY}/${name}.svg?component`)
+          : import(/* @vite-ignore */ `/${VUELESS_ICONS_CACHED_DIR}/${VUELESS_LIBRARY}/${name}.svg?component`);
     },
     "@material-symbols": async () => {
       return import.meta.env.PROD

package/utils/node/helper.js

@@ -5,15 +5,27 @@ import { readdir } from "node:fs/promises";
 export async function getDirFiles(dirPath, ext, { recursive = true, exclude = [] } = {}) {
   let fileNames = [];
 
+  const ERROR_CODE = {
+    dirIsFile: "ENOTDIR",
+    noEntry: "ENOENT",
+  };
+
   try {
     fileNames = await readdir(dirPath, { recursive });
   } catch (error) {
-    if (error.code === "ENOTDIR") {
-      fileNames = [dirPath.split(path.sep).at(-1)];
-      dirPath = dirPath.split(path.sep).slice(0, -1).join(path.sep);
-    } else if (error.code === "ENOENT") {
+    if (error.code === ERROR_CODE.dirIsFile) {
+      const pathArray = dirPath.split(path.sep);
+      const fileName = pathArray.pop();
+
+      fileNames = [fileName];
+      dirPath = pathArray.join(path.sep);
+    }
+
+    if (error.code === ERROR_CODE.noEntry) {
       fileNames = [];
-    } else {
+    }
+
+    if (!Object.values(ERROR_CODE).includes(error.code)) {
       // eslint-disable-next-line no-console
       console.error(error);
     }
@@ -52,8 +64,8 @@ export function getNuxtFiles() {
   ];
 }
 
-export function getVueSourceFile() {
-  return path.join(process.cwd(), "src");
+export function getVueFiles() {
+  return [path.join(process.cwd(), "src")];
 }
 
 export function getDefaultConfigJson(fileContents) {
@@ -64,7 +76,7 @@ export function getDefaultConfigJson(fileContents) {
   return (0, eval)("(" + objectString + ")"); // Converting into JS object
 }
 
-export function merge(source, target) {
+export function merge(source = {}, target = {}) {
   for (const [key, val] of Object.entries(source)) {
     if (val !== null && typeof val === `object`) {
       target[key] ??= new val.__proto__.constructor();

package/utils/node/loaderIcon.js

@@ -1,10 +1,7 @@
 /**
  This scrypt find icon names from the UIcon props and objects across the project
  and copy SVG icons from the default icons library (@material-symbols or other from config)
- to the ".../cache" folder.
-
- Those icons will be used only in the build stage.
- The script is needed to avoid all @material-symbols icons set in the project bundle.
+ to the `VUELESS_ICONS_CACHED_DIR` folder.
  */
 
 /* eslint-disable no-console */
@@ -15,89 +12,140 @@ import { rm, cp } from "node:fs/promises";
 
 import { vuelessConfig } from "./vuelessConfig.js";
 import { getDirFiles, getDefaultConfigJson, merge } from "./helper.js";
-import { CACHE_PATH, VUELESS_CONFIG_FILE_NAME } from "../../constants.js";
-
-const ICONS_DIR = "assets/icons";
-const DEFAULT_ICONS_DIR = path.join(process.cwd(), `node_modules/vueless/${ICONS_DIR}`);
-const DEFAULT_ICONS_LOCAL_DIR = path.join(process.cwd(), `src/${ICONS_DIR}`);
-const CACHED_ICONS_DIR = path.join(process.cwd(), `${CACHE_PATH}/${ICONS_DIR}`);
-const ICON_CONFIG_PATH = "ui.image-icon/config.ts";
-const ICON_COMPONENT_NAME = "UIcon";
-const STORYBOOK_STORY_EXTENSIONS = ["/stories.js", "/stories.ts"];
+import {
+  COMPONENTS,
+  VUELESS_DIR,
+  VUELESS_LOCAL_DIR,
+  VUELESS_LIBRARY,
+  VUELESS_ICONS_DIR,
+  VUELESS_ICONS_LOCAL_DIR,
+  VUELESS_ICONS_CACHED_DIR,
+  VUELESS_CONFIG_FILE_NAME,
+  ICONS_DIR,
+} from "../../constants.js";
+
+const cwd = process.cwd();
+
+const DEFAULT_ICONS_DIR = path.join(cwd, VUELESS_ICONS_DIR);
+const DEFAULT_ICONS_LOCAL_DIR = path.join(cwd, VUELESS_ICONS_LOCAL_DIR);
+const CACHED_ICONS_DIR = path.join(cwd, VUELESS_ICONS_CACHED_DIR);
+const U_ICON = "UIcon";
 
 let isDebug = false;
 let isVuelessEnv = false;
-let isDefaultMode = false;
 let isStorybookMode = false;
 let isVuelessIconsMode = false;
-let cachedIconsDir = CACHED_ICONS_DIR;
+let cacheIconsPath = CACHED_ICONS_DIR;
 
-// perform icons copy magick... ✨
-export async function copyIcons({ mode = "", env, debug, targetFiles = [] } = {}) {
+/**
+ * Dynamically find icons across the project and cache it.
+ * Icons cache magick happens here... ✨
+ * @param {string} mode
+ * @param {string} env
+ * @param {boolean} debug
+ * @param {Array} targetFiles
+ */
+export async function cacheIcons({ mode, env, debug, targetFiles = [] } = {}) {
   isDebug = debug || false;
   isVuelessEnv = env === "vueless";
-  isDefaultMode = mode === "";
   isStorybookMode = mode === "storybook";
   isVuelessIconsMode = mode === "vuelessIcons";
+  cacheIconsPath = CACHED_ICONS_DIR;
 
-  /* Copy icons which using in vueless components to the cache (vueless env only). */
-  if (isVuelessEnv && fs.existsSync(DEFAULT_ICONS_LOCAL_DIR)) {
-    await cp(DEFAULT_ICONS_LOCAL_DIR, CACHED_ICONS_DIR, { recursive: true });
+  if (isVuelessIconsMode && isVuelessEnv) {
+    cacheIconsPath = DEFAULT_ICONS_LOCAL_DIR;
   }
 
-  /* Copy icons which using in vueless components to the cache. */
-  if (!isVuelessEnv && fs.existsSync(DEFAULT_ICONS_DIR)) {
-    await cp(DEFAULT_ICONS_DIR, CACHED_ICONS_DIR, { recursive: true });
-  }
+  const exclude = isStorybookMode ? [] : ["/stories.js", "/stories.ts", ".d.ts"];
 
-  if (isVuelessIconsMode && isVuelessEnv) cachedIconsDir = DEFAULT_ICONS_LOCAL_DIR;
-  if (isStorybookMode && isVuelessEnv) cachedIconsDir = CACHED_ICONS_DIR;
+  const vueFiles = targetFiles.map((componentPath) => getDirFiles(componentPath, ".vue"));
+  const jsFiles = targetFiles.map((jsFilePath) => getDirFiles(jsFilePath, ".js", { exclude }));
+  const tsFiles = targetFiles.map((tsFilePath) => getDirFiles(tsFilePath, ".ts", { exclude }));
 
-  if (isStorybookMode) {
-    const storybookStoriesJs = await getDirFiles("src", STORYBOOK_STORY_EXTENSIONS[0]);
-    const storybookStoriesTs = await getDirFiles("src", STORYBOOK_STORY_EXTENSIONS[1]);
+  const iconFiles = await Promise.all([...vueFiles, ...jsFiles, ...tsFiles]);
 
-    findAndCopyIcons([...storybookStoriesJs, ...storybookStoriesTs]);
-  }
+  findAndCopyIcons([
+    ...iconFiles.flat(),
+    `${VUELESS_CONFIG_FILE_NAME}.js`,
+    `${VUELESS_CONFIG_FILE_NAME}.ts`,
+  ]);
 
-  if (isVuelessIconsMode || isDefaultMode || isStorybookMode) {
-    const vueFiles = targetFiles.map((componentPath) => getDirFiles(componentPath, ".vue"));
+  if (isVuelessIconsMode) {
+    await copyVuelessIconsIntoCache(isVuelessEnv);
+  }
+}
 
-    const jsFiles = targetFiles.map((jsFilePath) =>
-      getDirFiles(jsFilePath, ".js", { exclude: [STORYBOOK_STORY_EXTENSIONS[0]] }),
-    );
+/**
+ * Remove cached icons.
+ * @param {string} mirrorCacheDir
+ * @param {boolean} debug
+ * @returns {Promise<void>}
+ */
+export async function removeIconsCache(mirrorCacheDir, debug) {
+  if (fs.existsSync(cacheIconsPath)) {
+    await rm(cacheIconsPath, { recursive: true, force: true });
+  }
 
-    const tsFiles = targetFiles.map((tsFilePath) =>
-      getDirFiles(tsFilePath, ".ts", { exclude: [STORYBOOK_STORY_EXTENSIONS[1], ".d.ts"] }),
-    );
+  if (mirrorCacheDir) {
+    const mirrorCacheIconsPath = path.join(cwd, mirrorCacheDir, ICONS_DIR);
 
-    const iconFiles = await Promise.all([...vueFiles, ...jsFiles, ...tsFiles]);
+    if (fs.existsSync(mirrorCacheIconsPath)) {
+      await rm(mirrorCacheIconsPath, { recursive: true, force: true });
+    }
+  }
 
-    findAndCopyIcons([
-      ...iconFiles.flat(),
-      `${VUELESS_CONFIG_FILE_NAME}.js`,
-      `${VUELESS_CONFIG_FILE_NAME}.ts`,
-    ]);
+  if (debug) {
+    console.log("Icons cache was successfully removed.");
   }
 }
 
-export async function removeIcons({ debug }) {
-  if (!fs.existsSync(cachedIconsDir)) return;
+/**
+ * Copy cached icons in the provided folder by path.
+ * @param {string} mirrorCacheDir
+ * @param {boolean} debug
+ * @returns {Promise<void>}
+ */
+export async function copyIconsCache(mirrorCacheDir, debug) {
+  const cachePath = path.join(cwd, VUELESS_ICONS_CACHED_DIR);
 
-  await rm(cachedIconsDir, { recursive: true, force: true });
+  if (mirrorCacheDir && fs.existsSync(cachePath)) {
+    await cp(cachePath, path.join(cwd, mirrorCacheDir, ICONS_DIR), { recursive: true });
+  }
 
   if (debug) {
-    console.log("Dynamically copied icons was successfully removed.");
+    console.log(`Vueless cached icons was successfully copied into: ${mirrorCacheDir}.`);
+  }
+}
+
+/**
+ * Copy icons which using in vueless components to the cache.
+ * @param {boolean} isVuelessEnv
+ * @returns {Promise<void>}
+ */
+async function copyVuelessIconsIntoCache(isVuelessEnv) {
+  if (isVuelessEnv && fs.existsSync(DEFAULT_ICONS_LOCAL_DIR)) {
+    await cp(DEFAULT_ICONS_LOCAL_DIR, CACHED_ICONS_DIR, {
+      recursive: true,
+    });
+  }
+
+  if (!isVuelessEnv && fs.existsSync(DEFAULT_ICONS_DIR)) {
+    await cp(DEFAULT_ICONS_DIR, CACHED_ICONS_DIR, {
+      recursive: true,
+    });
   }
 }
 
+/**
+ * Scan the project for icon names and copy found icons to the cache.
+ * @param {Array} files
+ */
 function findAndCopyIcons(files) {
-  const defaults = getMergedConfig();
-  const safelistIcons = getSafelistIcons();
+  const defaults = getDefaults();
+  const safelistIcons = vuelessConfig.component?.[U_ICON]?.safelistIcons;
 
-  safelistIcons.forEach((iconName) => {
-    copyFile(iconName, false);
-    copyFile(iconName, true);
+  safelistIcons?.forEach((iconName) => {
+    copyIcon(iconName, defaults);
   });
 
   files.forEach((file) => {
@@ -114,7 +162,7 @@ function findAndCopyIcons(files) {
 
         try {
           if (iconName) {
-            copyFile(iconName);
+            copyIcon(iconName, defaults);
           }
         } catch (error) {
           isDebug && console.log(error);
@@ -137,103 +185,127 @@ function findAndCopyIcons(files) {
       try {
         if (!iconName) return;
 
-        if (iconName?.includes("?")) {
+        if (iconName?.includes("?") && iconName?.includes(":")) {
           const [trueName, falseName] = getTernaryValues(iconName);
 
-          copyFile(trueName);
-          copyFile(falseName);
+          copyIcon(trueName, defaults);
+          copyIcon(falseName, defaults);
         } else {
-          copyFile(iconName);
+          copyIcon(iconName, defaults);
         }
       } catch (error) {
         isDebug && console.log(error);
       }
     }
   });
+}
 
-  function getTernaryValues(expression) {
-    const [, values] = expression
-      .replace(/\s/g, "") // newlines and spaces
-      .replace(/\?\./g, "") // conditional chaining `?.`
-      .replace(/['"]/g, "") // single and double quotes
-      .split("?");
+/**
+ * Retrieve values from ternary of strings.
+ * @param {string} expression
+ * @returns {Array} of ternary values
+ */
+function getTernaryValues(expression) {
+  const [, values] = expression
+    .replace(/\s/g, "") // newlines and spaces
+    .replace(/\?\./g, "") // conditional chaining `?.`
+    .replace(/['"]/g, "") // single and double quotes
+    .split("?");
 
-    const [trueValue, falseValue] = values.split(":");
+  const [trueValue, falseValue] = values.split(":");
 
-    return [trueValue, falseValue];
-  }
+  return [trueValue, falseValue];
+}
 
-  function copyFile(name) {
-    name = name.toLowerCase();
+/**
+ * Copy icon from icon package into cache folder.
+ * @param {string} name
+ * @param {object} defaults
+ */
+function copyIcon(name, defaults) {
+  name = name.toLowerCase();
 
-    const iconNameRegex = /^[a-z0-9_-]+$/;
+  const iconNameRegex = /^[a-z0-9_-]+$/;
 
-    /* Filter irrelevant icon name cases. */
-    if (!iconNameRegex.test(name)) {
-      return;
-    }
+  /* Stop the scrypt if the icon name is irrelevant. */
+  if (!iconNameRegex.test(name)) {
+    return;
+  }
 
-    const library = defaults.library;
-    const weight = defaults.weight;
-    const style = defaults.style;
-
-    const require = createRequire(import.meta.url);
-
-    /* eslint-disable vue/max-len, prettier/prettier */
-    const libraries = {
-      vueless: {
-        // @material-symbols icons which used across the components.
-        source: `${process.cwd()}/node_modules/${library}/svg-${weight}/${style}/${name}.svg`,
-        destination: `${cachedIconsDir}/${name}.svg`
-      },
-      "@material-symbols": {
-        source: `${process.cwd()}/node_modules/${library}/svg-${weight}/${style}/${name}.svg`,
-        destination: `${cachedIconsDir}/${library}/svg-${weight}/${style}/${name}.svg`
-      },
-      "bootstrap-icons": {
-        source: `${process.cwd()}/node_modules/${library}/icons/${name}.svg`,
-        destination: `${cachedIconsDir}/${library}/icons/${name}.svg`
-      },
-      heroicons: {
-        source: `${process.cwd()}/node_modules/${library}/24/${name.endsWith("-fill") ? "solid" : "outline"}/${name}.svg`,
-        destination: `${cachedIconsDir}/24/${style}/${name.endsWith("-fill") ? "solid" : "outline"}/${name}.svg`
-      }
-    };
-    /* eslint-enable vue/max-len, prettier/prettier */
+  const { source, destination } = getIconLibraryPaths(name, defaults);
 
-    const { source, destination } =
-      libraries[isVuelessIconsMode && isVuelessEnv ? "vueless" : library];
+  if (!fs.existsSync(source) || fs.existsSync(destination)) {
+    return;
+  }
 
-    if (fs.existsSync(destination) || !fs.existsSync(source)) return;
+  const require = createRequire(import.meta.url);
+  const destDir = path.dirname(destination);
 
-    const destDir = path.dirname(destination);
+  fs.mkdirSync(destDir, {
+    recursive: true,
+  });
 
-    fs.mkdirSync(destDir, { recursive: true });
-    fs.copyFile(require.resolve(source), destination, (error) => {
-      if (isDebug) {
-        error
-          ? console.error(`Error copying icon "${name}":`, error)
-          : console.log(`Icon "${name}" copied successfully!`);
-      }
-    });
-  }
+  fs.copyFile(require.resolve(source), destination, (error) => {
+    if (isDebug) {
+      error
+        ? console.error(`Error copying icon "${name}":`, error)
+        : console.log(`Icon "${name}" copied successfully!`);
+    }
+  });
 }
 
-function getSafelistIcons() {
-  return vuelessConfig.component
-    ? vuelessConfig.component[ICON_COMPONENT_NAME]?.safelistIcons || []
-    : [];
+/**
+ * Build a path to the icon source in the selected icon library and cache destination path.
+ * @param {string} name
+ * @param {object} defaults
+ * @returns {source: string, destination: string}
+ */
+function getIconLibraryPaths(name, defaults) {
+  const library = defaults.library;
+  const weight = defaults.weight;
+  const style = defaults.style;
+
+  /* eslint-disable prettier/prettier, vue/max-len */
+  const libraries = {
+    [VUELESS_LIBRARY]: {
+      // @material-symbols icons which used across the components.
+      source: `${cwd}/node_modules/${library}/svg-${weight}/${style}/${name}.svg`,
+      destination: `${cacheIconsPath}/${VUELESS_LIBRARY}/${name}.svg`
+    },
+    "@material-symbols": {
+      source: `${cwd}/node_modules/${library}/svg-${weight}/${style}/${name}.svg`,
+      destination: `${cacheIconsPath}/${library}/svg-${weight}/${style}/${name}.svg`
+    },
+    "bootstrap-icons": {
+      source: `${cwd}/node_modules/${library}/icons/${name}.svg`,
+      destination: `${cacheIconsPath}/${library}/icons/${name}.svg`
+    },
+    "heroicons": {
+      source: `${cwd}/node_modules/${library}/24/${name.endsWith("-fill") ? "solid" : "outline"}/${name}.svg`,
+      destination: `${cacheIconsPath}/${library}/24/${style}/${name.endsWith("-fill") ? "solid" : "outline"}/${name}.svg`
+    }
+  };
+  /* eslint-enable prettier/prettier, vue/max-len */
+
+  const libraryName = isVuelessIconsMode && isVuelessEnv ? VUELESS_LIBRARY : library;
+
+  return libraries[libraryName];
 }
 
-function getMergedConfig() {
-  const defaultConfigPath = (isVuelessEnv ? "src/" : "node_modules/vueless/") + ICON_CONFIG_PATH;
+/**
+ * Merge global and local defaults config for UIcon.
+ * @returns {Object}
+ */
+function getDefaults() {
+  const defaultIconsDir = isVuelessEnv ? VUELESS_LOCAL_DIR : VUELESS_DIR;
+  const defaultConfigPath = path.join(cwd, defaultIconsDir, COMPONENTS[U_ICON], "config.ts");
 
   if (fs.existsSync(defaultConfigPath)) {
     const defaultConfigFile = fs.readFileSync(defaultConfigPath).toString();
 
-    const defaultConfig = getDefaultConfigJson(defaultConfigFile);
-    const globalConfig = vuelessConfig.component && vuelessConfig.component[ICON_COMPONENT_NAME];
-
-    return merge(globalConfig?.defaults || {}, defaultConfig.defaults);
+    return merge(
+      getDefaultConfigJson(defaultConfigFile)?.defaults,
+      vuelessConfig?.component?.[U_ICON]?.defaults,
+    );
   }
 }

package/utils/node/loaderSvg.js

@@ -25,7 +25,7 @@ export async function loadSvg(id, options) {
   svgPath = svgPath.replace("/__skip_vite/", "");
 
   // use default svg loader
-  if (importType === "url" && !svgPath.includes(".generated")) {
+  if (importType === "url") {
     return;
   }
 
@@ -36,11 +36,11 @@ export async function loadSvg(id, options) {
 
   try {
     svg = await fs.promises.readFile(svgPath, "utf-8");
-  } catch {
+  } catch (error) {
     // define an empty svg to prevent a UI crash.
     svg = `<svg xmlns="http://www.w3.org/2000/svg"></svg>`;
     // eslint-disable-next-line no-console
-    console.warn("\n", `${id} couldn't be loaded by vueless vite plugin.`);
+    console.warn(`${svgPath} couldn't be loaded by vueless vite plugin.`, "\n", error);
   }
 
   if (importType === "raw") {

package/utils/node/vuelessConfig.js

@@ -2,7 +2,7 @@ import fs from "node:fs";
 import path from "node:path";
 import esbuild from "esbuild";
 
-import { CACHE_PATH, VUELESS_CONFIG_FILE_NAME } from "../../constants.js";
+import { VUELESS_CACHE_DIR, VUELESS_CONFIG_FILE_NAME } from "../../constants.js";
 
 /**
  * Load Vueless config from the project root.
@@ -13,7 +13,10 @@ export let vuelessConfig = {};
 (async () => {
   const configPathJs = path.join(process.cwd(), `${VUELESS_CONFIG_FILE_NAME}.js`);
   const configPathTs = path.join(process.cwd(), `${VUELESS_CONFIG_FILE_NAME}.ts`);
-  const configOutPath = path.join(process.cwd(), `${CACHE_PATH}/${VUELESS_CONFIG_FILE_NAME}.mjs`);
+  const configOutPath = path.join(
+    process.cwd(),
+    `${VUELESS_CACHE_DIR}/${VUELESS_CONFIG_FILE_NAME}.mjs`,
+  );
 
   if (!fs.existsSync(configPathJs) && !fs.existsSync(configPathTs)) {
     vuelessConfig = {};

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.490",
+  "version": "0.0.492",
   "contributions": {
     "html": {
       "description-markup": "markdown",