bert.hausmans
b1443be414
The PrimeVue side of the parallel-mode app renders icons via @iconify/vue's <Icon> 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 <svg viewBox="0 0 16 16"></svg>. 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) <noreply@anthropic.com>
25 lines
1.2 KiB
TypeScript
25 lines
1.2 KiB
TypeScript
// Iconify-Tabler runtime bootstrap — introduced in F3.5 to make
|
|
// @iconify/vue's <Icon> 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 <svg viewBox="0 0 16 16"></svg> 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
|
|
// `<VIcon icon="tabler-X" />` 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)
|