update

io.sc.platform.core.frontend/src/platform/components/form/elements/WIcon.vue

@@ -0,0 +1,149 @@
+<template>
+  <q-input v-model="valueRef" @update:model-value="valueChanged">
+    <template #append>
+      <q-btn icon="bi-suit-heart" size="10px" padding="2px" flat square unelevated :title="$t('select')">
+        <q-popup-proxy v-model:model-value="isShow" anchor="bottom right" self="top right" :offset="[0, 10]" @show="show">
+          <q-splitter v-model="leftWidthRef" style="width: 800px; height: 300px; position: relative">
+            <template #before>
+              <q-tabs v-model="selectedTab" align="left" vertical dense no-caps outside-arrows mobile-arrows>
+                <q-tab v-for="iconSet in iconSets" :key="iconSet.name" :name="iconSet.name">
+                  <span class="w-[180px] text-left" :title="iconSet.label">
+                    {{ iconSet.label }}
+                  </span>
+                </q-tab>
+              </q-tabs>
+            </template>
+            <template #after>
+              <div class="pl-4 pt-2" style="width: 300px; height: 50px">
+                <q-input v-model="searchRef" outlined dense>
+                  <template #append>
+                    <q-btn round flat icon="bi-search" size="10px" />
+                  </template>
+                </q-input>
+              </div>
+              <q-tab-panels
+                v-model="selectedTab"
+                style="height: calc(100% - 50px)"
+                animated
+                swipeable
+                vertical
+                transition-prev="jump-up"
+                transition-next="jump-up"
+                :keep-alive="true"
+              >
+                <q-tab-panel v-for="iconSet in iconSets" :key="iconSet.name" :name="iconSet.name" class="full-height">
+                  <div class="row full-height" style="overflow: scroll">
+                    <div v-for="item in iconSet.icons" :key="item">
+                      <div
+                        :id="item"
+                        class="grid justify-items-center q-pa-sm"
+                        :title="item"
+                        :style="
+                          item === valueRef
+                            ? 'background-color:var(--q-negative);'
+                            : searchRef && item.indexOf(searchRef) !== -1
+                              ? 'background-color:var(--q-warning);'
+                              : ''
+                        "
+                      >
+                        <q-icon size="26px" :name="item" class="cursor-pointer" @click="iconItemClick(item)"> </q-icon>
+                      </div>
+                    </div>
+                  </div>
+                </q-tab-panel>
+              </q-tab-panels>
+            </template>
+          </q-splitter>
+        </q-popup-proxy>
+      </q-btn>
+      <!-- 恢复默认值按钮 -->
+      <q-btn
+        v-if="restore"
+        icon="bi-arrow-counterclockwise"
+        size="10px"
+        padding="2px"
+        flat
+        square
+        unelevated
+        :title="$t('restore')"
+        :style="{ 'margin-left': '5px', border: '1px solid #e5e7eb', color: restoreValue, 'background-color': computedStoreBackgroundColorValue }"
+        @click="restoreDefaultValue"
+      ></q-btn>
+    </template>
+  </q-input>
+</template>
+<script setup lang="ts">
+import { ref, toRaw, onMounted } from 'vue';
+import { Tools } from '@/platform';
+import bootstrap from './icons/bootstrap.json';
+import materialIcons from './icons/material-icons.json';
+import materialSymbolsOutlined from './icons/material-symbols-outlined.json';
+import eva from './icons/eva-icons.json';
+import fontawesomeBrands from './icons/fontawesome-v6-icons-brands.json';
+import fontawesomeRegular from './icons/fontawesome-v6-icons-regular.json';
+import fontawesomeSolid from './icons/fontawesome-v6-icons-solid.json';
+
+const props = defineProps({
+  modelValue: { type: String, default: '' },
+  restore: { type: Boolean, default: false },
+});
+const emit = defineEmits(['update:modelValue']);
+
+const iconSets = [
+  { name: 'bootstrap', label: 'Bootstrap', prefix: 'bi-', icons: bootstrap },
+  { name: 'materialIcons', label: 'Material', prefix: '', icons: materialIcons },
+  { name: 'materialSymbolsOutlined', label: 'Material Symbols (outlined)', prefix: 'sym_o_', icons: materialSymbolsOutlined },
+  { name: 'eva', label: 'Eva', prefix: 'eva-', icons: eva },
+  { name: 'fontawesomeBrands', label: 'fontawesome (brands)', prefix: 'fa-brands fa-', icons: fontawesomeBrands },
+  { name: 'fontawesomeRegular', label: 'fontawesome (regular)', prefix: 'fa-regular fa-', icons: fontawesomeRegular },
+  { name: 'fontawesomeSolid', label: 'fontawesome (solid)', prefix: 'fa-solid fa-', icons: fontawesomeSolid },
+];
+
+const leftWidthRef = ref(30);
+const selectedTab = ref('bootstrap');
+const isShow = ref(false);
+const searchRef = ref('');
+const valueRef = ref(props.modelValue || 'bi-arrow-up-left-square');
+const restoreValue = toRaw(props.modelValue || '');
+
+if (Tools.isEmpty(valueRef.value)) {
+  selectedTab.value = 'bootstrap';
+} else if (valueRef.value.startsWith('bi')) {
+  selectedTab.value = 'bootstrap';
+} else if (valueRef.value.startsWith('sym_o_')) {
+  selectedTab.value = 'materialSymbolsOutlined';
+} else if (valueRef.value.startsWith('eva')) {
+  selectedTab.value = 'eva';
+} else if (valueRef.value.startsWith('fa-brands fa-')) {
+  selectedTab.value = 'fontawesomeBrands';
+} else if (valueRef.value.startsWith('fa-regular fa-')) {
+  selectedTab.value = 'fontawesomeRegular';
+} else if (valueRef.value.startsWith('fa-solid fa-')) {
+  selectedTab.value = 'fontawesomeSolid';
+} else {
+  selectedTab.value = 'materialIcons';
+}
+
+const iconItemClick = (icon: string) => {
+  valueRef.value = icon;
+  isShow.value = false;
+};
+
+const valueChanged = (value) => {
+  valueRef.value = value;
+  emit('update:modelValue', value);
+  isShow.value = false;
+};
+
+const restoreDefaultValue = () => {
+  valueRef.value = restoreValue;
+  emit('update:modelValue', restoreValue);
+};
+
+onMounted(() => {});
+
+const show = () => {
+  searchRef.value = '';
+  document.getElementById(valueRef.value)?.scrollIntoView(true);
+};
+</script>

io.sc.platform.core.frontend/src/platform/components/form/elements/icons/eva-icons.json

@@ -0,0 +1,492 @@
+[
+  "eva-activity",
+  "eva-activity-outline",
+  "eva-alert-circle",
+  "eva-alert-circle-outline",
+  "eva-alert-triangle",
+  "eva-alert-triangle-outline",
+  "eva-archive",
+  "eva-archive-outline",
+  "eva-arrow-back",
+  "eva-arrow-back-outline",
+  "eva-arrow-circle-down",
+  "eva-arrow-circle-down-outline",
+  "eva-arrow-circle-left",
+  "eva-arrow-circle-left-outline",
+  "eva-arrow-circle-right",
+  "eva-arrow-circle-right-outline",
+  "eva-arrow-circle-up",
+  "eva-arrow-circle-up-outline",
+  "eva-arrow-down",
+  "eva-arrow-down-outline",
+  "eva-arrow-downward",
+  "eva-arrow-downward-outline",
+  "eva-arrow-forward",
+  "eva-arrow-forward-outline",
+  "eva-arrow-ios-back",
+  "eva-arrow-ios-back-outline",
+  "eva-arrow-ios-downward",
+  "eva-arrow-ios-downward-outline",
+  "eva-arrow-ios-forward",
+  "eva-arrow-ios-forward-outline",
+  "eva-arrow-ios-upward",
+  "eva-arrow-ios-upward-outline",
+  "eva-arrow-left",
+  "eva-arrow-left-outline",
+  "eva-arrow-right",
+  "eva-arrow-right-outline",
+  "eva-arrow-up",
+  "eva-arrow-up-outline",
+  "eva-arrow-upward",
+  "eva-arrow-upward-outline",
+  "eva-arrowhead-down",
+  "eva-arrowhead-down-outline",
+  "eva-arrowhead-left",
+  "eva-arrowhead-left-outline",
+  "eva-arrowhead-right",
+  "eva-arrowhead-right-outline",
+  "eva-arrowhead-up",
+  "eva-arrowhead-up-outline",
+  "eva-at",
+  "eva-at-outline",
+  "eva-attach",
+  "eva-attach-2",
+  "eva-attach-2-outline",
+  "eva-attach-outline",
+  "eva-award",
+  "eva-award-outline",
+  "eva-backspace",
+  "eva-backspace-outline",
+  "eva-bar-chart",
+  "eva-bar-chart-2",
+  "eva-bar-chart-2-outline",
+  "eva-bar-chart-outline",
+  "eva-battery",
+  "eva-battery-outline",
+  "eva-behance",
+  "eva-behance-outline",
+  "eva-bell",
+  "eva-bell-off",
+  "eva-bell-off-outline",
+  "eva-bell-outline",
+  "eva-bluetooth",
+  "eva-bluetooth-outline",
+  "eva-book",
+  "eva-book-open",
+  "eva-book-open-outline",
+  "eva-book-outline",
+  "eva-bookmark",
+  "eva-bookmark-outline",
+  "eva-briefcase",
+  "eva-briefcase-outline",
+  "eva-browser",
+  "eva-browser-outline",
+  "eva-brush",
+  "eva-brush-outline",
+  "eva-bulb",
+  "eva-bulb-outline",
+  "eva-calendar",
+  "eva-calendar-outline",
+  "eva-camera",
+  "eva-camera-outline",
+  "eva-car",
+  "eva-car-outline",
+  "eva-cast",
+  "eva-cast-outline",
+  "eva-charging",
+  "eva-charging-outline",
+  "eva-checkmark",
+  "eva-checkmark-circle",
+  "eva-checkmark-circle-2",
+  "eva-checkmark-circle-2-outline",
+  "eva-checkmark-circle-outline",
+  "eva-checkmark-outline",
+  "eva-checkmark-square",
+  "eva-checkmark-square-2",
+  "eva-checkmark-square-2-outline",
+  "eva-checkmark-square-outline",
+  "eva-chevron-down",
+  "eva-chevron-down-outline",
+  "eva-chevron-left",
+  "eva-chevron-left-outline",
+  "eva-chevron-right",
+  "eva-chevron-right-outline",
+  "eva-chevron-up",
+  "eva-chevron-up-outline",
+  "eva-clipboard",
+  "eva-clipboard-outline",
+  "eva-clock",
+  "eva-clock-outline",
+  "eva-close",
+  "eva-close-circle",
+  "eva-close-circle-outline",
+  "eva-close-outline",
+  "eva-close-square",
+  "eva-close-square-outline",
+  "eva-cloud-download",
+  "eva-cloud-download-outline",
+  "eva-cloud-upload",
+  "eva-cloud-upload-outline",
+  "eva-code",
+  "eva-code-download",
+  "eva-code-download-outline",
+  "eva-code-outline",
+  "eva-collapse",
+  "eva-collapse-outline",
+  "eva-color-palette",
+  "eva-color-palette-outline",
+  "eva-color-picker",
+  "eva-color-picker-outline",
+  "eva-compass",
+  "eva-compass-outline",
+  "eva-copy",
+  "eva-copy-outline",
+  "eva-corner-down-left",
+  "eva-corner-down-left-outline",
+  "eva-corner-down-right",
+  "eva-corner-down-right-outline",
+  "eva-corner-left-down",
+  "eva-corner-left-down-outline",
+  "eva-corner-left-up",
+  "eva-corner-left-up-outline",
+  "eva-corner-right-down",
+  "eva-corner-right-down-outline",
+  "eva-corner-right-up",
+  "eva-corner-right-up-outline",
+  "eva-corner-up-left",
+  "eva-corner-up-left-outline",
+  "eva-corner-up-right",
+  "eva-corner-up-right-outline",
+  "eva-credit-card",
+  "eva-credit-card-outline",
+  "eva-crop",
+  "eva-crop-outline",
+  "eva-cube",
+  "eva-cube-outline",
+  "eva-diagonal-arrow-left-down",
+  "eva-diagonal-arrow-left-down-outline",
+  "eva-diagonal-arrow-left-up",
+  "eva-diagonal-arrow-left-up-outline",
+  "eva-diagonal-arrow-right-down",
+  "eva-diagonal-arrow-right-down-outline",
+  "eva-diagonal-arrow-right-up",
+  "eva-diagonal-arrow-right-up-outline",
+  "eva-done-all",
+  "eva-done-all-outline",
+  "eva-download",
+  "eva-download-outline",
+  "eva-droplet",
+  "eva-droplet-off",
+  "eva-droplet-off-outline",
+  "eva-droplet-outline",
+  "eva-edit",
+  "eva-edit-2",
+  "eva-edit-2-outline",
+  "eva-edit-outline",
+  "eva-email",
+  "eva-email-outline",
+  "eva-expand",
+  "eva-expand-outline",
+  "eva-external-link",
+  "eva-external-link-outline",
+  "eva-eye",
+  "eva-eye-off",
+  "eva-eye-off-2",
+  "eva-eye-off-2-outline",
+  "eva-eye-off-outline",
+  "eva-eye-outline",
+  "eva-facebook",
+  "eva-facebook-outline",
+  "eva-file",
+  "eva-file-add",
+  "eva-file-add-outline",
+  "eva-file-outline",
+  "eva-file-remove",
+  "eva-file-remove-outline",
+  "eva-file-text",
+  "eva-file-text-outline",
+  "eva-film",
+  "eva-film-outline",
+  "eva-flag",
+  "eva-flag-outline",
+  "eva-flash",
+  "eva-flash-off",
+  "eva-flash-off-outline",
+  "eva-flash-outline",
+  "eva-flip",
+  "eva-flip-2",
+  "eva-flip-2-outline",
+  "eva-flip-outline",
+  "eva-folder",
+  "eva-folder-add",
+  "eva-folder-add-outline",
+  "eva-folder-outline",
+  "eva-folder-remove",
+  "eva-folder-remove-outline",
+  "eva-funnel",
+  "eva-funnel-outline",
+  "eva-gift",
+  "eva-gift-outline",
+  "eva-github",
+  "eva-github-outline",
+  "eva-globe",
+  "eva-globe-2",
+  "eva-globe-2-outline",
+  "eva-globe-3",
+  "eva-globe-outline",
+  "eva-google",
+  "eva-google-outline",
+  "eva-grid",
+  "eva-grid-outline",
+  "eva-hard-drive",
+  "eva-hard-drive-outline",
+  "eva-hash",
+  "eva-hash-outline",
+  "eva-headphones",
+  "eva-headphones-outline",
+  "eva-heart",
+  "eva-heart-outline",
+  "eva-home",
+  "eva-home-outline",
+  "eva-image",
+  "eva-image-2",
+  "eva-image-outline",
+  "eva-inbox",
+  "eva-inbox-outline",
+  "eva-info",
+  "eva-info-outline",
+  "eva-keypad",
+  "eva-keypad-outline",
+  "eva-layers",
+  "eva-layers-outline",
+  "eva-layout",
+  "eva-layout-outline",
+  "eva-link",
+  "eva-link-2",
+  "eva-link-2-outline",
+  "eva-link-outline",
+  "eva-linkedin",
+  "eva-linkedin-outline",
+  "eva-list",
+  "eva-list-outline",
+  "eva-loader-outline",
+  "eva-lock",
+  "eva-lock-outline",
+  "eva-log-in",
+  "eva-log-in-outline",
+  "eva-log-out",
+  "eva-log-out-outline",
+  "eva-map",
+  "eva-map-outline",
+  "eva-maximize",
+  "eva-maximize-outline",
+  "eva-menu",
+  "eva-menu-2",
+  "eva-menu-2-outline",
+  "eva-menu-arrow",
+  "eva-menu-arrow-outline",
+  "eva-menu-outline",
+  "eva-message-circle",
+  "eva-message-circle-outline",
+  "eva-message-square",
+  "eva-message-square-outline",
+  "eva-mic",
+  "eva-mic-off",
+  "eva-mic-off-outline",
+  "eva-mic-outline",
+  "eva-minimize",
+  "eva-minimize-outline",
+  "eva-minus",
+  "eva-minus-circle",
+  "eva-minus-circle-outline",
+  "eva-minus-outline",
+  "eva-minus-square",
+  "eva-minus-square-outline",
+  "eva-monitor",
+  "eva-monitor-outline",
+  "eva-moon",
+  "eva-moon-outline",
+  "eva-more-horizontal",
+  "eva-more-horizontal-outline",
+  "eva-more-vertical",
+  "eva-more-vertical-outline",
+  "eva-move",
+  "eva-move-outline",
+  "eva-music",
+  "eva-music-outline",
+  "eva-navigation",
+  "eva-navigation-2",
+  "eva-navigation-2-outline",
+  "eva-navigation-outline",
+  "eva-npm",
+  "eva-npm-outline",
+  "eva-options",
+  "eva-options-2",
+  "eva-options-2-outline",
+  "eva-options-outline",
+  "eva-pantone",
+  "eva-pantone-outline",
+  "eva-paper-plane",
+  "eva-paper-plane-outline",
+  "eva-pause-circle",
+  "eva-pause-circle-outline",
+  "eva-people",
+  "eva-people-outline",
+  "eva-percent",
+  "eva-percent-outline",
+  "eva-person",
+  "eva-person-add",
+  "eva-person-add-outline",
+  "eva-person-delete",
+  "eva-person-delete-outline",
+  "eva-person-done",
+  "eva-person-done-outline",
+  "eva-person-outline",
+  "eva-person-remove",
+  "eva-person-remove-outline",
+  "eva-phone",
+  "eva-phone-call",
+  "eva-phone-call-outline",
+  "eva-phone-missed",
+  "eva-phone-missed-outline",
+  "eva-phone-off",
+  "eva-phone-off-outline",
+  "eva-phone-outline",
+  "eva-pie-chart",
+  "eva-pie-chart-2",
+  "eva-pie-chart-outline",
+  "eva-pin",
+  "eva-pin-outline",
+  "eva-play-circle",
+  "eva-play-circle-outline",
+  "eva-plus",
+  "eva-plus-circle",
+  "eva-plus-circle-outline",
+  "eva-plus-outline",
+  "eva-plus-square",
+  "eva-plus-square-outline",
+  "eva-power",
+  "eva-power-outline",
+  "eva-pricetags",
+  "eva-pricetags-outline",
+  "eva-printer",
+  "eva-printer-outline",
+  "eva-question-mark",
+  "eva-question-mark-circle",
+  "eva-question-mark-circle-outline",
+  "eva-question-mark-outline",
+  "eva-radio",
+  "eva-radio-button-off",
+  "eva-radio-button-off-outline",
+  "eva-radio-button-on",
+  "eva-radio-button-on-outline",
+  "eva-radio-outline",
+  "eva-recording",
+  "eva-recording-outline",
+  "eva-refresh",
+  "eva-refresh-outline",
+  "eva-repeat",
+  "eva-repeat-outline",
+  "eva-rewind-left",
+  "eva-rewind-left-outline",
+  "eva-rewind-right",
+  "eva-rewind-right-outline",
+  "eva-save",
+  "eva-save-outline",
+  "eva-scissors",
+  "eva-scissors-outline",
+  "eva-search",
+  "eva-search-outline",
+  "eva-settings",
+  "eva-settings-2",
+  "eva-settings-2-outline",
+  "eva-settings-outline",
+  "eva-shake",
+  "eva-shake-outline",
+  "eva-share",
+  "eva-share-outline",
+  "eva-shield",
+  "eva-shield-off",
+  "eva-shield-off-outline",
+  "eva-shield-outline",
+  "eva-shopping-bag",
+  "eva-shopping-bag-outline",
+  "eva-shopping-cart",
+  "eva-shopping-cart-outline",
+  "eva-shuffle",
+  "eva-shuffle-2",
+  "eva-shuffle-2-outline",
+  "eva-shuffle-outline",
+  "eva-skip-back",
+  "eva-skip-back-outline",
+  "eva-skip-forward",
+  "eva-skip-forward-outline",
+  "eva-slash",
+  "eva-slash-outline",
+  "eva-smartphone",
+  "eva-smartphone-outline",
+  "eva-smiling-face",
+  "eva-smiling-face-outline",
+  "eva-speaker",
+  "eva-speaker-outline",
+  "eva-square",
+  "eva-square-outline",
+  "eva-star",
+  "eva-star-outline",
+  "eva-stop-circle",
+  "eva-stop-circle-outline",
+  "eva-sun",
+  "eva-sun-outline",
+  "eva-swap",
+  "eva-swap-outline",
+  "eva-sync",
+  "eva-sync-outline",
+  "eva-text",
+  "eva-text-outline",
+  "eva-thermometer",
+  "eva-thermometer-minus",
+  "eva-thermometer-minus-outline",
+  "eva-thermometer-outline",
+  "eva-thermometer-plus",
+  "eva-thermometer-plus-outline",
+  "eva-toggle-left",
+  "eva-toggle-left-outline",
+  "eva-toggle-right",
+  "eva-toggle-right-outline",
+  "eva-trash",
+  "eva-trash-2",
+  "eva-trash-2-outline",
+  "eva-trash-outline",
+  "eva-trending-down",
+  "eva-trending-down-outline",
+  "eva-trending-up",
+  "eva-trending-up-outline",
+  "eva-tv",
+  "eva-tv-outline",
+  "eva-twitter",
+  "eva-twitter-outline",
+  "eva-umbrella",
+  "eva-umbrella-outline",
+  "eva-undo",
+  "eva-undo-outline",
+  "eva-unlock",
+  "eva-unlock-outline",
+  "eva-upload",
+  "eva-upload-outline",
+  "eva-video",
+  "eva-video-off",
+  "eva-video-off-outline",
+  "eva-video-outline",
+  "eva-volume-down",
+  "eva-volume-down-outline",
+  "eva-volume-mute",
+  "eva-volume-mute-outline",
+  "eva-volume-off",
+  "eva-volume-off-outline",
+  "eva-volume-up",
+  "eva-volume-up-outline",
+  "eva-wifi",
+  "eva-wifi-off",
+  "eva-wifi-off-outline",
+  "eva-wifi-outline"
+]

io.sc.platform.core.frontend/src/platform/components/form/elements/icons/fontawesome-v6-icons-brands.json

@@ -0,0 +1,474 @@
+[
+  "fa-brands fa-42-group",
+  "fa-brands fa-500px",
+  "fa-brands fa-accessible-icon",
+  "fa-brands fa-accusoft",
+  "fa-brands fa-adn",
+  "fa-brands fa-adversal",
+  "fa-brands fa-affiliatetheme",
+  "fa-brands fa-airbnb",
+  "fa-brands fa-algolia",
+  "fa-brands fa-alipay",
+  "fa-brands fa-amazon",
+  "fa-brands fa-amazon-pay",
+  "fa-brands fa-amilia",
+  "fa-brands fa-android",
+  "fa-brands fa-angellist",
+  "fa-brands fa-angrycreative",
+  "fa-brands fa-angular",
+  "fa-brands fa-app-store",
+  "fa-brands fa-app-store-ios",
+  "fa-brands fa-apper",
+  "fa-brands fa-apple",
+  "fa-brands fa-apple-pay",
+  "fa-brands fa-artstation",
+  "fa-brands fa-asymmetrik",
+  "fa-brands fa-atlassian",
+  "fa-brands fa-audible",
+  "fa-brands fa-autoprefixer",
+  "fa-brands fa-avianex",
+  "fa-brands fa-aviato",
+  "fa-brands fa-aws",
+  "fa-brands fa-bandcamp",
+  "fa-brands fa-battle-net",
+  "fa-brands fa-behance",
+  "fa-brands fa-bilibili",
+  "fa-brands fa-bimobject",
+  "fa-brands fa-bitbucket",
+  "fa-brands fa-bitcoin",
+  "fa-brands fa-bity",
+  "fa-brands fa-black-tie",
+  "fa-brands fa-blackberry",
+  "fa-brands fa-blogger",
+  "fa-brands fa-blogger-b",
+  "fa-brands fa-bluetooth",
+  "fa-brands fa-bluetooth-b",
+  "fa-brands fa-bootstrap",
+  "fa-brands fa-bots",
+  "fa-brands fa-btc",
+  "fa-brands fa-buffer",
+  "fa-brands fa-buromobelexperte",
+  "fa-brands fa-buy-n-large",
+  "fa-brands fa-buysellads",
+  "fa-brands fa-canadian-maple-leaf",
+  "fa-brands fa-cc-amazon-pay",
+  "fa-brands fa-cc-amex",
+  "fa-brands fa-cc-apple-pay",
+  "fa-brands fa-cc-diners-club",
+  "fa-brands fa-cc-discover",
+  "fa-brands fa-cc-jcb",
+  "fa-brands fa-cc-mastercard",
+  "fa-brands fa-cc-paypal",
+  "fa-brands fa-cc-stripe",
+  "fa-brands fa-cc-visa",
+  "fa-brands fa-centercode",
+  "fa-brands fa-centos",
+  "fa-brands fa-chrome",
+  "fa-brands fa-chromecast",
+  "fa-brands fa-cloudflare",
+  "fa-brands fa-cloudscale",
+  "fa-brands fa-cloudsmith",
+  "fa-brands fa-cloudversify",
+  "fa-brands fa-cmplid",
+  "fa-brands fa-codepen",
+  "fa-brands fa-codiepie",
+  "fa-brands fa-confluence",
+  "fa-brands fa-connectdevelop",
+  "fa-brands fa-contao",
+  "fa-brands fa-cotton-bureau",
+  "fa-brands fa-cpanel",
+  "fa-brands fa-creative-commons",
+  "fa-brands fa-creative-commons-by",
+  "fa-brands fa-creative-commons-nc",
+  "fa-brands fa-creative-commons-nc-eu",
+  "fa-brands fa-creative-commons-nc-jp",
+  "fa-brands fa-creative-commons-nd",
+  "fa-brands fa-creative-commons-pd",
+  "fa-brands fa-creative-commons-pd-alt",
+  "fa-brands fa-creative-commons-remix",
+  "fa-brands fa-creative-commons-sa",
+  "fa-brands fa-creative-commons-sampling",
+  "fa-brands fa-creative-commons-sampling-plus",
+  "fa-brands fa-creative-commons-share",
+  "fa-brands fa-creative-commons-zero",
+  "fa-brands fa-critical-role",
+  "fa-brands fa-css3",
+  "fa-brands fa-css3-alt",
+  "fa-brands fa-cuttlefish",
+  "fa-brands fa-d-and-d",
+  "fa-brands fa-d-and-d-beyond",
+  "fa-brands fa-dailymotion",
+  "fa-brands fa-dashcube",
+  "fa-brands fa-debian",
+  "fa-brands fa-deezer",
+  "fa-brands fa-delicious",
+  "fa-brands fa-deploydog",
+  "fa-brands fa-deskpro",
+  "fa-brands fa-dev",
+  "fa-brands fa-deviantart",
+  "fa-brands fa-dhl",
+  "fa-brands fa-diaspora",
+  "fa-brands fa-digg",
+  "fa-brands fa-digital-ocean",
+  "fa-brands fa-discord",
+  "fa-brands fa-discourse",
+  "fa-brands fa-dochub",
+  "fa-brands fa-docker",
+  "fa-brands fa-draft2digital",
+  "fa-brands fa-dribbble",
+  "fa-brands fa-dropbox",
+  "fa-brands fa-drupal",
+  "fa-brands fa-dyalog",
+  "fa-brands fa-earlybirds",
+  "fa-brands fa-ebay",
+  "fa-brands fa-edge",
+  "fa-brands fa-edge-legacy",
+  "fa-brands fa-elementor",
+  "fa-brands fa-ello",
+  "fa-brands fa-ember",
+  "fa-brands fa-empire",
+  "fa-brands fa-envira",
+  "fa-brands fa-erlang",
+  "fa-brands fa-ethereum",
+  "fa-brands fa-etsy",
+  "fa-brands fa-evernote",
+  "fa-brands fa-expeditedssl",
+  "fa-brands fa-facebook",
+  "fa-brands fa-facebook-f",
+  "fa-brands fa-facebook-messenger",
+  "fa-brands fa-fantasy-flight-games",
+  "fa-brands fa-fedex",
+  "fa-brands fa-fedora",
+  "fa-brands fa-figma",
+  "fa-brands fa-firefox",
+  "fa-brands fa-firefox-browser",
+  "fa-brands fa-first-order",
+  "fa-brands fa-first-order-alt",
+  "fa-brands fa-firstdraft",
+  "fa-brands fa-flickr",
+  "fa-brands fa-flipboard",
+  "fa-brands fa-fly",
+  "fa-brands fa-font-awesome",
+  "fa-brands fa-fonticons",
+  "fa-brands fa-fonticons-fi",
+  "fa-brands fa-fort-awesome",
+  "fa-brands fa-fort-awesome-alt",
+  "fa-brands fa-forumbee",
+  "fa-brands fa-foursquare",
+  "fa-brands fa-free-code-camp",
+  "fa-brands fa-freebsd",
+  "fa-brands fa-fulcrum",
+  "fa-brands fa-galactic-republic",
+  "fa-brands fa-galactic-senate",
+  "fa-brands fa-get-pocket",
+  "fa-brands fa-gg",
+  "fa-brands fa-gg-circle",
+  "fa-brands fa-git",
+  "fa-brands fa-git-alt",
+  "fa-brands fa-github",
+  "fa-brands fa-github-alt",
+  "fa-brands fa-gitkraken",
+  "fa-brands fa-gitlab",
+  "fa-brands fa-gitter",
+  "fa-brands fa-glide",
+  "fa-brands fa-glide-g",
+  "fa-brands fa-gofore",
+  "fa-brands fa-golang",
+  "fa-brands fa-goodreads",
+  "fa-brands fa-goodreads-g",
+  "fa-brands fa-google",
+  "fa-brands fa-google-drive",
+  "fa-brands fa-google-pay",
+  "fa-brands fa-google-play",
+  "fa-brands fa-google-plus",
+  "fa-brands fa-google-plus-g",
+  "fa-brands fa-google-wallet",
+  "fa-brands fa-gratipay",
+  "fa-brands fa-grav",
+  "fa-brands fa-gripfire",
+  "fa-brands fa-grunt",
+  "fa-brands fa-guilded",
+  "fa-brands fa-gulp",
+  "fa-brands fa-hacker-news",
+  "fa-brands fa-hackerrank",
+  "fa-brands fa-hashnode",
+  "fa-brands fa-hips",
+  "fa-brands fa-hire-a-helper",
+  "fa-brands fa-hive",
+  "fa-brands fa-hooli",
+  "fa-brands fa-hornbill",
+  "fa-brands fa-hotjar",
+  "fa-brands fa-houzz",
+  "fa-brands fa-html5",
+  "fa-brands fa-hubspot",
+  "fa-brands fa-ideal",
+  "fa-brands fa-imdb",
+  "fa-brands fa-instagram",
+  "fa-brands fa-instalod",
+  "fa-brands fa-intercom",
+  "fa-brands fa-internet-explorer",
+  "fa-brands fa-invision",
+  "fa-brands fa-ioxhost",
+  "fa-brands fa-itch-io",
+  "fa-brands fa-itunes",
+  "fa-brands fa-itunes-note",
+  "fa-brands fa-java",
+  "fa-brands fa-jedi-order",
+  "fa-brands fa-jenkins",
+  "fa-brands fa-jira",
+  "fa-brands fa-joget",
+  "fa-brands fa-joomla",
+  "fa-brands fa-js",
+  "fa-brands fa-jsfiddle",
+  "fa-brands fa-kaggle",
+  "fa-brands fa-keybase",
+  "fa-brands fa-keycdn",
+  "fa-brands fa-kickstarter",
+  "fa-brands fa-kickstarter-k",
+  "fa-brands fa-korvue",
+  "fa-brands fa-laravel",
+  "fa-brands fa-lastfm",
+  "fa-brands fa-leanpub",
+  "fa-brands fa-less",
+  "fa-brands fa-line",
+  "fa-brands fa-linkedin",
+  "fa-brands fa-linkedin-in",
+  "fa-brands fa-linode",
+  "fa-brands fa-linux",
+  "fa-brands fa-lyft",
+  "fa-brands fa-magento",
+  "fa-brands fa-mailchimp",
+  "fa-brands fa-mandalorian",
+  "fa-brands fa-markdown",
+  "fa-brands fa-mastodon",
+  "fa-brands fa-maxcdn",
+  "fa-brands fa-mdb",
+  "fa-brands fa-medapps",
+  "fa-brands fa-medium",
+  "fa-brands fa-medrt",
+  "fa-brands fa-meetup",
+  "fa-brands fa-megaport",
+  "fa-brands fa-mendeley",
+  "fa-brands fa-meta",
+  "fa-brands fa-microblog",
+  "fa-brands fa-microsoft",
+  "fa-brands fa-mix",
+  "fa-brands fa-mixcloud",
+  "fa-brands fa-mixer",
+  "fa-brands fa-mizuni",
+  "fa-brands fa-modx",
+  "fa-brands fa-monero",
+  "fa-brands fa-napster",
+  "fa-brands fa-neos",
+  "fa-brands fa-nfc-directional",
+  "fa-brands fa-nfc-symbol",
+  "fa-brands fa-nimblr",
+  "fa-brands fa-node",
+  "fa-brands fa-node-js",
+  "fa-brands fa-npm",
+  "fa-brands fa-ns8",
+  "fa-brands fa-nutritionix",
+  "fa-brands fa-octopus-deploy",
+  "fa-brands fa-odnoklassniki",
+  "fa-brands fa-odysee",
+  "fa-brands fa-old-republic",
+  "fa-brands fa-opencart",
+  "fa-brands fa-openid",
+  "fa-brands fa-opera",
+  "fa-brands fa-optin-monster",
+  "fa-brands fa-orcid",
+  "fa-brands fa-osi",
+  "fa-brands fa-padlet",
+  "fa-brands fa-page4",
+  "fa-brands fa-pagelines",
+  "fa-brands fa-palfed",
+  "fa-brands fa-patreon",
+  "fa-brands fa-paypal",
+  "fa-brands fa-perbyte",
+  "fa-brands fa-periscope",
+  "fa-brands fa-phabricator",
+  "fa-brands fa-phoenix-framework",
+  "fa-brands fa-phoenix-squadron",
+  "fa-brands fa-php",
+  "fa-brands fa-pied-piper",
+  "fa-brands fa-pied-piper-alt",
+  "fa-brands fa-pied-piper-hat",
+  "fa-brands fa-pied-piper-pp",
+  "fa-brands fa-pinterest",
+  "fa-brands fa-pinterest-p",
+  "fa-brands fa-pix",
+  "fa-brands fa-playstation",
+  "fa-brands fa-product-hunt",
+  "fa-brands fa-pushed",
+  "fa-brands fa-python",
+  "fa-brands fa-qq",
+  "fa-brands fa-quinscape",
+  "fa-brands fa-quora",
+  "fa-brands fa-r-project",
+  "fa-brands fa-raspberry-pi",
+  "fa-brands fa-ravelry",
+  "fa-brands fa-react",
+  "fa-brands fa-reacteurope",
+  "fa-brands fa-readme",
+  "fa-brands fa-rebel",
+  "fa-brands fa-red-river",
+  "fa-brands fa-reddit",
+  "fa-brands fa-reddit-alien",
+  "fa-brands fa-redhat",
+  "fa-brands fa-renren",
+  "fa-brands fa-replyd",
+  "fa-brands fa-researchgate",
+  "fa-brands fa-resolving",
+  "fa-brands fa-rev",
+  "fa-brands fa-rocketchat",
+  "fa-brands fa-rockrms",
+  "fa-brands fa-rust",
+  "fa-brands fa-safari",
+  "fa-brands fa-salesforce",
+  "fa-brands fa-sass",
+  "fa-brands fa-schlix",
+  "fa-brands fa-screenpal",
+  "fa-brands fa-scribd",
+  "fa-brands fa-searchengin",
+  "fa-brands fa-sellcast",
+  "fa-brands fa-sellsy",
+  "fa-brands fa-servicestack",
+  "fa-brands fa-shirtsinbulk",
+  "fa-brands fa-shopify",
+  "fa-brands fa-shopware",
+  "fa-brands fa-simplybuilt",
+  "fa-brands fa-sistrix",
+  "fa-brands fa-sith",
+  "fa-brands fa-sitrox",
+  "fa-brands fa-sketch",
+  "fa-brands fa-skyatlas",
+  "fa-brands fa-skype",
+  "fa-brands fa-slack",
+  "fa-brands fa-slideshare",
+  "fa-brands fa-snapchat",
+  "fa-brands fa-soundcloud",
+  "fa-brands fa-sourcetree",
+  "fa-brands fa-space-awesome",
+  "fa-brands fa-speakap",
+  "fa-brands fa-speaker-deck",
+  "fa-brands fa-spotify",
+  "fa-brands fa-square-behance",
+  "fa-brands fa-square-dribbble",
+  "fa-brands fa-square-facebook",
+  "fa-brands fa-square-font-awesome",
+  "fa-brands fa-square-font-awesome-stroke",
+  "fa-brands fa-square-git",
+  "fa-brands fa-square-github",
+  "fa-brands fa-square-gitlab",
+  "fa-brands fa-square-google-plus",
+  "fa-brands fa-square-hacker-news",
+  "fa-brands fa-square-instagram",
+  "fa-brands fa-square-js",
+  "fa-brands fa-square-lastfm",
+  "fa-brands fa-square-odnoklassniki",
+  "fa-brands fa-square-pied-piper",
+  "fa-brands fa-square-pinterest",
+  "fa-brands fa-square-reddit",
+  "fa-brands fa-square-snapchat",
+  "fa-brands fa-square-steam",
+  "fa-brands fa-square-threads",
+  "fa-brands fa-square-tumblr",
+  "fa-brands fa-square-twitter",
+  "fa-brands fa-square-viadeo",
+  "fa-brands fa-square-vimeo",
+  "fa-brands fa-square-whatsapp",
+  "fa-brands fa-square-x-twitter",
+  "fa-brands fa-square-xing",
+  "fa-brands fa-square-youtube",
+  "fa-brands fa-squarespace",
+  "fa-brands fa-stack-exchange",
+  "fa-brands fa-stack-overflow",
+  "fa-brands fa-stackpath",
+  "fa-brands fa-staylinked",
+  "fa-brands fa-steam",
+  "fa-brands fa-steam-symbol",
+  "fa-brands fa-sticker-mule",
+  "fa-brands fa-strava",
+  "fa-brands fa-stripe",
+  "fa-brands fa-stripe-s",
+  "fa-brands fa-stubber",
+  "fa-brands fa-studiovinari",
+  "fa-brands fa-stumbleupon",
+  "fa-brands fa-stumbleupon-circle",
+  "fa-brands fa-superpowers",
+  "fa-brands fa-supple",
+  "fa-brands fa-suse",
+  "fa-brands fa-swift",
+  "fa-brands fa-symfony",
+  "fa-brands fa-teamspeak",
+  "fa-brands fa-telegram",
+  "fa-brands fa-tencent-weibo",
+  "fa-brands fa-the-red-yeti",
+  "fa-brands fa-themeco",
+  "fa-brands fa-themeisle",
+  "fa-brands fa-think-peaks",
+  "fa-brands fa-threads",
+  "fa-brands fa-tiktok",
+  "fa-brands fa-trade-federation",
+  "fa-brands fa-trello",
+  "fa-brands fa-tumblr",
+  "fa-brands fa-twitch",
+  "fa-brands fa-twitter",
+  "fa-brands fa-typo3",
+  "fa-brands fa-uber",
+  "fa-brands fa-ubuntu",
+  "fa-brands fa-uikit",
+  "fa-brands fa-umbraco",
+  "fa-brands fa-uncharted",
+  "fa-brands fa-uniregistry",
+  "fa-brands fa-unity",
+  "fa-brands fa-unsplash",
+  "fa-brands fa-untappd",
+  "fa-brands fa-ups",
+  "fa-brands fa-usb",
+  "fa-brands fa-usps",
+  "fa-brands fa-ussunnah",
+  "fa-brands fa-vaadin",
+  "fa-brands fa-viacoin",
+  "fa-brands fa-viadeo",
+  "fa-brands fa-viber",
+  "fa-brands fa-vimeo",
+  "fa-brands fa-vimeo-v",
+  "fa-brands fa-vine",
+  "fa-brands fa-vk",
+  "fa-brands fa-vnv",
+  "fa-brands fa-vuejs",
+  "fa-brands fa-watchman-monitoring",
+  "fa-brands fa-waze",
+  "fa-brands fa-weebly",
+  "fa-brands fa-weibo",
+  "fa-brands fa-weixin",
+  "fa-brands fa-whatsapp",
+  "fa-brands fa-whmcs",
+  "fa-brands fa-wikipedia-w",
+  "fa-brands fa-windows",
+  "fa-brands fa-wirsindhandwerk",
+  "fa-brands fa-wix",
+  "fa-brands fa-wizards-of-the-coast",
+  "fa-brands fa-wodu",
+  "fa-brands fa-wolf-pack-battalion",
+  "fa-brands fa-wordpress",
+  "fa-brands fa-wordpress-simple",
+  "fa-brands fa-wpbeginner",
+  "fa-brands fa-wpexplorer",
+  "fa-brands fa-wpforms",
+  "fa-brands fa-wpressr",
+  "fa-brands fa-x-twitter",
+  "fa-brands fa-xbox",
+  "fa-brands fa-xing",
+  "fa-brands fa-y-combinator",
+  "fa-brands fa-yahoo",
+  "fa-brands fa-yammer",
+  "fa-brands fa-yandex",
+  "fa-brands fa-yandex-international",
+  "fa-brands fa-yarn",
+  "fa-brands fa-yelp",
+  "fa-brands fa-yoast",
+  "fa-brands fa-youtube",
+  "fa-brands fa-zhihu"
+]

io.sc.platform.core.frontend/src/platform/components/form/elements/icons/fontawesome-v6-icons-regular.json

@@ -0,0 +1,165 @@
+[
+  "fa-regular fa-address-book",
+  "fa-regular fa-address-card",
+  "fa-regular fa-bell",
+  "fa-regular fa-bell-slash",
+  "fa-regular fa-bookmark",
+  "fa-regular fa-building",
+  "fa-regular fa-calendar",
+  "fa-regular fa-calendar-check",
+  "fa-regular fa-calendar-days",
+  "fa-regular fa-calendar-minus",
+  "fa-regular fa-calendar-plus",
+  "fa-regular fa-calendar-xmark",
+  "fa-regular fa-chart-bar",
+  "fa-regular fa-chess-bishop",
+  "fa-regular fa-chess-king",
+  "fa-regular fa-chess-knight",
+  "fa-regular fa-chess-pawn",
+  "fa-regular fa-chess-queen",
+  "fa-regular fa-chess-rook",
+  "fa-regular fa-circle",
+  "fa-regular fa-circle-check",
+  "fa-regular fa-circle-dot",
+  "fa-regular fa-circle-down",
+  "fa-regular fa-circle-left",
+  "fa-regular fa-circle-pause",
+  "fa-regular fa-circle-play",
+  "fa-regular fa-circle-question",
+  "fa-regular fa-circle-right",
+  "fa-regular fa-circle-stop",
+  "fa-regular fa-circle-up",
+  "fa-regular fa-circle-user",
+  "fa-regular fa-circle-xmark",
+  "fa-regular fa-clipboard",
+  "fa-regular fa-clock",
+  "fa-regular fa-clone",
+  "fa-regular fa-closed-captioning",
+  "fa-regular fa-comment",
+  "fa-regular fa-comment-dots",
+  "fa-regular fa-comments",
+  "fa-regular fa-compass",
+  "fa-regular fa-copy",
+  "fa-regular fa-copyright",
+  "fa-regular fa-credit-card",
+  "fa-regular fa-envelope",
+  "fa-regular fa-envelope-open",
+  "fa-regular fa-eye",
+  "fa-regular fa-eye-slash",
+  "fa-regular fa-face-angry",
+  "fa-regular fa-face-dizzy",
+  "fa-regular fa-face-flushed",
+  "fa-regular fa-face-frown",
+  "fa-regular fa-face-frown-open",
+  "fa-regular fa-face-grimace",
+  "fa-regular fa-face-grin",
+  "fa-regular fa-face-grin-beam",
+  "fa-regular fa-face-grin-beam-sweat",
+  "fa-regular fa-face-grin-hearts",
+  "fa-regular fa-face-grin-squint",
+  "fa-regular fa-face-grin-squint-tears",
+  "fa-regular fa-face-grin-stars",
+  "fa-regular fa-face-grin-tears",
+  "fa-regular fa-face-grin-tongue",
+  "fa-regular fa-face-grin-tongue-squint",
+  "fa-regular fa-face-grin-tongue-wink",
+  "fa-regular fa-face-grin-wide",
+  "fa-regular fa-face-grin-wink",
+  "fa-regular fa-face-kiss",
+  "fa-regular fa-face-kiss-beam",
+  "fa-regular fa-face-kiss-wink-heart",
+  "fa-regular fa-face-laugh",
+  "fa-regular fa-face-laugh-beam",
+  "fa-regular fa-face-laugh-squint",
+  "fa-regular fa-face-laugh-wink",
+  "fa-regular fa-face-meh",
+  "fa-regular fa-face-meh-blank",
+  "fa-regular fa-face-rolling-eyes",
+  "fa-regular fa-face-sad-cry",
+  "fa-regular fa-face-sad-tear",
+  "fa-regular fa-face-smile",
+  "fa-regular fa-face-smile-beam",
+  "fa-regular fa-face-smile-wink",
+  "fa-regular fa-face-surprise",
+  "fa-regular fa-face-tired",
+  "fa-regular fa-file",
+  "fa-regular fa-file-audio",
+  "fa-regular fa-file-code",
+  "fa-regular fa-file-excel",
+  "fa-regular fa-file-image",
+  "fa-regular fa-file-lines",
+  "fa-regular fa-file-pdf",
+  "fa-regular fa-file-powerpoint",
+  "fa-regular fa-file-video",
+  "fa-regular fa-file-word",
+  "fa-regular fa-file-zipper",
+  "fa-regular fa-flag",
+  "fa-regular fa-floppy-disk",
+  "fa-regular fa-folder",
+  "fa-regular fa-folder-closed",
+  "fa-regular fa-folder-open",
+  "fa-regular fa-font-awesome",
+  "fa-regular fa-futbol",
+  "fa-regular fa-gem",
+  "fa-regular fa-hand",
+  "fa-regular fa-hand-back-fist",
+  "fa-regular fa-hand-lizard",
+  "fa-regular fa-hand-peace",
+  "fa-regular fa-hand-point-down",
+  "fa-regular fa-hand-point-left",
+  "fa-regular fa-hand-point-right",
+  "fa-regular fa-hand-point-up",
+  "fa-regular fa-hand-pointer",
+  "fa-regular fa-hand-scissors",
+  "fa-regular fa-hand-spock",
+  "fa-regular fa-handshake",
+  "fa-regular fa-hard-drive",
+  "fa-regular fa-heart",
+  "fa-regular fa-hospital",
+  "fa-regular fa-hourglass",
+  "fa-regular fa-hourglass-half",
+  "fa-regular fa-id-badge",
+  "fa-regular fa-id-card",
+  "fa-regular fa-image",
+  "fa-regular fa-images",
+  "fa-regular fa-keyboard",
+  "fa-regular fa-lemon",
+  "fa-regular fa-life-ring",
+  "fa-regular fa-lightbulb",
+  "fa-regular fa-map",
+  "fa-regular fa-message",
+  "fa-regular fa-money-bill-1",
+  "fa-regular fa-moon",
+  "fa-regular fa-newspaper",
+  "fa-regular fa-note-sticky",
+  "fa-regular fa-object-group",
+  "fa-regular fa-object-ungroup",
+  "fa-regular fa-paper-plane",
+  "fa-regular fa-paste",
+  "fa-regular fa-pen-to-square",
+  "fa-regular fa-rectangle-list",
+  "fa-regular fa-rectangle-xmark",
+  "fa-regular fa-registered",
+  "fa-regular fa-share-from-square",
+  "fa-regular fa-snowflake",
+  "fa-regular fa-square",
+  "fa-regular fa-square-caret-down",
+  "fa-regular fa-square-caret-left",
+  "fa-regular fa-square-caret-right",
+  "fa-regular fa-square-caret-up",
+  "fa-regular fa-square-check",
+  "fa-regular fa-square-full",
+  "fa-regular fa-square-minus",
+  "fa-regular fa-square-plus",
+  "fa-regular fa-star",
+  "fa-regular fa-star-half",
+  "fa-regular fa-star-half-stroke",
+  "fa-regular fa-sun",
+  "fa-regular fa-thumbs-down",
+  "fa-regular fa-thumbs-up",
+  "fa-regular fa-trash-can",
+  "fa-regular fa-user",
+  "fa-regular fa-window-maximize",
+  "fa-regular fa-window-minimize",
+  "fa-regular fa-window-restore"
+]

io.sc.platform.core.frontend/src/platform/components/index.ts

@@ -14,6 +14,7 @@ import WCodeMirror from './form/elements/WCodeMirror.vue';
 import WColorInput from './form/elements/WColorInput.vue';
 import WColorInputPalette from './form/elements/WColorInputPalette.vue';
 import WCron from './form/elements/WCron.vue';
+import WIcon from './form/elements/WIcon.vue';
 import WPosition from './form/elements/WPosition.vue';
 
 import WText from './form/elements/WText.vue';
@@ -42,6 +43,7 @@ export default {
     app.component('WColorInput', WColorInput);
     app.component('WColorInputPalette', WColorInputPalette);
     app.component('WCron', WCron);
+    app.component('WIcon', WIcon);
     app.component('WPosition', WPosition);
     app.component('WCodeMirror', WCodeMirror);
     app.component('WSelect', WSelect);
@@ -75,6 +77,7 @@ export {
   WColorInput,
   WColorInputPalette,
   WCron,
+  WIcon,
   WPosition,
   WCodeMirror,
   WSelect,

io.sc.platform.core.frontend/src/views/FormElements.vue

@@ -18,6 +18,7 @@
               { name: 'codemirror', label: 'please input SQL', type: 'code-mirror', outlined: true, lang: 'sql', dense: true, rows: 5 },
               { name: 'cron', label: 'please input cron expression', type: 'cron', outlined: true, dense: true },
               { name: 'position', label: 'please select position', type: 'position', outlined: true, dense: true },
+              { name: 'icon', label: 'please select icon', type: 'icon', outlined: true, dense: true },
             ]"
           >
           </w-form>
@@ -26,6 +27,7 @@
           <q-input v-model="valueRef" label="please input number 1:" outlined dense clearable></q-input>
           <w-code-mirror v-model="valueRef" label="please input SQL:" lang="sql" outlined dense></w-code-mirror>
           <q-input v-model="valueRef" label="please input number 2:" outlined dense clearable></q-input>
+          <w-icon v-model="iconValueRef" label="please select icon:" lang="sql" outlined dense></w-icon>
         </q-tab-panel>
       </q-tab-panels>
     </template>
@@ -34,9 +36,10 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 
-const selectedTab = ref('formElements');
+const selectedTab = ref('codemirror');
 const splitWidthRef = ref(20);
 const valueRef = ref('xxxx');
+const iconValueRef = ref('8k_plus');
 
 const focus = () => {
   console.log('sfsdf');