分享 UniApp 2100+ 个赛博朋克图标,持续更新中

57 阅读3分钟

💡 前言:在这个扁平化(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 计划"

  1. 多端框架支持:不仅是 UniApp,未来我们计划适配 React Native, Flutter 甚至 Electron。让你的桌面应用也能拥有 Jarvis 般的界面。
  2. 动态可配置主题:目前是经典的 "赛博蓝/粉",未来我们将引入 "主题引擎",支持蒸汽波(Vaporwave)、暗黑哥特(Gothic)等多种风格一键切换。
  3. AI 智能 UI 生成:结合大模型,根据你的文字描述(例如:"我想要一个 2077 年夜之城风格的登录页"),自动从库中匹配图标并生成布局代码。(已经在路上了,敬请期待!🚀)
  4. 构建设计师生态:开放贡献平台,让全球的设计师都能上传自己的 "未来风格" 资产,打造最大的 AGI 时代 UI 资产库

🚀 立即体验

别让你的创意被平庸的组件库束缚。现在的应用不仅要好用,更要好看

👉 插件市场下载DCloud 插件市场链接

👉 GitHub/项目主页Github/AgicodeHub 链接

👉 在线图标预览Agicodehub 预览

Screenshot 2026-01-05 at 18.09.41.png


最后,送给所有开发者一句话:

如果你觉得这个项目够酷,欢迎 点赞、评论、转发 三连!你的支持是我们持续发电的动力!⚡️⚡️⚡️