更新记录

1.0.0（2026-01-07） 下载此版本

• Initial release

平台兼容性

Icon-Cyberpunk-Lite 赛博朋克图标库压缩版

这是Icon-Cyberpunk专为体积优化的版本，可以自行选择所需图标，可以灵活的新增删除，其它操作与完全版一致。

完整版链接

✨ 特性

• 🎨 纯正赛博朋克风：霓虹光感、高对比度、科技质感。
• 📦 海量资源：内置 2100+ 个精心设计的图标，覆盖几乎所有常用场景。
• ⚡️ 高性能渲染：采用 WebP 格式雪碧图（Sprite Sheet）技术，相比单图加载大幅减少 HTTP 请求，兼顾显示效果与加载性能。
• 🔧 便捷组件化：基于 uni-app uni_modules 规范，只需一行代码即可使用。
• 📏 灵活缩放：支持自定义尺寸（Size），组件会自动进行无损等比缩放。

📸 效果展示

(建议在白背景下使用以获得最佳发光效果)

本组件图标均来自于精细绘制的高清资源，支持在各种分辨率屏幕上清晰显示。

🚀 快速上手

本组件符合 uni_modules 规范。在插件市场导入或下载后，无需任何配置，直接在页面中即可使用。

基础用法

<template>
    <view class="container">
        <!-- 默认大小 173px -->
        <icon-cyberpunk-lite name="search"></icon-cyberpunk>

        <!-- 自定义大小 64px -->
        <icon-cyberpunk-lite name="home" size="64"></icon-cyberpunk>

        <!-- 带有点击事件 -->
        <icon-cyberpunk-lite name="settings" size="48" @click="handleClick"></icon-cyberpunk>
    </view>
</template>

<script>
    export default {
        methods: {
            handleClick() {
                console.log('图标被点击');
            }
        }
    }
</script>

<style>
    /* 推荐使用深色背景 */
    .container {
        background-color: #1e1e1e;
        padding: 20px;
    }
</style>

📚 属性说明 (Props)

📐 事件 (Events)

🔍 如何查找图标名称？

本插件包含超过 2000 个图标，您可以通过以下方式查找所需图标：

1. 查阅 CSS 文件 (推荐)： 打开插件目录下的 uni_modules/icon-cyberpunk/components/icon-cyberpunk/selector.html，在文件中搜索关键词（如 user, file, wifi 等）即可找到对应的 name。 或者访问 agicodehub 查看
2. 查看数据列表： 插件目录下提供了 icons.js 文件，其中导出了包含所有图标信息的 JSON 数据，可用于开发图标选择器等功能。

常用图标速查

(注：以上仅为极小部分示例，完整列表请查看源文件)

⚠️ 注意事项

1. 小程序包体积限制

由于本组件追求极致的视觉细节，使用了多张高清 WebP 雪碧图（每张约 100KB+，总计约 3MB+）。

• App / H5：无需担心，体验极佳。
• 微信/支付宝小程序：主包体积有限制（通常为 2MB）。
  • 建议方案 A：将引用了本组件的页面放入 分包 (SubPackage) 中。
  • 建议方案 B：将 uni_modules/icon-cyberpunk/components/icon-cyberpunk/ 目录下的所有 sprite_sheet_*.webp 图片上传至您的 CDN 服务器，然后批量修改 sprite.css 文件中的 url() 路径为 CDN 远程链接。

2. Vue 2 / Vue 3 支持

本组件使用标准 Vue 语法编写，同时兼容 uni-app 的 Vue 2 和 Vue 3 版本。

3. 体积优化 (Tree Shaking)

如果您在小程序环境使用，且通过分包或 CDN 方式仍无法满足需求，本插件提供了自选图标工具，支持仅打包项目用到的图标。 详细操作请查看：插件图标瘦身指南

如使用过程中有任何问题，或者您有一些好的建议，欢迎留言。