From 4eb431415c5889a77f70306a614f48cf3f622708 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E4=BB=AA=E5=BC=8F?= <854085467@qq.com>
Date: Thu, 7 Oct 2021 22:47:51 +0800
Subject: [PATCH] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]=20iconPicker=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/docs/zh-CN/components/iconPicker.md |   4 +-
 docs/src/layouts/Layout.vue              |   8 +-
 src/css/layui.css                        |   1 -
 src/module/iconPicker/index.vue          | 706 +----------------------
 src/module/resource/icons.ts             | 170 ++++++
 5 files changed, 211 insertions(+), 678 deletions(-)
 create mode 100644 src/module/resource/icons.ts

diff --git a/docs/docs/zh-CN/components/iconPicker.md b/docs/docs/zh-CN/components/iconPicker.md
index 12e89bd8..a6d1be99 100644
--- a/docs/docs/zh-CN/components/iconPicker.md
+++ b/docs/docs/zh-CN/components/iconPicker.md
@@ -1,7 +1,7 @@
 ::: demo
 
 <template>
-  <lay-icon-picker type="layui-icon-face-smile"></lay-icon-picker>
+  <lay-icon-picker v-model="icon" type="layui-icon-face-smile"></lay-icon-picker>
 </template>
 
 <script>
@@ -10,6 +10,8 @@ import { ref } from 'vue'
 export default {
   setup() {
 
+    const icon = ref("layui-icon-home")
+
     return {
     }
   }
diff --git a/docs/src/layouts/Layout.vue b/docs/src/layouts/Layout.vue
index 7d8857ad..f4e17ccf 100644
--- a/docs/src/layouts/Layout.vue
+++ b/docs/src/layouts/Layout.vue
@@ -18,10 +18,14 @@
           style="margin-top: 0px; margin-bottom: 0px"
         >
           <li class="layui-nav-item">
-            <a href="https://gitee.com/layui-vue/layui-vue-sample"> 案例 </a>
+            <a href="https://gitee.com/layui-vue/layui-vue-sample">
+              案例
+            </a>
           </li>
           <li class="layui-nav-item">
-            <a href="https://gitee.com/layui-vue/layui-vue"> 仓库 </a>
+            <a href="https://gitee.com/layui-vue/layui-vue">
+              仓库
+            </a>
           </li>
           <li class="layui-nav-item">
             <a
diff --git a/src/css/layui.css b/src/css/layui.css
index df1938dc..fbfc8f59 100644
--- a/src/css/layui.css
+++ b/src/css/layui.css
@@ -4214,7 +4214,6 @@ body .layui-table-tips .layui-layer-content {
 
 .layui-menu {
 	position: relative;
-	margin: 5px 0;
 	background-color: #fff
 }
 
diff --git a/src/module/iconPicker/index.vue b/src/module/iconPicker/index.vue
index 328c1bcf..abc7fc50 100644
--- a/src/module/iconPicker/index.vue
+++ b/src/module/iconPicker/index.vue
@@ -1,6 +1,17 @@
 <template>
   <lay-dropdown>
-    <input />
+    <div
+      class="
+        layui-inline layui-border-box layui-iconpicker layui-iconpicker-split
+      "
+    >
+      <div class="layui-inline layui-iconpicker-main">
+        <i class="layui-inline layui-icon" :class="[selectedIcon]"></i>
+      </div>
+      <span class="layui-inline layui-iconpicker-suffix"
+        ><i class="layui-icon layui-icon-down layui-anim"></i
+      ></span>
+    </div>
     <template #content>
       <div class="layui-iconpicker-view layui-iconpicker-scroll">
         <div class="layui-iconpicker-search">
@@ -27,677 +38,14 @@
         </div>
         <div class="layui-iconpicker-list">
           <ul>
-            <li>
-              <i class="layui-icon layui-icon-heart-fill"></i>
-              <p class="layui-elip">实心</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-heart"></i>
-              <p class="layui-elip">空心</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-light"></i>
-              <p class="layui-elip">亮度/晴</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-time"></i>
-              <p class="layui-elip">时间/历史</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-bluetooth"></i>
-              <p class="layui-elip">蓝牙</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-at"></i>
-              <p class="layui-elip">@艾特</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-mute"></i>
-              <p class="layui-elip">静音</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-mike"></i>
-              <p class="layui-elip">录音/麦克风</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-key"></i>
-              <p class="layui-elip">密钥/钥匙</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-gift"></i>
-              <p class="layui-elip">礼物/活动</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-email"></i>
-              <p class="layui-elip">邮箱</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-rss"></i>
-              <p class="layui-elip">RSS</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-wifi"></i>
-              <p class="layui-elip">WiFi</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-logout"></i>
-              <p class="layui-elip">退出/注销</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-android"></i>
-              <p class="layui-elip">Android 安卓</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-ios"></i>
-              <p class="layui-elip">Apple IOS 苹果</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-windows"></i>
-              <p class="layui-elip">Windows</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-transfer"></i>
-              <p class="layui-elip">穿梭框</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-service"></i>
-              <p class="layui-elip">客服</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-subtraction"></i>
-              <p class="layui-elip">减</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-addition"></i>
-              <p class="layui-elip">加</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-slider"></i>
-              <p class="layui-elip">滑块</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-print"></i>
-              <p class="layui-elip">打印</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-export"></i>
-              <p class="layui-elip">导出</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-cols"></i>
-              <p class="layui-elip">列</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-screen-restore"></i>
-              <p class="layui-elip">退出全屏</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-screen-full"></i>
-              <p class="layui-elip">全屏</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-rate-half"></i>
-              <p class="layui-elip">半星</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-rate"></i>
-              <p class="layui-elip">星星-空心</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-rate-solid"></i>
-              <p class="layui-elip">星星-实心</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-cellphone"></i>
-              <p class="layui-elip">手机</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-vercode"></i>
-              <p class="layui-elip">验证码</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-login-wechat"></i>
-              <p class="layui-elip">微信</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-login-qq"></i>
-              <p class="layui-elip">QQ</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-login-weibo"></i>
-              <p class="layui-elip">微博</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-password"></i>
-              <p class="layui-elip">密码</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-username"></i>
-              <p class="layui-elip">用户名</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-refresh-3"></i>
-              <p class="layui-elip">刷新-粗</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-auz"></i>
-              <p class="layui-elip">授权</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-spread-left"></i>
-              <p class="layui-elip">左向右伸缩菜单</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-shrink-right"></i>
-              <p class="layui-elip">右向左伸缩菜单</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-snowflake"></i>
-              <p class="layui-elip">雪花</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-tips"></i>
-              <p class="layui-elip">提示说明</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-note"></i>
-              <p class="layui-elip">便签</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-home"></i>
-              <p class="layui-elip">主页</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-senior"></i>
-              <p class="layui-elip">高级</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-refresh"></i>
-              <p class="layui-elip">刷新</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-refresh-1"></i>
-              <p class="layui-elip">刷新</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-flag"></i>
-              <p class="layui-elip">旗帜</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-theme"></i>
-              <p class="layui-elip">主题</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-notice"></i>
-              <p class="layui-elip">消息-通知</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-website"></i>
-              <p class="layui-elip">网站</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-console"></i>
-              <p class="layui-elip">控制台</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-face-surprised"></i>
-              <p class="layui-elip">表情-惊讶</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-set"></i>
-              <p class="layui-elip">设置-空心</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-template-1"></i>
-              <p class="layui-elip">模板</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-app"></i>
-              <p class="layui-elip">应用</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-template"></i>
-              <p class="layui-elip">模板</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-praise"></i>
-              <p class="layui-elip">赞</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-tread"></i>
-              <p class="layui-elip">踩</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-male"></i>
-              <p class="layui-elip">男</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-female"></i>
-              <p class="layui-elip">女</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-camera"></i>
-              <p class="layui-elip">相机-空心</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-camera-fill"></i>
-              <p class="layui-elip">相机-实心</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-more"></i>
-              <p class="layui-elip">菜单-水平</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-more-vertical"></i>
-              <p class="layui-elip">菜单-垂直</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-rmb"></i>
-              <p class="layui-elip">金额-人民币</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-dollar"></i>
-              <p class="layui-elip">金额-美元</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-diamond"></i>
-              <p class="layui-elip">钻石-等级</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-fire"></i>
-              <p class="layui-elip">火</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-return"></i>
-              <p class="layui-elip">返回</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-location"></i>
-              <p class="layui-elip">位置-地图</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-read"></i>
-              <p class="layui-elip">办公-阅读</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-survey"></i>
-              <p class="layui-elip">调查</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-face-smile"></i>
-              <p class="layui-elip">表情-微笑</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-face-cry"></i>
-              <p class="layui-elip">表情-哭泣</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-cart-simple"></i>
-              <p class="layui-elip">购物车</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-cart"></i>
-              <p class="layui-elip">购物车</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-next"></i>
-              <p class="layui-elip">下一页</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-prev"></i>
-              <p class="layui-elip">上一页</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-upload-drag"></i>
-              <p class="layui-elip">上传-空心-拖拽</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-upload"></i>
-              <p class="layui-elip">上传-实心</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-download-circle"></i>
-              <p class="layui-elip">下载-圆圈</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-component"></i>
-              <p class="layui-elip">组件</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-file-b"></i>
-              <p class="layui-elip">文件-粗</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-user"></i>
-              <p class="layui-elip">用户</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-find-fill"></i>
-              <p class="layui-elip">发现-实心</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-loading"></i>
-              <p class="layui-elip">loading</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-loading-1"></i>
-              <p class="layui-elip">loading</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-add-1"></i>
-              <p class="layui-elip">添加</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-play"></i>
-              <p class="layui-elip">播放</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-pause"></i>
-              <p class="layui-elip">暂停</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-headset"></i>
-              <p class="layui-elip">音频-耳机</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-video"></i>
-              <p class="layui-elip">视频</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-voice"></i>
-              <p class="layui-elip">语音-声音</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-speaker"></i>
-              <p class="layui-elip">消息-通知-喇叭</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-fonts-del"></i>
-              <p class="layui-elip">删除线</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-fonts-code"></i>
-              <p class="layui-elip">代码</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-fonts-html"></i>
-              <p class="layui-elip">HTML</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-fonts-strong"></i>
-              <p class="layui-elip">字体加粗</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-unlink"></i>
-              <p class="layui-elip">删除链接</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-picture"></i>
-              <p class="layui-elip">图片</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-link"></i>
-              <p class="layui-elip">链接</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-face-smile-b"></i>
-              <p class="layui-elip">表情-笑-粗</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-align-left"></i>
-              <p class="layui-elip">左对齐</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-align-right"></i>
-              <p class="layui-elip">右对齐</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-align-center"></i>
-              <p class="layui-elip">居中对齐</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-fonts-u"></i>
-              <p class="layui-elip">字体-下划线</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-fonts-i"></i>
-              <p class="layui-elip">字体-斜体</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-tabs"></i>
-              <p class="layui-elip">Tabs 选项卡</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-radio"></i>
-              <p class="layui-elip">单选框-选中</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-circle"></i>
-              <p class="layui-elip">单选框-候选</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-edit"></i>
-              <p class="layui-elip">编辑</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-share"></i>
-              <p class="layui-elip">分享</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-delete"></i>
-              <p class="layui-elip">删除</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-form"></i>
-              <p class="layui-elip">表单</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-cellphone-fine"></i>
-              <p class="layui-elip">手机-细体</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-dialogue"></i>
-              <p class="layui-elip">聊天 对话 沟通</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-fonts-clear"></i>
-              <p class="layui-elip">文字格式化</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-layer"></i>
-              <p class="layui-elip">窗口</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-date"></i>
-              <p class="layui-elip">日期</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-water"></i>
-              <p class="layui-elip">水 下雨</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-code-circle"></i>
-              <p class="layui-elip">代码-圆圈</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-carousel"></i>
-              <p class="layui-elip">轮播组图</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-prev-circle"></i>
-              <p class="layui-elip">翻页</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-layouts"></i>
-              <p class="layui-elip">布局</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-util"></i>
-              <p class="layui-elip">工具</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-templeate-1"></i>
-              <p class="layui-elip">选择模板</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-upload-circle"></i>
-              <p class="layui-elip">上传-圆圈</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-tree"></i>
-              <p class="layui-elip">树</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-table"></i>
-              <p class="layui-elip">表格</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-chart"></i>
-              <p class="layui-elip">图表</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-chart-screen"></i>
-              <p class="layui-elip">图标 报表 屏幕</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-engine"></i>
-              <p class="layui-elip">引擎</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-triangle-d"></i>
-              <p class="layui-elip">下三角</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-triangle-r"></i>
-              <p class="layui-elip">右三角</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-file"></i>
-              <p class="layui-elip">文件</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-set-sm"></i>
-              <p class="layui-elip">设置-小型</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-reduce-circle"></i>
-              <p class="layui-elip">减少-圆圈</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-add-circle"></i>
-              <p class="layui-elip">添加-圆圈</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-404"></i>
-              <p class="layui-elip">404</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-about"></i>
-              <p class="layui-elip">关于</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-up"></i>
-              <p class="layui-elip">箭头 向上</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-down"></i>
-              <p class="layui-elip">箭头 向下</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-left"></i>
-              <p class="layui-elip">箭头 向左</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-right"></i>
-              <p class="layui-elip">箭头 向右</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-circle-dot"></i>
-              <p class="layui-elip">圆点</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-search"></i>
-              <p class="layui-elip">搜索</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-set-fill"></i>
-              <p class="layui-elip">设置-实心</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-group"></i>
-              <p class="layui-elip">群组</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-friends"></i>
-              <p class="layui-elip">好友</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-reply-fill"></i>
-              <p class="layui-elip">回复 评论 实心</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-menu-fill"></i>
-              <p class="layui-elip">菜单 隐身 实心</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-log"></i>
-              <p class="layui-elip">记录</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-picture-fine"></i>
-              <p class="layui-elip">图片-细体</p>
-            </li>
-            <li class="layui-this">
-              <i class="layui-icon layui-icon-face-smile-fine"></i>
-              <p class="layui-elip">表情-笑-细体</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-list"></i>
-              <p class="layui-elip">列表</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-release"></i>
-              <p class="layui-elip">发布 纸飞机</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-ok"></i>
-              <p class="layui-elip">对 OK</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-help"></i>
-              <p class="layui-elip">帮助</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-chat"></i>
-              <p class="layui-elip">客服</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-top"></i>
-              <p class="layui-elip">top 置顶</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-star"></i>
-              <p class="layui-elip">收藏-空心</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-star-fill"></i>
-              <p class="layui-elip">收藏-实心</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-close-fill"></i>
-              <p class="layui-elip">关闭-实心</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-close"></i>
-              <p class="layui-elip">关闭-空心</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-ok-circle"></i>
-              <p class="layui-elip">正确</p>
-            </li>
-            <li>
-              <i class="layui-icon layui-icon-add-circle-fine"></i>
-              <p class="layui-elip">添加-圆圈-细体</p>
+            <li
+              v-for="icon in icons"
+              :key="icon"
+              @click="selectIcon(icon.class)"
+              :class="[selectedIcon === icon.class ? 'layui-this' : '']"
+            >
+              <i class="layui-icon" :class="[icon.class]"></i>
+              <p class="layui-elip">{{ icon.name }}</p>
             </li>
           </ul>
         </div>
@@ -707,10 +55,20 @@
 </template>
 
 <script setup name="LayIconPicker" lang="ts">
-import { defineProps } from 'vue'
+import { defineProps, Ref, ref } from 'vue'
+import icons from '../resource/icons'
 
 const props =
   defineProps<{
-    type?: string
+    modelValue?: string
   }>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const selectedIcon: Ref<String> = ref(props.modelValue as String)
+
+const selectIcon = function (icon: String) {
+  emit('update:modelValue', icon)
+  selectedIcon.value = icon
+}
 </script>
\ No newline at end of file
diff --git a/src/module/resource/icons.ts b/src/module/resource/icons.ts
new file mode 100644
index 00000000..680c3152
--- /dev/null
+++ b/src/module/resource/icons.ts
@@ -0,0 +1,170 @@
+export default [
+    { name: "实心", class: "layui-icon-heart-fill" },
+    { name: "空心", class: "layui-icon-heart" },
+    { name: "亮度/晴", class: "layui-icon-light" },
+    { name: "时间/历史", class: "layui-icon-time" },
+    { name: "蓝牙", class: "layui-icon-bluetooth" },
+    { name: "@艾特", class: "layui-icon-at" },
+    { name: "静音", class: "layui-icon-mute" },
+    { name: "录音/麦克风", class: "layui-icon-mike" },
+    { name: "密钥/钥匙", class: "layui-icon-key" },
+    { name: "礼物/活动", class: "layui-icon-gift" },
+    { name: "邮箱", class: "layui-icon-email" },
+    { name: "RSS", class: "layui-icon-rss" },
+    { name: "WiFi", class: "layui-icon-wifi" },
+    { name: "退出/注销", class: "layui-icon-logout" },
+    { name: "Android 安卓", class: "layui-icon-android" },
+    { name: "Apple IOS 苹果", class: "layui-icon-ios" },
+    { name: "Windows", class: "layui-icon-windows" },
+    { name: "穿梭框", class: "layui-icon-transfer" },
+    { name: "客服", class: "layui-icon-service" },
+    { name: "减", class: "layui-icon-subtraction" },
+    { name: "加", class: "layui-icon-addition" },
+    { name: "滑块", class: "layui-icon-slider" },
+    { name: "打印", class: "layui-icon-print" },
+    { name: "导出", class: "layui-icon-export" },
+    { name: "列", class: "layui-icon-cols" },
+    { name: "退出全屏", class: "layui-icon-screen-restore" },
+    { name: "全屏", class: "layui-icon-screen-full"},
+    { name: "半星", class: "layui-icon-rate-half" },
+    { name: "星星-空心", class: "layui-icon-rate" },
+    { name: "星星-实心", class: "layui-icon-rate-solid" },
+    { name: "手机", class: "layui-icon-cellphone" },
+    { name: "验证码", class: "layui-icon-vercode"},
+    { name: "微信", class: "layui-icon-login-wechat" },
+    { name: "QQ", class: "layui-icon-login-qq" },
+    { name: "微博", class: "layui-icon-login-weibo" },
+    { name: "密码", class: "layui-icon-password" },
+    { name: "用户名", class: "layui-icon-username" },
+    { name: "刷新-粗", class: "layui-icon-refresh-3" },
+    { name: "授权", class: "layui-icon-auz" },
+    { name: "左向右伸缩菜单", class: "layui-icon-spread-left" },
+    { name: "右向左伸缩菜单", class: "layui-icon-shrink-right" },
+    { name: "雪花", class: "layui-icon-snowflake" },
+    { name: "提示说明", class: "layui-icon-tips" },
+    { name: "便签", class: "layui-icon-note" },
+    { name: "主页", class: "layui-icon-home" },
+    { name: "高级", class: "layui-icon-senior" },
+    { name: "刷新", class: "layui-icon-refresh" },
+    { name: "刷新", class: "layui-icon-refresh-1" },
+    { name: "旗帜", class: "layui-icon-flag" },
+    { name: "主题", class: "layui-icon-theme" },
+    { name: "消息-通知", class: "layui-icon-notice" },
+    { name: "网站", class: "layui-icon-website" },
+    { name: "控制台", class: "layui-icon-console" },
+    { name: "表情-惊讶", class: "layui-icon-face-surprised" },
+    { name: "设置-空心", class: "layui-icon-set" },
+    { name: "模板", class: "layui-icon-template-1" },
+    { name: "应用", class: "layui-icon-app" },
+    { name: "模板", class: "layui-icon-template" },
+    { name: "赞", class: "layui-icon-praise" },
+    { name: "踩", class: "layui-icon-tread" },
+    { name: "男", class: "layui-icon-male" },
+    { name: "女", class: "layui-icon-female" },
+    { name: "相机-空心", class: "layui-icon-camera" },
+    { name: "相机-实心", class: "layui-icon-camera-fill" },
+    { name: "菜单-水平", class: "layui-icon-more" },
+    { name: "菜单-垂直", class: "layui-icon-more-vertical" },
+    { name: "金额-人民币", class: "layui-icon-rmb" },
+    { name: "金额-美元", class: "layui-icon-dollar" },
+    { name: "钻石-等级", class: "layui-icon-diamond" },
+    { name: "火", class: "layui-icon-fire" },
+    { name: "返回", class: "layui-icon-return" },
+    { name: "位置-地图", class: "layui-icon-location" },
+    { name: "办公-阅读", class: "layui-icon-read" },
+    { name: "调查", class: "layui-icon-survey" },
+    { name: "表情-微笑", class: "layui-icon-face-smile" },
+    { name: "表情-哭泣", class: "layui-icon-face-cry" },
+    { name: "购物车", class: "layui-icon-cart-simple" },
+    { name: "购物车", class: "layui-icon-cart" },
+    { name: "下一页", class: "layui-icon-next" },
+    { name: "上一页", class: "layui-icon-prev" },
+    { name: "上传-空心-拖拽", class: "layui-icon-upload-drag" },
+    { name: "上传-实心", class: "layui-icon-upload" },
+    { name: "下载-圆圈", class: "layui-icon-download-circle" },
+    { name: "组件", class: "layui-icon-component" },
+    { name: "文件-粗", class: "layui-icon-file-b" },
+    { name: "用户", class: "layui-icon-user" },
+    { name: "发现-实心", class: "layui-icon-find-fill" },
+    { name: "loading", class: "layui-icon-loading" },
+    { name: "loading", class: "layui-icon-loading-1" },
+    { name: "添加", class: "layui-icon-add-1" },
+    { name: "播放", class: "layui-icon-play" },
+    { name: "暂停", class: "layui-icon-pause" },
+    { name: "音频-耳机", class: "layui-icon-headset" },
+    { name: "视频", class: "layui-icon-video" },
+    { name: "语音-声音", class: "layui-icon-voice" },
+    { name: "消息-通知-喇叭", class: "layui-icon-speaker" },
+    { name: "删除线", class: "layui-icon-fonts-del" },
+    { name: "代码", class: "layui-icon-fonts-code" },
+    { name: "HTML", class: "layui-icon-fonts-html" },
+    { name: "字体加粗", class: "layui-icon-fonts-strong" },
+    { name: "删除链接", class: "layui-icon-unlink" },
+    { name: "图片", class: "layui-icon-picture" },
+    { name: "链接", class: "layui-icon-link" },
+    { name: "表情-笑-粗", class: "layui-icon-face-smile-b" },
+    { name: "左对齐", class: "layui-icon-align-left" },
+    { name: "右对齐", class: "layui-icon-align-right" },
+    { name: "居中对齐", class: "layui-icon-align-center" },
+    { name: "字体-下划线", class: "layui-icon-fonts-u" },
+    { name: "字体-斜体", class: "layui-icon-fonts-i" },
+    { name: "Tabs 选项卡", class: "layui-icon-tabs" },
+    { name: "单选框-选中", class: "layui-icon-radio" },
+    { name: "单选框-候选", class: "layui-icon-circle" },
+    { name: "编辑", class: "layui-icon-edit" },
+    { name: "分享", class: "layui-icon-share" },
+    { name: "删除", class: "layui-icon-delete" },
+    { name: "表单", class: "layui-icon-form" },
+    { name: "手机-细体", class: "layui-icon-cellphone-fine" },
+    { name: "聊天 对话 沟通", class: "layui-icon-dialogue" },
+    { name: "文字格式化", class: "layui-icon-fonts-clear" },
+    { name: "窗口", class: "layui-icon-layer" },
+    { name: "日期", class: "layui-icon-date" },
+    { name: "水 下雨", class: "layui-icon-water" },
+    { name: "代码-圆圈", class: "layui-icon-code-circle" },
+    { name: "轮播组图", class: "layui-icon-carousel" },
+    { name: "翻页", class: "layui-icon-prev-circle" },
+    { name: "布局", class: "layui-icon-layouts" },
+    { name: "工具", class: "layui-icon-util" },
+    { name: "选择模板", class: "layui-icon-templeate-1" },
+    { name: "上传-圆圈", class: "layui-icon-upload-circle" },
+    { name: "树", class: "layui-icon-tree" },
+    { name: "表格", class: "layui-icon-table" },
+    { name: "图表", class: "layui-icon-chart" },
+    { name: "图标 报表 屏幕", class: "layui-icon-chart-screen" },
+    { name: "引擎", class: "layui-icon-engine" },
+    { name: "下三角", class: "layui-icon-triangle-d" },
+    { name: "右三角", class: "layui-icon-triangle-r" },
+    { name: "文件", class: "layui-icon-file" },
+    { name: "设置-小型", class: "layui-icon-set-sm" },
+    { name: "减少-圆圈", class: "layui-icon-reduce-circle" },
+    { name: "添加-圆圈", class: "layui-icon-add-circle" },
+    { name: "404", class: "layui-icon-404" },
+    { name: "关于", class: "layui-icon-about" },
+    { name: "箭头 向上", class: "layui-icon-up" },
+    { name: "箭头 向下", class: "layui-icon-down" },
+    { name: "箭头 向左", class: "layui-icon-left" },
+    { name: "箭头 向右", class: "layui-icon-right" },
+    { name: "圆点", class: "layui-icon-circle-dot" },
+    { name: "搜索", class: "layui-icon-search" },
+    { name: "设置-实心", class: "layui-icon-set-fill" },
+    { name: "群组", class: "layui-icon-group" },
+    { name: "好友", class: "layui-icon-friends" },
+    { name: "回复 评论 实心", class: "layui-icon-reply-fill" },
+    { name: "菜单 隐身 实心", class: "layui-icon-menu-fill" },
+    { name: "记录", class: "layui-icon-log" },
+    { name: "图片-细体", class: "layui-icon-picture-fine" },
+    { name: "表情-笑-细体", class: "layui-icon-face-smile-fine" },
+    { name: "列表", class: "layui-icon-list" },
+    { name: "发布 纸飞机", class: "layui-icon-release" },
+    { name: "对 OK", class: "layui-icon-ok" },
+    { name: "帮助", class: "layui-icon-help" },
+    { name: "客服", class: "layui-icon-chat" },
+    { name: "top 置顶", class: "layui-icon-top" },
+    { name: "收藏-空心", class: "layui-icon-star" },
+    { name: "收藏-实心", class: "layui-icon-star-fill" },
+    { name: "关闭-实心", class: "layui-icon-close-fill" },
+    { name: "关闭-空心", class: "layui-icon-close" },
+    { name: "正确", class: "layui-icon-ok-circle" },
+    { name: "添加-圆圈-细体", class: "layui-icon-add-circle-fine" },
+]
\ No newline at end of file