feat(icon): added svg icon picker

.vscode/settings.json

@@ -105,17 +105,12 @@
   },
   "stylelint.enable": true,
   "stylelint.packageManager": "yarn",
-  "css.validate": true,
-  "less.validate": true,
-  "scss.validate": true,
   // ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
   // ===========================================
   // ================ Eslint ===================
   // ===========================================
-  // "eslint.enable": true,
   "eslint.alwaysShowStatus": true,
   "eslint.options": {
-    // 配置
     "plugins": ["html", "vue", "javascript", "jsx", "typescript"],
     "extensions": [".js", ".jsx", ".ts", ".tsx", ".vue"]
   },
@@ -127,7 +122,6 @@
     "html",
     "vue"
   ],
-  // "eslint.autoFixOnSave": true,
   // ===========================================
   // ================ Vetur ====================
   // ===========================================
@@ -139,7 +133,6 @@
   "vetur.format.defaultFormatter.ts": "prettier-tslint",
   "vetur.format.defaultFormatter.js": "prettier",
   "vetur.languageFeatures.codeActions": false,
-  // "vetur.validation.script": false,
   "vetur.format.defaultFormatterOptions": {
     "js-beautify-html": {
       "wrap_attributes": "force-expand-multiline"
@@ -201,6 +194,6 @@
   "i18n-ally.namespace": true,
   "i18n-ally.pathMatcher": "{locale}/{namespaces}.{ext}",
   "i18n-ally.enabledParsers": ["ts"],
-  "i18n-ally.sourceLanguage": "zh",
+  "i18n-ally.sourceLanguage": "en",
   "i18n-ally.enabledFrameworks": ["vue", "react"]
 }

CHANGELOG.zh_CN.md

 ## Wip
 
+### ✨ Features
+
+- 图标选择器新增 svg 模式
+
 ### ✨ Refactor
 
 - 重构项目以解决循环依赖项导致的热更新问题

package.json

@@ -53,7 +53,7 @@
   "devDependencies": {
     "@commitlint/cli": "^12.0.1",
     "@commitlint/config-conventional": "^12.0.1",
-    "@iconify/json": "^1.1.313",
+    "@iconify/json": "^1.1.314",
     "@ls-lint/ls-lint": "^1.9.2",
     "@purge-icons/generated": "^0.7.0",
     "@types/crypto-js": "^4.0.1",
@@ -110,7 +110,7 @@
     "vite-plugin-purge-icons": "^0.7.0",
     "vite-plugin-pwa": "^0.5.6",
     "vite-plugin-style-import": "^0.8.1",
-    "vite-plugin-svg-icons": "^0.3.3",
+    "vite-plugin-svg-icons": "^0.3.4",
     "vite-plugin-theme": "^0.4.8",
     "vite-plugin-windicss": "0.7.1",
     "vue-eslint-parser": "^7.6.0",
@@ -120,7 +120,7 @@
     "//": "Used to install imagemin dependencies, because imagemin may not be installed in China.If it is abroad, you can delete it",
     "bin-wrapper": "npm:bin-wrapper-china",
     "esbuild": "0.8.57",
-    "rollup": "2.40.0"
+    "rollup": "2.41.0"
   },
   "repository": {
     "type": "git",

src/components/Application/src/search/AppSearch.vue

@@ -13,6 +13,7 @@
     components: { AppSearchModal, Tooltip },
     setup() {
       const showModal = ref(false);
+
       const { getShowSearch } = useHeaderSetting();
       const { t } = useI18n();
 

src/components/Application/src/search/AppSearchFooter.vue

@@ -14,14 +14,13 @@
 
 <script lang="ts">
   import { defineComponent } from 'vue';
-  import Icon from '/@/components/Icon';
   import AppSearchKeyItem from './AppSearchKeyItem.vue';
 
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useI18n } from '/@/hooks/web/useI18n';
   export default defineComponent({
     name: 'AppSearchFooter',
-    components: { Icon, AppSearchKeyItem },
+    components: { AppSearchKeyItem },
     setup() {
       const { prefixCls } = useDesign('app-search-footer');
       const { t } = useI18n();

src/components/Form/src/BasicForm.vue

@@ -47,7 +47,7 @@
     nextTick,
   } from 'vue';
   import { Form, Row } from 'ant-design-vue';
-  import FormItem from './components/FormItem';
+  import FormItem from './components/FormItem.vue';
   import FormAction from './components/FormAction.vue';
 
   import { dateItemType } from './helper';

src/components/Icon/src/IconPicker.vue

@@ -30,16 +30,17 @@
                 <li
                   v-for="icon in getPaginationList"
                   :key="icon"
-                  :class="currentSelect === icon ? 'bg-primary text-white' : ''"
-                  class="p-2 w-1/8 cursor-pointer mr-1 mt-1 flex justify-center items-center border border-solid hover:bg-primary hover:text-white"
+                  :class="currentSelect === icon ? 'border border-primary' : ''"
+                  class="p-2 w-1/8 cursor-pointer mr-1 mt-1 flex justify-center items-center border border-solid hover:border-primary"
                   @click="handleClick(icon)"
                 >
                   <!-- <Icon :icon="icon" :prefix="prefix" /> -->
-                  <Icon :icon="icon" />
+                  <SvgIcon v-if="isSvgMode" :name="icon" />
+                  <Icon :icon="icon" v-else />
                 </li>
               </ul>
             </ScrollContainer>
-            <div class="flex py-2 items-center justify-center">
+            <div class="flex py-2 items-center justify-center" v-if="getTotal >= pageSize">
               <Pagination
                 showLessItems
                 size="small"
@@ -53,7 +54,11 @@
             ><div class="p-5"> <Empty /></div>
           </template>
         </template>
-        <Icon :icon="currentSelect || 'ion:apps-outline'" class="cursor-pointer px-2 py-1" />
+
+        <span class="cursor-pointer px-2 py-1 flex items-center" v-if="isSvgMode && currentSelect">
+          <SvgIcon :name="currentSelect" />
+        </span>
+        <Icon :icon="currentSelect || 'ion:apps-outline'" class="cursor-pointer px-2 py-1" v-else />
       </Popover>
     </template>
   </a-input>
@@ -66,6 +71,7 @@
 
   import { Input, Popover, Pagination, Empty } from 'ant-design-vue';
   import Icon from './index.vue';
+  import SvgIcon from './SvgIcon.vue';
 
   import iconsData from '../data/icons.data';
   import { propTypes } from '/@/utils/propTypes';
@@ -74,7 +80,7 @@
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
   import { useMessage } from '/@/hooks/web/useMessage';
-  // import '@iconify/iconify';
+  import svgIcons from 'vite-plugin-svg-icons/client';
 
   function getIcons() {
     const data = iconsData as any;
@@ -88,25 +94,35 @@
     return result;
   }
 
-  const icons = getIcons();
+  function getSvgIcons() {
+    return svgIcons.map((icon) => icon.replace('icon-', ''));
+  }
+
   export default defineComponent({
     name: 'IconPicker',
-    components: { [Input.name]: Input, Icon, Popover, ScrollContainer, Pagination, Empty },
+    components: { [Input.name]: Input, Icon, Popover, ScrollContainer, Pagination, Empty, SvgIcon },
     inheritAttrs: false,
     props: {
       value: propTypes.string,
       width: propTypes.string.def('100%'),
       pageSize: propTypes.number.def(140),
       copy: propTypes.bool.def(false),
+      mode: propTypes
+        .oneOf<('svg' | 'iconify')[]>(['svg', 'iconify'])
+        .def('iconify'),
     },
     emits: ['change'],
     setup(props, { emit }) {
+      const isSvgMode = props.mode === 'svg';
+      const icons = isSvgMode ? getSvgIcons() : getIcons();
+
       const currentSelect = ref('');
       const visible = ref(false);
       const currentList = ref(icons);
 
-      const { prefixCls } = useDesign('icon-picker');
       const { t } = useI18n();
+      const { prefixCls } = useDesign('icon-picker');
+
       const [debounceHandleSearchChange] = useDebounce(handleSearchChange, 100);
       const { clipboardRef, isSuccessRef } = useCopyToClipboard(props.value);
       const { createMessage } = useMessage();
@@ -153,6 +169,7 @@
         t,
         prefixCls,
         visible,
+        isSvgMode,
         getTotal,
         getPaginationList,
         handlePageChange,

src/components/Tree/src/TreeHeader.vue

@@ -24,7 +24,7 @@
 </template>
 <script lang="ts">
   import type { PropType } from 'vue';
-  import { defineComponent, ref, computed } from 'vue';
+  import { defineComponent, computed } from 'vue';
 
   import { Dropdown, Menu, Input } from 'ant-design-vue';
   import { Icon } from '/@/components/Icon';

src/design/index.less

@@ -37,6 +37,7 @@ a:focus,
 a:active,
 button,
 div,
+svg,
 span {
   outline: none !important;
 }

src/views/demo/feat/icon/index.vue

@@ -21,18 +21,24 @@
       </div>
     </CollapseContainer>
 
-    <CollapseContainer title="svg Sprite" class="my-5">
+    <CollapseContainer title="svg 雪碧图" class="my-5">
       <div class="flex justify-around flex-wrap">
         <SvgIcon name="test" size="32" />
       </div>
     </CollapseContainer>
 
-    <CollapseContainer title="图标选择器" class="my-5">
+    <CollapseContainer title="图标选择器(Iconify)" class="my-5">
       <div class="flex justify-around flex-wrap">
         <IconPicker />
       </div>
     </CollapseContainer>
 
+    <CollapseContainer title="图标选择器(Svg)" class="my-5">
+      <div class="flex justify-around flex-wrap">
+        <IconPicker mode="svg" />
+      </div>
+    </CollapseContainer>
+
     <Alert
       show-icon
       message="推荐使用Iconify组件"

yarn.lock

@@ -1117,10 +1117,10 @@
   dependencies:
     cross-fetch "^3.0.6"
 
-"@iconify/json@^1.1.313":
-  version "1.1.313"
-  resolved "https://registry.npmjs.org/@iconify/json/-/json-1.1.313.tgz#c225be3c5ce3280a2c34e753a65dc257b85b6652"
-  integrity sha512-gv00rSX4apKE0i/fUjXp5+sBb8LHzzdJqrXkBNVby7Nl7yzRqeQ/EyY+7ixtSpEu3f1P/co/vrgdbZN6wlw6DA==
+"@iconify/json@^1.1.314":
+  version "1.1.314"
+  resolved "https://registry.npmjs.org/@iconify/json/-/json-1.1.314.tgz#43b417e5131b55e879f94b6fc40b09928eea42ad"
+  integrity sha512-KDc2dtNnbUryuUWs4ov1e8xCcEjrU/9r3PLOsElzsRpMjaGe/RfpAvU1NkDlv7Mmriaah+Dj6SVoLeRSUB5q3g==
 
 "@intlify/core-base@9.0.0":
   version "9.0.0"
@@ -7680,10 +7680,10 @@ rollup-plugin-visualizer@^4.2.0:
     source-map "^0.7.3"
     yargs "^16.0.3"
 
-rollup@2.40.0, rollup@^0.63.4, rollup@^2.25.0, rollup@^2.38.5, rollup@^2.40.0:
-  version "2.40.0"
-  resolved "https://registry.npmjs.org/rollup/-/rollup-2.40.0.tgz#efc218eaede7ab590954df50f96195188999c304"
-  integrity sha512-WiOGAPbXoHu+TOz6hyYUxIksOwsY/21TRWoO593jgYt8mvYafYqQl+axaA8y1z2HFazNUUrsMSjahV2A6/2R9A==
+rollup@2.41.0, rollup@^0.63.4, rollup@^2.25.0, rollup@^2.38.5, rollup@^2.40.0:
+  version "2.41.0"
+  resolved "https://registry.npmjs.org/rollup/-/rollup-2.41.0.tgz#b2a398bbabbf227738dedaef099e494aed468982"
+  integrity sha512-Gk76XHTggulWPH95q8V62bw6uqDH6UGvbD6LOa3QUyhuMF3eOuaeDHR7SLm1T9faitkpNrqzUAVYx47klcMnlA==
   optionalDependencies:
     fsevents "~2.3.1"
 
@@ -9160,10 +9160,10 @@ vite-plugin-style-import@^0.8.1:
     es-module-lexer "^0.4.1"
     magic-string "^0.25.7"
 
-vite-plugin-svg-icons@^0.3.3:
-  version "0.3.3"
-  resolved "https://registry.npmjs.org/vite-plugin-svg-icons/-/vite-plugin-svg-icons-0.3.3.tgz#b699e1af244500d893cc32b48a772492c1fae72b"
-  integrity sha512-ZI3FLspeM3PV0OE503m7/11jW5aSSCwxXUEcJZL3RwSYmpkLE0cSsM7UFZf0tx3cRoSB/JpeOlRIRH6G2BhWiQ==
+vite-plugin-svg-icons@^0.3.4:
+  version "0.3.4"
+  resolved "https://registry.npmjs.org/vite-plugin-svg-icons/-/vite-plugin-svg-icons-0.3.4.tgz#505aacff35f19d4e1c81f05a85bded0d6f1f6323"
+  integrity sha512-N4KYqmyF/gnsYIBxvMTyotjWSdur/6EyycE6eJvM2m7oHHxe8Y+SZZlD+XTz8Nl+zfurXYDkrbbHAdtWlpJovw==
   dependencies:
     debug "^4.3.2"
     etag "^1.8.1"