refactor(nav): migrate tabler icons from CDN webfont to @tabler/icons-vue SVG - #26
Merged
Conversation
…-vue SVG bottom-nav-capsule-v3 and mobile-nav-v5 used to load the tabler-icons webfont via a runtime CDN `@import url(...)` inside scoped CSS. This was reachable-but- fragile: blocked when jsdelivr was unreachable behind a proxy, added a render- blocking cross-origin font request, and required ShadowRoot style adoption to inherit a font CSS chain. Switch both components to `@tabler/icons-vue@^3.46.0` SVG components (IconLayoutList / IconSteeringWheel / IconPackage for v3; IconHome / IconSearch / IconBell / IconHeart / IconUser for v5), rendered via `<component :is="tab.icon">`. SVG strokes use `currentColor` so existing CSS `color` rules keep working; `font-size` replaced with `width`/`height`; `line-height: 1` dropped. Net effect: - zero external CDN requests at runtime - zero font bytes in dist/assets/ - vc-bottom-nav-capsule-v3-*.css shrinks 201722 B → 1088 B (-99.5%) - lockfile +13/-141 (webfont build-toolchain removed) Verification: pnpm --filter @style-library/showcase build clean, 439/439 vitest, lint clean, scoped-id fixtures updated (LF-normalized values 03e87072 / 9cb8b630). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
改动概要
把两个导航组件 (
bottom-nav-capsule-v3/mobile-nav-v5) 从运行时 CDN webfont 切到 npm@tabler/icons-vueSVG 组件,彻底脱离 jsdelivr 外部依赖。Why
原方案在组件 scoped CSS 里写
@import url('https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3/dist/tabler-icons.min.css'),作为运行时跨域请求拉取。该方式有两类问题:@tabler/icons-webfont@^3包把所有 ~5000 个 icon 字符 + woff2/woff/ttf 全塞进单一字体,且生产dependencies包含svgtofont等构建工具链,lockfile 净增 ~141 个传递包What
@tabler/icons-vue@^3.46.0(净 +13/-141 包)<i class="ti ti-X">→<component :is="tab.icon">+Tab.icon: Component类型化引用 (IconLayoutList/IconSteeringWheel/IconPackage/IconHome/IconSearch/IconBell/IconHeart/IconUser)<i>,font-size→width/height,line-height: 1删除,color保留 (SVGstroke="currentColor"继承)@import url(...)CDN 引用apps/showcase/__tests__/scoped-id.test.ts两个 SFC 的 prod scopedId 从703dbc6e/63f19fc5改到03e87072/9cb8b630(LF 归一哈希)Net effect
vc-bottom-nav-capsule-v3-*.cssdist/assets/tabler-icons-*.woff2etc.Verification
pnpm --filter @style-library/showcase build干净pnpm exec vitest run439/439 通过pnpm lint干净03e87072/9cb8b630) CSS 与 JS 字节级对齐