How to bundle default Nuxt UI icons (proper offline icons) with Vite?

[KazimirPodolski]

Package

v4.x

Description

AFAIK none of currently closed issues resolve the problem in general case, so please let me reiterate it once again.

How to have default icons (like the chevron-down on USelect) bundled with the app in Vue/Vite mode? NOT online, NOT bundling the full icons set, just like it's 2020 and all that icons servers thing didn't happen.

I'm developing an app which will have to work offline, and online icons are just not viable. For my own icons I just use tiny Vue wrapper components, so everything is bundled just perfect. But how to deal with Nuxt UI's default icons choices?

[al1maher]

In your nuxt.config.ts

  icon: {
    clientBundle: {
      scan: true,
      icons: ['lucide:chevron-down'] // Here include list of internal icons but has to be in the format: prefix:icon
    },
    serverBundle: false
  }

You also have to install it locally,
in your package.json

"devDependencies": {
      "@iconify-json/lucide": "^1.2.66",
  }

Note that mine is a pure SPA, ssr:false.

[KazimirPodolski]

@al1maher I don't have a nuxt.config.ts as I'm using Vue with Vite only.

[Smart-Ace-Designs]

Would adding to vite.config.ts work?

plugins: [
    vue(),
    ui({
      ui: {
        icon: {
          clientBundle: {
            scan: true,
            icons: ["lucide:chevron-down"], // Here include list of internal icons but has to be in the format: prefix:icon
          },
          serverBundle: false,
        },
      },
    }),
    vueDevTools(),
  ],

I found a similar example:
https://ui.nuxt.com/docs/getting-started/integrations/icons/vue#theme

[KazimirPodolski]

@Smart-Ace-Designs It doesn't seem to work - the icon is still being loaded. And the key icon is not declared there on AppConfigUI, so I assume it's ignored in Vite setup.

[KazimirPodolski]

Possible work-aroud could have been just replacing every default icon prop/slot in every component with my own icon component (which is bundled by Vite however I want), but due to lack of default props configuration it would require replacing icons in every usage of a Nuxt UI component. Which is just not a viable thing to do.

[al1maher]

Would adding to vite.config.ts work?

plugins: [
vue(),
ui({
ui: {
icon: {
clientBundle: {
scan: true,
icons: ["lucide:chevron-down"], // Here include list of internal icons but has to be in the format: prefix:icon
},
serverBundle: false,
},
},
}),
vueDevTools(),
],

I found a similar example: https://ui.nuxt.com/docs/getting-started/integrations/icons/vue#theme

I don't think this would work as it's config for nuxt/icon

[rijenkii]

I do something like the following, but can't say that I enjoy the experience. It was cobbled together in kind of a rush, so maybe not the most efficient and/or pretty solution. Requires unplugin-icons.

vite.config.ts

export default defineConfig({
  plugins: [
    ui({
      ui: {
        icons: {
          arrowDown: 'i-local-arrow-down',
          arrowLeft: 'i-local-arrow-left',
          arrowRight: 'i-local-arrow-right',
          arrowUp: 'i-local-arrow-up',
          caution: 'i-local-circle-alert',
          check: 'i-local-check',
          chevronDoubleLeft: 'i-local-chevrons-left',
          chevronDoubleRight: 'i-local-chevrons-right',
          chevronDown: 'i-local-chevron-down',
          chevronLeft: 'i-local-chevron-left',
          chevronRight: 'i-local-chevron-right',
          chevronUp: 'i-local-chevron-up',
          close: 'i-local-x',
          copy: 'i-local-copy',
          copyCheck: 'i-local-copy-check',
          dark: 'i-local-moon',
          ellipsis: 'i-local-ellipsis',
          error: 'i-local-circle-x',
          external: 'i-local-arrow-up-right',
          eye: 'i-local-eye',
          eyeOff: 'i-local-eye-off',
          file: 'i-local-file',
          folder: 'i-local-folder',
          folderOpen: 'i-local-folder-open',
          hash: 'i-local-hash',
          info: 'i-local-info',
          light: 'i-local-sun',
          loading: 'i-local-loader-circle',
          menu: 'i-local-menu',
          minus: 'i-local-minus',
          panelClose: 'i-local-panel-left-close',
          panelOpen: 'i-local-panel-left-open',
          plus: 'i-local-plus',
          reload: 'i-local-rotate-ccw',
          search: 'i-local-search',
          stop: 'i-local-square',
          success: 'i-local-circle-check',
          system: 'i-local-monitor',
          tip: 'i-local-lightbulb',
          upload: 'i-local-upload',
          warning: 'i-local-triangle-alert',
        },
      },
    }),
  ],
});

main.ts

import IconLucideArrowDown from '~icons/lucide/arrow-down?raw';
import IconLucideArrowLeft from '~icons/lucide/arrow-left?raw';
import IconLucideArrowRight from '~icons/lucide/arrow-right?raw';
import IconLucideArrowUp from '~icons/lucide/arrow-up?raw';
import IconLucideCircleAlert from '~icons/lucide/circle-alert?raw';
import IconLucideCheck from '~icons/lucide/check?raw';
import IconLucideChevronsLeft from '~icons/lucide/chevrons-left?raw';
import IconLucideChevronsRight from '~icons/lucide/chevrons-right?raw';
import IconLucideChevronDown from '~icons/lucide/chevron-down?raw';
import IconLucideChevronLeft from '~icons/lucide/chevron-left?raw';
import IconLucideChevronRight from '~icons/lucide/chevron-right?raw';
import IconLucideChevronUp from '~icons/lucide/chevron-up?raw';
import IconLucideX from '~icons/lucide/x?raw';
import IconLucideCopy from '~icons/lucide/copy?raw';
import IconLucideCopyCheck from '~icons/lucide/copy-check?raw';
import IconLucideMoon from '~icons/lucide/moon?raw';
import IconLucideEllipsis from '~icons/lucide/ellipsis?raw';
import IconLucideCircleX from '~icons/lucide/circle-x?raw';
import IconLucideArrowUpRight from '~icons/lucide/arrow-up-right?raw';
import IconLucideEye from '~icons/lucide/eye?raw';
import IconLucideEyeOff from '~icons/lucide/eye-off?raw';
import IconLucideFile from '~icons/lucide/file?raw';
import IconLucideFolder from '~icons/lucide/folder?raw';
import IconLucideFolderOpen from '~icons/lucide/folder-open?raw';
import IconLucideHash from '~icons/lucide/hash?raw';
import IconLucideInfo from '~icons/lucide/info?raw';
import IconLucideSun from '~icons/lucide/sun?raw';
import IconLucideLoaderCircle from '~icons/lucide/loader-circle?raw';
import IconLucideMenu from '~icons/lucide/menu?raw';
import IconLucideMinus from '~icons/lucide/minus?raw';
import IconLucidePanelLeftClose from '~icons/lucide/panel-left-close?raw';
import IconLucidePanelLeftOpen from '~icons/lucide/panel-left-open?raw';
import IconLucidePlus from '~icons/lucide/plus?raw';
import IconLucideRotateCcw from '~icons/lucide/rotate-ccw?raw';
import IconLucideSearch from '~icons/lucide/search?raw';
import IconLucideSquare from '~icons/lucide/square?raw';
import IconLucideCircleCheck from '~icons/lucide/circle-check?raw';
import IconLucideMonitor from '~icons/lucide/monitor?raw';
import IconLucideLightbulb from '~icons/lucide/lightbulb?raw';
import IconLucideUpload from '~icons/lucide/upload?raw';
import IconLucideTriangleAlert from '~icons/lucide/triangle-alert?raw';

import { addCollection, type IconifyIcon } from "@iconify/vue";

function rawIconToIconify(icon: string): IconifyIcon {
  const parent = document.createElement("div");
  parent.innerHTML = icon;
  const svg = parent.querySelector("svg");
  if (!svg) {
    throw new Error("unable to find svg in icon");
  }
  parent.remove();

  return {
    body: svg.innerHTML,
    top: svg.viewBox.baseVal.y,
    left: svg.viewBox.baseVal.x,
    width: svg.viewBox.baseVal.width,
    height: svg.viewBox.baseVal.height,
  };
}

addCollection({
  prefix: "local",
  icons: {
    'arrow-down': rawIconToIconify(IconLucideArrowDown as unknown as string),
    'arrow-left': rawIconToIconify(IconLucideArrowLeft as unknown as string),
    'arrow-right': rawIconToIconify(IconLucideArrowRight as unknown as string),
    'arrow-up': rawIconToIconify(IconLucideArrowUp as unknown as string),
    'circle-alert': rawIconToIconify(IconLucideCircleAlert as unknown as string),
    'check': rawIconToIconify(IconLucideCheck as unknown as string),
    'chevrons-left': rawIconToIconify(IconLucideChevronsLeft as unknown as string),
    'chevrons-right': rawIconToIconify(IconLucideChevronsRight as unknown as string),
    'chevron-down': rawIconToIconify(IconLucideChevronDown as unknown as string),
    'chevron-left': rawIconToIconify(IconLucideChevronLeft as unknown as string),
    'chevron-right': rawIconToIconify(IconLucideChevronRight as unknown as string),
    'chevron-up': rawIconToIconify(IconLucideChevronUp as unknown as string),
    'x': rawIconToIconify(IconLucideX as unknown as string),
    'copy': rawIconToIconify(IconLucideCopy as unknown as string),
    'copy-check': rawIconToIconify(IconLucideCopyCheck as unknown as string),
    'moon': rawIconToIconify(IconLucideMoon as unknown as string),
    'ellipsis': rawIconToIconify(IconLucideEllipsis as unknown as string),
    'circle-x': rawIconToIconify(IconLucideCircleX as unknown as string),
    'arrow-up-right': rawIconToIconify(IconLucideArrowUpRight as unknown as string),
    'eye': rawIconToIconify(IconLucideEye as unknown as string),
    'eye-off': rawIconToIconify(IconLucideEyeOff as unknown as string),
    'file': rawIconToIconify(IconLucideFile as unknown as string),
    'folder': rawIconToIconify(IconLucideFolder as unknown as string),
    'folder-open': rawIconToIconify(IconLucideFolderOpen as unknown as string),
    'hash': rawIconToIconify(IconLucideHash as unknown as string),
    'info': rawIconToIconify(IconLucideInfo as unknown as string),
    'sun': rawIconToIconify(IconLucideSun as unknown as string),
    'loader-circle': rawIconToIconify(IconLucideLoaderCircle as unknown as string),
    'menu': rawIconToIconify(IconLucideMenu as unknown as string),
    'minus': rawIconToIconify(IconLucideMinus as unknown as string),
    'panel-left-close': rawIconToIconify(IconLucidePanelLeftClose as unknown as string),
    'panel-left-open': rawIconToIconify(IconLucidePanelLeftOpen as unknown as string),
    'plus': rawIconToIconify(IconLucidePlus as unknown as string),
    'rotate-ccw': rawIconToIconify(IconLucideRotateCcw as unknown as string),
    'search': rawIconToIconify(IconLucideSearch as unknown as string),
    'square': rawIconToIconify(IconLucideSquare as unknown as string),
    'circle-check': rawIconToIconify(IconLucideCircleCheck as unknown as string),
    'monitor': rawIconToIconify(IconLucideMonitor as unknown as string),
    'lightbulb': rawIconToIconify(IconLucideLightbulb as unknown as string),
    'upload': rawIconToIconify(IconLucideUpload as unknown as string),
    'triangle-alert': rawIconToIconify(IconLucideTriangleAlert as unknown as string),
  }
});

[alexgradov]

Also, something like this could work (just make sure the file name exactly matches the icon name that’s fetched from the CDN):

main.ts

import { addCollection } from '@iconify/vue';

// Auto-load local icons
const icons = import.meta.glob('@/assets/icons/*.json', { eager: true });

addCollection({
  prefix: '',
  icons: Object.fromEntries(
    Object.entries(icons).map(([path, icon]) => [
      path.split('/').pop()?.replace(/\.json$/i, '')?.toLowerCase(),
      icon,
    ])
  ),
});