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)