💡 前言:在这个扁平化(Flat Design)统治的时代,你是否厌倦了千篇一律的 Material Design 和 Ant Design?在这个追求个性的 Web 3.0 前夜,我们的应用界面是否也能拥有 "赛博朋克 2077" 般的视觉冲击力?今天,我要给大家介绍一个 颜控开发者 必备的 UniApp 插件 ——
icon-cyberpunk。
💥 为什么造这个轮子?
作为一个前端的 "切图仔",每当接到 UI 设计稿时,内心总是毫无波澜:灰色的线框、单调的矢量图标...
"不够酷!不够未来!"
市面上的图标库大多追求通用性,牺牲了视觉表现力。而赛博朋克(Cyberpunk)风格独特的霓虹光感、高对比度和科技质感,恰恰能给用户带来沉浸式的体验。
于是,Icon-Cyberpunk 诞生了。它不仅仅是一个图标库,更是一次对未来 UI 风格的探索。
✨ 核心亮点:始于颜值,忠于性能
1. 🎨 2100+ 高清图标,量大管饱
这不是简单的 SVG 变色,每一个图标都经过精心设计的发光效果。覆盖了 2100+ 个常用场景(主页、设置、用户、电商、工具等)。 无论是在深色模式(Dark Mode)下,还是在极客风的 Dashboard 中,它们都能瞬间点亮你的页面。
2. ⚡️ 黑科技加持:WebP + Sprite Sheet
很多人会问:“这么多高清带特效的图标,会不会卡死?” 不但不卡,反而更快!
我们采用了游戏开发中常用的 雪碧图(Sprite Sheet) 技术,结合新一代图片格式 WebP:
- HTTP 请求骤降:几百个图标合并为一张图,加载只需一次请求。
- 体积极致压缩:WebP 格式在保持光效透明度的同时,体积比 PNG 小 40% 以上。
- GPU 渲染友好:利用 CSS
background-position定位,渲染性能极佳。
3. 🔧 傻瓜式接入 (UniApp / Vue)
基于 uni_modules 规范,拒绝繁琐配置。
<!-- 就像使用原生标签一样简单 -->
<icon-cyberpunk name="search"></icon-cyberpunk>
<!-- 想要大一点? -->
<icon-cyberpunk name="home" size="64"></icon-cyberpunk>
<!-- 加上交互 -->
<icon-cyberpunk name="settings" @click="openSettings"></icon-cyberpunk>
4. 🤏 极致的体积控制 (Lite 版)
针对微信小程序等对包体积敏感的平台,我们不仅提供了 Lite 版,还配套了 在线图标选择器。 你可以像去超市购物一样,只挑选你项目用到的那 10 个图标,打包生成专属的 Sprite 图和 CSS。 按需加载,绝不浪费 1KB 用户流量。
🌌 我们的愿景 (画饼时间 🥞)
icon-cyberpunk 只是一个开始,我们有一个宏大的 "未来 UI 计划":
- 多端框架支持:不仅是 UniApp,未来我们计划适配 React Native, Flutter 甚至 Electron。让你的桌面应用也能拥有 Jarvis 般的界面。
- 动态可配置主题:目前是经典的 "赛博蓝/粉",未来我们将引入 "主题引擎",支持蒸汽波(Vaporwave)、暗黑哥特(Gothic)等多种风格一键切换。
- AI 智能 UI 生成:结合大模型,根据你的文字描述(例如:"我想要一个 2077 年夜之城风格的登录页"),自动从库中匹配图标并生成布局代码。(已经在路上了,敬请期待!🚀)
- 构建设计师生态:开放贡献平台,让全球的设计师都能上传自己的 "未来风格" 资产,打造最大的 AGI 时代 UI 资产库。
🚀 立即体验
别让你的创意被平庸的组件库束缚。现在的应用不仅要好用,更要好看。
👉 插件市场下载:DCloud 插件市场链接
👉 GitHub/项目主页:Github/AgicodeHub 链接
👉 在线图标预览:Agicodehub 预览
最后,送给所有开发者一句话:
如果你觉得这个项目够酷,欢迎 点赞、评论、转发 三连!你的支持是我们持续发电的动力!⚡️⚡️⚡️