前端【免费下载链接】BewlyBewlyJust make a few small changes to your Bilibili homepage. (English | 简体中文 | 正體中文 | 廣東話)项目地址https://gitcode.com/gh_mirrors/be/BewlyBewly点击查看免费下载导读本篇技术指南聚焦 BewlyBewly 仓库中 src/components/README.md 所定义的组件图标使用规范项目借助 Iconify 的开放图标生态在 Vue 组件中按需引用任意图标集的图标并通过打包器插件保证只用到的图标才进入产物。读完本文你将掌握iconify/vue运行时组件、i-前缀的 UnoCSS 原子类、以及iconify/jsonpresetIcons的按需编译原理并能在自己开发的 BewlyBewly 组件或类似 Vue 项目中直接复用这套图标方案。一、原文档核心要点一句话的图标使用约定src/components/README.md全文极其精简但信息密度集中其核心结论可归纳为三条几乎所有图标集都可用通过 Iconify 的力量mdi、mingcute、tabler、line-md、solar、uil等数十个开源图标集均可直接使用无需为每个图标集单独安装前端运行时依赖。按需打包项目只会打包你用到的图标It will only bundle the icons you use避免把整个图标集例如iconify/json中动辄数万枚图标全部塞进扩展产物。工具链支撑按需能力来自vite-plugin-iconsantfu 系插件这类打包器插件在本仓库中对应为 UnoCSS 的presetIcons预设。这三条约定贯穿了整个src/components/目录的图标使用实践下面结合仓库源码逐条展开验证与实操。二、运行时组件方案iconify/vue的Icon组件2.1 依赖与安装在 package.json 的devDependencies中可以确认BewlyBewly 使用了两套互补的图标依赖iconify/vue^4.1.2Iconify 官方提供的 Vue 3 运行时组件通过Icon icon集合:名称按需渲染 SVGiconify/json^2.2.219包含了大量图标集的 JSON 数据源配合 UnoCSS 的presetIcons在构建期把用到的图标编译为 CSS/内联数据。仓库源码不直接依赖某个具体图标集的前端包如mdi/js、material-design-icons/svg这正是 Iconify 模式的典型特征数据与渲染解耦。2.2 使用示例回到顶部/刷新按钮src/components/BackToTopOrRefreshButton.vue 是最直观的用法示例script setup langts import { Icon } from iconify/vue import Button from ~/components/Button.vue import { useBewlyApp } from ~/composables/useAppProvider const emit defineEmits([refresh, backToTop]) const { reachTop } useBewlyApp() /script template Button ... clickreachTop ? emit(refresh) : emit(backToTop) Transition namefade Icon v-ifreachTop iconline-md:rotate-270 shrink-0 rotate-90 absolute text-2xl / Icon v-else iconline-md:arrow-small-up shrink-0 absolute text-2xl / /Transition /Button /template要点拆解import { Icon } from iconify/vue之后模板中直接书写Icon icon...icon属性的值采用集合前缀:图标名称格式例如line-md:arrow-small-up表示line-mdLine MD 动态线条风格图标集中的arrow-small-up图标结合v-if/v-else与 Vue 的Transition可以实现回到顶部图标 ⇄ 刷新图标的平滑淡入淡出切换iconify/vue渲染的是内联 SVG天然支持通过text-2xl这类 UnoCSS 工具类控制尺寸。2.3 更复杂的运行时案例Dock 中的主题切换动效src/components/Dock/Dock.vue 展示了Icon组件与暗色模式状态机结合的高级用法Transition namefade div v-showhoveringDockItem.themeMode absolute Icon v-ifisDark iconline-md:sunny-outline-to-moon-loop-transition / Icon v-else iconline-md:moon-alt-to-sunny-outline-loop-transition / /div /Transition Transition namefade div v-show!hoveringDockItem.themeMode absolute Icon v-ifisDark iconline-md:sunny-outline-to-moon-transition / Icon v-else iconline-md:moon-to-sunny-outline-transition / /div /Transition这里用到了line-md图标集独有的过渡动画图标-loop-transition/-transition后缀当鼠标悬浮时图标会从太阳平滑过渡到月亮或反向循环。这也印证了 README 中可以使用几乎所有图标集的能力不仅静态图标连带动效的图标同样开箱即用。在 src/components/TopBar/components/MomentsPop.vue 与 src/components/VideoCard/VideoCard.vue 中Icon iconline-md:confirm /等写法同样随处可见说明iconify/vue是src/components/下最主流的运行时图标方案。三、构建期原子类方案UnoCSSpresetIcons与i-前缀3.1 配置源头虽然 README 提到的是vite-plugin-icons但 BewlyBewly 实际使用的按需方案是UnoCSS 的presetIcons预设配置位于 unocss.config.tsimport { presetAttributify, presetIcons, presetTypography, presetUno, transformerDirectives } from unocss import { defineConfig } from unocss/vite export default defineConfig({ presets: [ presetUno(), presetAttributify(), presetIcons({ extraProperties: { display: inline-block, vertical-align: middle, width: 1.2em, height: 1.2em, }, }), presetTypography(), // ... ], })presetIcons的extraProperties为每个由原子类生成的图标统一注入了内联块布局与1.2em默认尺寸这使得所有i-图标天然对齐文本基线、随font-size缩放。同时content.pipeline.include配置**/*.{js,ts}与\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)决定了扫描哪些文件中的i-类名构建时只提取真实出现的图标。3.2 原子类写法与实战示例在组件模板中直接书写i-集合:图标名即可生成图标例如 src/components/SearchBar/SearchBar.vuediv i-tabler:search block align-middle /src/components/Settings/About/About.vue 集中展示了多图标集混用div i-tabler:brand-github / GitHub div i-tabler:brand-bilibili / Bilibili div i-tabler:brand-discord / Discord div i-tabler:brand-twitter / Twitter div i-tabler:heart / {{ $t(settings.sponsor) }}这里一口气用到了tabler、uil、mingcute、solar等多个图标集再次证明 README 所述从几乎所有图标集取用的能力。UnoCSS 在构建期会将它们转换为内联 SVG 背景或 data URI未使用的图标不会进入产物。3.3 动态图标类名把图标名放进配置数据UnoCSS 的按需扫描对静态字符串最可靠但 BewlyBewly 中多处出现图标名存于数据、运行时拼类名的场景例如 src/components/Settings/BewlyPages/BewlyPages.vue{ icon: i-mingcute:home-5-line, iconActivated: i-mingcute:home-5-fill, }, { icon: i-mingcute:search-2-line, iconActivated: i-mingcute:search-2-fill, },模板中通过:classactivePage page.value ? page.iconActivated : page.icon动态切换普通态与激活态两枚图标。这要求扫描器能索引到这些字符串——好消息是这些i-名称以完整字面量出现在script setup里UnoCSS 默认即可捕获unocss.config.ts 的 include 规则覆盖了.ts文件。同样src/components/Dock/Dock.vue 从mainStore.dockItems读取icon/iconActivated后通过:classdockItem.icon渲染配合text-xl统一尺寸设置面板的 src/components/Settings/Settings.vue 也采用i-mingcute:settings-3-line/i-mingcute:imac-line等写法管理页面图标。若图标名在纯运行时拼接产生如模板字符串拼类名则无法被静态扫描这是使用 UnoCSS 图标方案时需要避开的坑。四、两种方案的协同分工与选择建议综合源码使用情况可以总结出 BewlyBewly 的图标实践存在两条清晰的路径维度iconify/vue运行时组件UnoCSSpresetIconsi-类典型写法Icon iconline-md:rotate-270 /div i-tabler:search /依赖iconify/vuepackage.jsoniconify/jsonunocsspackage.json渲染时机运行时渲染内联 SVG构建期编译为 CSS/内联数据产物体积仅打包用到的图标数据仅生成用到的图标规则适用场景需要动态绑定icon名称、条件切换静态写死在模板中的图标、跟随字号缩放仓库示例BackToTopOrRefreshButton.vue、Dock.vueSearchBar.vue、About.vue选择建议图标名来自用户配置、接口数据或需要v-if动态切换时优先用iconify/vue的Icon图标固定出现在模板中、希望尺寸随字号弹性缩放时优先用i-集合:图标名原子类extraProperties已默认1.2em宽高两种方式都遵循按需打包可放心混用仓库中src/components/的多个组件正是二者并用。五、如何在 BewlyBewly 中新增一个使用图标的组件结合以上机制在仓库中新增组件时可按如下步骤接入图标确认图标可用在 Iconify 图标浏览器中找到目标图标记录其集合:名称如mingcute:close-line并确认iconify/json已覆盖该集合默认全量安装package.json。静态图标用原子类在模板中直接写div i-mingcute:close-line /参照 IframeDrawer.vue 中i-mingcute:external-link-line与i-mingcute:close-line的用法。动态图标用组件import { Icon } from iconify/vue再用:iconsomeVar绑定参照 VideoCard.vue 的Icon iconline-md:confirm /。统一视觉静态图标建议保留默认1.2em尺寸需要更大尺寸时叠加text-xl、text-2xl等字号类如 Dock.vue 中的text-xl图标会随字号等比缩放。本地验证运行pnpm install后执行pnpm dev见 package.json打开 Bilibili 首页查看新组件图标是否正确渲染最终产物通过pnpm buildpackage.json生成可用pnpm lintpackage.json与pnpm typecheckpackage.json做质量把关。六、按需打包原理小结回到 README 的核心承诺 It will only bundle the icons you use其落地机制可以总结为运行时路径iconify/vue从iconify/json中按icon属性的取值按需导入对应图标数据未引用的图标不会被打包进扩展构建期路径UnoCSSpresetIcons扫描content.pipeline.include匹配的源码文件unocss.config.ts仅对出现的i-集合:图标名生成样式规则数据来源统一两类方案共享iconify/json这一图标数据底座package.json因此 README 才能宣称几乎所有图标集都可以直接用而仓库无需为每个图标集引入额外运行时依赖。这套Iconify 数据 运行时组件/构建期编译双通道的设计让 BewlyBewly 在保持 UI 图标风格统一的同时将扩展产物体积控制在只用多少、打包多少的范围内值得在同类浏览器扩展与 Vue 应用中直接借鉴。赞分享前端【免费下载链接】BewlyBewlyJust make a few small changes to your Bilibili homepage. (English | 简体中文 | 正體中文 | 廣東話)项目地址https://gitcode.com/gh_mirrors/be/BewlyBewly点击查看免费下载相关推荐Iconify API终极指南如何实现200,000个图标的按需加载Iconify API终极指南如何实现200,000个图标的按需加载 Iconify是当今最强大的统一图标框架它通过智能的API按需加载机制让开发者能够轻前端UI组件PrimeVue 动态导入Dynamic Imports实战指南按需加载组件与图标PrimeVue 动态导入Dynamic Imports实战指南按需加载组件与图标 动态导入Dynamic Imports让 PrimeVue 开发者前端UI组件设计系统G-Helper AMD 降压教程Ryzen 笔记本降温省电性能几乎不损失G Helper AMD 降压教程Ryzen 笔记本降温省电性能几乎不损失 G Helper 的 AMD CPU 降压功能可以把 Ryzen 处理器的供电桌面应用系统编程上一篇approvalFlow高级技巧表单权限控制与必填节点校验的最佳实践下一篇3B参数掀起企业AI革命IBM Granite-4.0-H-Micro重新定义效率标杆创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 BewlyBewly 组件图标体系实战：基于 Iconify 与 UnoCSS 的按需图标加载指南
前端【免费下载链接】BewlyBewlyJust make a few small changes to your Bilibili homepage. (English | 简体中文 | 正體中文 | 廣東話)项目地址https://gitcode.com/gh_mirrors/be/BewlyBewly点击查看免费下载导读本篇技术指南聚焦 BewlyBewly 仓库中 src/components/README.md 所定义的组件图标使用规范项目借助 Iconify 的开放图标生态在 Vue 组件中按需引用任意图标集的图标并通过打包器插件保证只用到的图标才进入产物。读完本文你将掌握iconify/vue运行时组件、i-前缀的 UnoCSS 原子类、以及iconify/jsonpresetIcons的按需编译原理并能在自己开发的 BewlyBewly 组件或类似 Vue 项目中直接复用这套图标方案。一、原文档核心要点一句话的图标使用约定src/components/README.md全文极其精简但信息密度集中其核心结论可归纳为三条几乎所有图标集都可用通过 Iconify 的力量mdi、mingcute、tabler、line-md、solar、uil等数十个开源图标集均可直接使用无需为每个图标集单独安装前端运行时依赖。按需打包项目只会打包你用到的图标It will only bundle the icons you use避免把整个图标集例如iconify/json中动辄数万枚图标全部塞进扩展产物。工具链支撑按需能力来自vite-plugin-iconsantfu 系插件这类打包器插件在本仓库中对应为 UnoCSS 的presetIcons预设。这三条约定贯穿了整个src/components/目录的图标使用实践下面结合仓库源码逐条展开验证与实操。二、运行时组件方案iconify/vue的Icon组件2.1 依赖与安装在 package.json 的devDependencies中可以确认BewlyBewly 使用了两套互补的图标依赖iconify/vue^4.1.2Iconify 官方提供的 Vue 3 运行时组件通过Icon icon集合:名称按需渲染 SVGiconify/json^2.2.219包含了大量图标集的 JSON 数据源配合 UnoCSS 的presetIcons在构建期把用到的图标编译为 CSS/内联数据。仓库源码不直接依赖某个具体图标集的前端包如mdi/js、material-design-icons/svg这正是 Iconify 模式的典型特征数据与渲染解耦。2.2 使用示例回到顶部/刷新按钮src/components/BackToTopOrRefreshButton.vue 是最直观的用法示例script setup langts import { Icon } from iconify/vue import Button from ~/components/Button.vue import { useBewlyApp } from ~/composables/useAppProvider const emit defineEmits([refresh, backToTop]) const { reachTop } useBewlyApp() /script template Button ... clickreachTop ? emit(refresh) : emit(backToTop) Transition namefade Icon v-ifreachTop iconline-md:rotate-270 shrink-0 rotate-90 absolute text-2xl / Icon v-else iconline-md:arrow-small-up shrink-0 absolute text-2xl / /Transition /Button /template要点拆解import { Icon } from iconify/vue之后模板中直接书写Icon icon...icon属性的值采用集合前缀:图标名称格式例如line-md:arrow-small-up表示line-mdLine MD 动态线条风格图标集中的arrow-small-up图标结合v-if/v-else与 Vue 的Transition可以实现回到顶部图标 ⇄ 刷新图标的平滑淡入淡出切换iconify/vue渲染的是内联 SVG天然支持通过text-2xl这类 UnoCSS 工具类控制尺寸。2.3 更复杂的运行时案例Dock 中的主题切换动效src/components/Dock/Dock.vue 展示了Icon组件与暗色模式状态机结合的高级用法Transition namefade div v-showhoveringDockItem.themeMode absolute Icon v-ifisDark iconline-md:sunny-outline-to-moon-loop-transition / Icon v-else iconline-md:moon-alt-to-sunny-outline-loop-transition / /div /Transition Transition namefade div v-show!hoveringDockItem.themeMode absolute Icon v-ifisDark iconline-md:sunny-outline-to-moon-transition / Icon v-else iconline-md:moon-to-sunny-outline-transition / /div /Transition这里用到了line-md图标集独有的过渡动画图标-loop-transition/-transition后缀当鼠标悬浮时图标会从太阳平滑过渡到月亮或反向循环。这也印证了 README 中可以使用几乎所有图标集的能力不仅静态图标连带动效的图标同样开箱即用。在 src/components/TopBar/components/MomentsPop.vue 与 src/components/VideoCard/VideoCard.vue 中Icon iconline-md:confirm /等写法同样随处可见说明iconify/vue是src/components/下最主流的运行时图标方案。三、构建期原子类方案UnoCSSpresetIcons与i-前缀3.1 配置源头虽然 README 提到的是vite-plugin-icons但 BewlyBewly 实际使用的按需方案是UnoCSS 的presetIcons预设配置位于 unocss.config.tsimport { presetAttributify, presetIcons, presetTypography, presetUno, transformerDirectives } from unocss import { defineConfig } from unocss/vite export default defineConfig({ presets: [ presetUno(), presetAttributify(), presetIcons({ extraProperties: { display: inline-block, vertical-align: middle, width: 1.2em, height: 1.2em, }, }), presetTypography(), // ... ], })presetIcons的extraProperties为每个由原子类生成的图标统一注入了内联块布局与1.2em默认尺寸这使得所有i-图标天然对齐文本基线、随font-size缩放。同时content.pipeline.include配置**/*.{js,ts}与\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)决定了扫描哪些文件中的i-类名构建时只提取真实出现的图标。3.2 原子类写法与实战示例在组件模板中直接书写i-集合:图标名即可生成图标例如 src/components/SearchBar/SearchBar.vuediv i-tabler:search block align-middle /src/components/Settings/About/About.vue 集中展示了多图标集混用div i-tabler:brand-github / GitHub div i-tabler:brand-bilibili / Bilibili div i-tabler:brand-discord / Discord div i-tabler:brand-twitter / Twitter div i-tabler:heart / {{ $t(settings.sponsor) }}这里一口气用到了tabler、uil、mingcute、solar等多个图标集再次证明 README 所述从几乎所有图标集取用的能力。UnoCSS 在构建期会将它们转换为内联 SVG 背景或 data URI未使用的图标不会进入产物。3.3 动态图标类名把图标名放进配置数据UnoCSS 的按需扫描对静态字符串最可靠但 BewlyBewly 中多处出现图标名存于数据、运行时拼类名的场景例如 src/components/Settings/BewlyPages/BewlyPages.vue{ icon: i-mingcute:home-5-line, iconActivated: i-mingcute:home-5-fill, }, { icon: i-mingcute:search-2-line, iconActivated: i-mingcute:search-2-fill, },模板中通过:classactivePage page.value ? page.iconActivated : page.icon动态切换普通态与激活态两枚图标。这要求扫描器能索引到这些字符串——好消息是这些i-名称以完整字面量出现在script setup里UnoCSS 默认即可捕获unocss.config.ts 的 include 规则覆盖了.ts文件。同样src/components/Dock/Dock.vue 从mainStore.dockItems读取icon/iconActivated后通过:classdockItem.icon渲染配合text-xl统一尺寸设置面板的 src/components/Settings/Settings.vue 也采用i-mingcute:settings-3-line/i-mingcute:imac-line等写法管理页面图标。若图标名在纯运行时拼接产生如模板字符串拼类名则无法被静态扫描这是使用 UnoCSS 图标方案时需要避开的坑。四、两种方案的协同分工与选择建议综合源码使用情况可以总结出 BewlyBewly 的图标实践存在两条清晰的路径维度iconify/vue运行时组件UnoCSSpresetIconsi-类典型写法Icon iconline-md:rotate-270 /div i-tabler:search /依赖iconify/vuepackage.jsoniconify/jsonunocsspackage.json渲染时机运行时渲染内联 SVG构建期编译为 CSS/内联数据产物体积仅打包用到的图标数据仅生成用到的图标规则适用场景需要动态绑定icon名称、条件切换静态写死在模板中的图标、跟随字号缩放仓库示例BackToTopOrRefreshButton.vue、Dock.vueSearchBar.vue、About.vue选择建议图标名来自用户配置、接口数据或需要v-if动态切换时优先用iconify/vue的Icon图标固定出现在模板中、希望尺寸随字号弹性缩放时优先用i-集合:图标名原子类extraProperties已默认1.2em宽高两种方式都遵循按需打包可放心混用仓库中src/components/的多个组件正是二者并用。五、如何在 BewlyBewly 中新增一个使用图标的组件结合以上机制在仓库中新增组件时可按如下步骤接入图标确认图标可用在 Iconify 图标浏览器中找到目标图标记录其集合:名称如mingcute:close-line并确认iconify/json已覆盖该集合默认全量安装package.json。静态图标用原子类在模板中直接写div i-mingcute:close-line /参照 IframeDrawer.vue 中i-mingcute:external-link-line与i-mingcute:close-line的用法。动态图标用组件import { Icon } from iconify/vue再用:iconsomeVar绑定参照 VideoCard.vue 的Icon iconline-md:confirm /。统一视觉静态图标建议保留默认1.2em尺寸需要更大尺寸时叠加text-xl、text-2xl等字号类如 Dock.vue 中的text-xl图标会随字号等比缩放。本地验证运行pnpm install后执行pnpm dev见 package.json打开 Bilibili 首页查看新组件图标是否正确渲染最终产物通过pnpm buildpackage.json生成可用pnpm lintpackage.json与pnpm typecheckpackage.json做质量把关。六、按需打包原理小结回到 README 的核心承诺 It will only bundle the icons you use其落地机制可以总结为运行时路径iconify/vue从iconify/json中按icon属性的取值按需导入对应图标数据未引用的图标不会被打包进扩展构建期路径UnoCSSpresetIcons扫描content.pipeline.include匹配的源码文件unocss.config.ts仅对出现的i-集合:图标名生成样式规则数据来源统一两类方案共享iconify/json这一图标数据底座package.json因此 README 才能宣称几乎所有图标集都可以直接用而仓库无需为每个图标集引入额外运行时依赖。这套Iconify 数据 运行时组件/构建期编译双通道的设计让 BewlyBewly 在保持 UI 图标风格统一的同时将扩展产物体积控制在只用多少、打包多少的范围内值得在同类浏览器扩展与 Vue 应用中直接借鉴。赞分享前端【免费下载链接】BewlyBewlyJust make a few small changes to your Bilibili homepage. (English | 简体中文 | 正體中文 | 廣東話)项目地址https://gitcode.com/gh_mirrors/be/BewlyBewly点击查看免费下载相关推荐Iconify API终极指南如何实现200,000个图标的按需加载Iconify API终极指南如何实现200,000个图标的按需加载 Iconify是当今最强大的统一图标框架它通过智能的API按需加载机制让开发者能够轻前端UI组件PrimeVue 动态导入Dynamic Imports实战指南按需加载组件与图标PrimeVue 动态导入Dynamic Imports实战指南按需加载组件与图标 动态导入Dynamic Imports让 PrimeVue 开发者前端UI组件设计系统G-Helper AMD 降压教程Ryzen 笔记本降温省电性能几乎不损失G Helper AMD 降压教程Ryzen 笔记本降温省电性能几乎不损失 G Helper 的 AMD CPU 降压功能可以把 Ryzen 处理器的供电桌面应用系统编程上一篇approvalFlow高级技巧表单权限控制与必填节点校验的最佳实践下一篇3B参数掀起企业AI革命IBM Granite-4.0-H-Micro重新定义效率标杆创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考