From b1443be414ab8e0b5bafc4a6dd5ac8ab4a599af7 Mon Sep 17 00:00:00 2001 From: "bert.hausmans" Date: Tue, 12 May 2026 07:45:50 +0200 Subject: [PATCH] fix(iconify): bootstrap Tabler icon set at runtime for @iconify/vue MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The PrimeVue side of the parallel-mode app renders icons via @iconify/vue's component (src/components/Icon.vue). At runtime @iconify/vue resolves an icon name like "tabler-eye" by looking up its data in the in-memory icon registry; on a miss it falls back to fetching https://api.iconify.design/tabler/eye.json. The CSP blocks that origin, so every Tabler icon used in AppShell, SidebarHeader, SidebarUserCard, and the migrated login form rendered as an empty . New plugins/iconify.ts loads the full Tabler set (@iconify-json/tabler/icons.json, already in package.json as 1.2.23) and registers it via addCollection() at module-load time. main.ts side-effect-imports it before any other import so the registry is warm before the first Icon mounts. This is a NEW concern, separate from the existing plugins/iconify/ (index.ts + icons.css) which generates Vuexy-style i-tabler-* CSS classes for Vuetify's VIcon adapter. The two systems must coexist during F3–F6 parallel mode; the legacy directory can be deleted alongside Vuetify when F6 lands. Bundle cost: ~1.9 MB uncompressed JSON, ~400 KB gzipped in the main chunk. Per-icon imports are a future optimisation. Co-Authored-By: Claude Opus 4.7 (1M context) --- apps/app/src/main.ts | 6 ++++++ apps/app/src/plugins/iconify.ts | 24 ++++++++++++++++++++++++ 2 files changed, 30 insertions(+) create mode 100644 apps/app/src/plugins/iconify.ts diff --git a/apps/app/src/main.ts b/apps/app/src/main.ts index 04ebec50..8b66ae9e 100644 --- a/apps/app/src/main.ts +++ b/apps/app/src/main.ts @@ -1,3 +1,9 @@ +// Iconify-Tabler runtime data — side-effect import must run before any +// component renders an Icon, so the @iconify/vue runtime resolves +// names locally instead of falling back to the api.iconify.design CDN +// (blocked by our CSP). See plugins/iconify.ts for the bootstrap. +import '@/plugins/iconify' + import { createApp } from 'vue' import { VueQueryPlugin } from '@tanstack/vue-query' import { queryClientConfig } from '@/lib/query-client' diff --git a/apps/app/src/plugins/iconify.ts b/apps/app/src/plugins/iconify.ts new file mode 100644 index 00000000..f9417dec --- /dev/null +++ b/apps/app/src/plugins/iconify.ts @@ -0,0 +1,24 @@ +// Iconify-Tabler runtime bootstrap — introduced in F3.5 to make +// @iconify/vue's render real SVG paths from local data instead +// of fetching individual icons from https://api.iconify.design/ at +// runtime. The CSP blocks that origin, so the previous behaviour was +// an empty for every Tabler icon used +// in the PrimeVue side of the parallel-mode app. +// +// This file is a separate concern from src/plugins/iconify/index.ts + +// icons.css, which exists to serve the Vuetify side: Vuexy's @core +// `` adapter renders via the i-tabler-* CSS +// classes those files inject, and Vuetify never touches the @iconify +// /vue runtime. The two systems must coexist until F6 retires +// Vuetify, after which the legacy plugins/iconify/ directory can be +// deleted alongside it. +// +// Imported as a side effect at the top of main.ts, so addCollection +// runs before any component renders an Icon. The whole Tabler set +// (~1.9 MB uncompressed JSON / ~400 KB gzipped) is loaded eagerly; +// per-icon imports are a future optimisation, not in F3.5 scope. + +import { addCollection } from '@iconify/vue' +import tablerIcons from '@iconify-json/tabler/icons.json' + +addCollection(tablerIcons)