新增前端vue
This commit is contained in:
6
web-vue/packages/core/components/Icon/index.ts
Normal file
6
web-vue/packages/core/components/Icon/index.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
import Icon from './src/Icon.vue';
|
||||
import IconPicker from './src/IconPicker.vue';
|
||||
|
||||
export { Icon, IconPicker };
|
||||
|
||||
export default Icon;
|
||||
120
web-vue/packages/core/components/Icon/src/Icon.vue
Normal file
120
web-vue/packages/core/components/Icon/src/Icon.vue
Normal file
@@ -0,0 +1,120 @@
|
||||
<!--
|
||||
* Copyright (c) 2013-Now http://jeesite.com All rights reserved.
|
||||
* No deletion without permission, or be held responsible to law.
|
||||
* @author Vben、ThinkGem
|
||||
-->
|
||||
<template>
|
||||
<img
|
||||
v-if="isImgIcon"
|
||||
:src="`${publicPath}/resource/img/${getImgIcon}`"
|
||||
:style="`width: ${size}px; height: ${size}px`"
|
||||
:class="getClass"
|
||||
alt=""
|
||||
/>
|
||||
<span v-else ref="elRef" :style="getWrapStyle" :class="getClass"></span>
|
||||
</template>
|
||||
<script lang="ts" setup name="BasicIcon">
|
||||
import { PropType, useAttrs } from 'vue';
|
||||
import { ref, watch, onMounted, nextTick, unref, computed, CSSProperties } from 'vue';
|
||||
import { isString } from '@jeesite/core/utils/is';
|
||||
import { propTypes } from '@jeesite/core/utils/propTypes';
|
||||
import { publicPath } from '@jeesite/core/utils/env';
|
||||
|
||||
const props = defineProps({
|
||||
icon: propTypes.string.def(''),
|
||||
color: propTypes.string.def(''),
|
||||
size: {
|
||||
type: [String, Number] as PropType<string | number>,
|
||||
},
|
||||
spin: propTypes.bool.def(false),
|
||||
});
|
||||
|
||||
const attrs = useAttrs();
|
||||
const elRef = ref<ElRef>(null);
|
||||
const getClass = computed(() => {
|
||||
const prefixCls = 'jeesite-icon';
|
||||
return [
|
||||
attrs.class,
|
||||
`${prefixCls} anticon`,
|
||||
{
|
||||
[`${prefixCls}-spin`]: props.spin,
|
||||
[`${prefixCls}-fa`]: unref(getIconRef).startsWith('i-fa:'),
|
||||
},
|
||||
];
|
||||
});
|
||||
const isImgIcon = computed(() => props.icon?.includes('.'));
|
||||
const getImgIcon = computed(() => props.icon);
|
||||
const getIconRef = computed(() => {
|
||||
const prefix = 'i-';
|
||||
let icon = props.icon || '';
|
||||
if (!icon.startsWith(prefix)) {
|
||||
icon = prefix + icon;
|
||||
}
|
||||
if (icon.startsWith(prefix + 'icon-')) {
|
||||
icon = prefix + 'simple-line-icons:' + icon.substring(7);
|
||||
} else if (icon.startsWith(prefix + 'fa fa-')) {
|
||||
icon = prefix + 'fa:' + icon.substring(8);
|
||||
}
|
||||
return icon;
|
||||
});
|
||||
|
||||
const update = async () => {
|
||||
if (unref(isImgIcon)) return;
|
||||
const el = unref(elRef);
|
||||
if (!el) return;
|
||||
await nextTick();
|
||||
let icon = unref(getIconRef);
|
||||
if (!icon) return;
|
||||
const span = document.createElement('span');
|
||||
span.className = icon;
|
||||
el.textContent = '';
|
||||
el.appendChild(span);
|
||||
};
|
||||
|
||||
const getWrapStyle = computed((): CSSProperties => {
|
||||
const { color, size } = props;
|
||||
let fs = size;
|
||||
if (isString(size)) {
|
||||
fs = parseInt(size, 10);
|
||||
}
|
||||
|
||||
const icon = unref(getIconRef);
|
||||
if (fs && icon && icon.startsWith('i-fa:')) {
|
||||
fs = (fs as number) - 1; // fa 图标偏大，整体缩小下
|
||||
}
|
||||
|
||||
return {
|
||||
color: color,
|
||||
fontSize: `${fs}px`,
|
||||
// display: 'inline-flex',
|
||||
// justifyContent: 'center',
|
||||
// alignItems: 'center',
|
||||
};
|
||||
});
|
||||
|
||||
watch(() => props.icon, update, { flush: 'post' });
|
||||
|
||||
onMounted(update);
|
||||
</script>
|
||||
<style lang="less">
|
||||
.jeesite-icon {
|
||||
display: inline-flex !important;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&-spin {
|
||||
animation: loadingCircle 1s infinite linear;
|
||||
}
|
||||
|
||||
&-fa {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
//span {
|
||||
// min-width: 1em;
|
||||
// min-height: 1em;
|
||||
// border-radius: 100%;
|
||||
// background-color: @iconify-bg-color;
|
||||
//}
|
||||
}
|
||||
</style>
|
||||
989
web-vue/packages/core/components/Icon/src/IconData.tsx
Normal file
989
web-vue/packages/core/components/Icon/src/IconData.tsx
Normal file
@@ -0,0 +1,989 @@
|
||||
export default [
|
||||
'i-simple-line-icons:action-redo',
|
||||
'i-simple-line-icons:action-undo',
|
||||
'i-simple-line-icons:anchor',
|
||||
'i-simple-line-icons:arrow-down',
|
||||
'i-simple-line-icons:arrow-down-circle',
|
||||
'i-simple-line-icons:arrow-left',
|
||||
'i-simple-line-icons:arrow-left-circle',
|
||||
'i-simple-line-icons:arrow-right',
|
||||
'i-simple-line-icons:arrow-right-circle',
|
||||
'i-simple-line-icons:arrow-up',
|
||||
'i-simple-line-icons:arrow-up-circle',
|
||||
'i-simple-line-icons:badge',
|
||||
'i-simple-line-icons:bag',
|
||||
'i-simple-line-icons:ban',
|
||||
'i-simple-line-icons:basket',
|
||||
'i-simple-line-icons:basket-loaded',
|
||||
'i-simple-line-icons:bell',
|
||||
'i-simple-line-icons:book-open',
|
||||
'i-simple-line-icons:briefcase',
|
||||
'i-simple-line-icons:bubble',
|
||||
'i-simple-line-icons:bubbles',
|
||||
'i-simple-line-icons:bulb',
|
||||
'i-simple-line-icons:calculator',
|
||||
'i-simple-line-icons:calendar',
|
||||
'i-simple-line-icons:call-end',
|
||||
'i-simple-line-icons:call-in',
|
||||
'i-simple-line-icons:call-out',
|
||||
'i-simple-line-icons:camera',
|
||||
'i-simple-line-icons:camrecorder',
|
||||
'i-simple-line-icons:chart',
|
||||
'i-simple-line-icons:check',
|
||||
'i-simple-line-icons:chemistry',
|
||||
'i-simple-line-icons:clock',
|
||||
'i-simple-line-icons:close',
|
||||
'i-simple-line-icons:cloud-download',
|
||||
'i-simple-line-icons:cloud-upload',
|
||||
'i-simple-line-icons:compass',
|
||||
'i-simple-line-icons:control-end',
|
||||
'i-simple-line-icons:control-forward',
|
||||
'i-simple-line-icons:control-pause',
|
||||
'i-simple-line-icons:control-play',
|
||||
'i-simple-line-icons:control-rewind',
|
||||
'i-simple-line-icons:control-start',
|
||||
'i-simple-line-icons:credit-card',
|
||||
'i-simple-line-icons:crop',
|
||||
'i-simple-line-icons:cup',
|
||||
'i-simple-line-icons:cursor',
|
||||
'i-simple-line-icons:cursor-move',
|
||||
'i-simple-line-icons:diamond',
|
||||
'i-simple-line-icons:direction',
|
||||
'i-simple-line-icons:directions',
|
||||
'i-simple-line-icons:disc',
|
||||
'i-simple-line-icons:dislike',
|
||||
'i-simple-line-icons:doc',
|
||||
'i-simple-line-icons:docs',
|
||||
'i-simple-line-icons:drawer',
|
||||
'i-simple-line-icons:drop',
|
||||
'i-simple-line-icons:earphones',
|
||||
'i-simple-line-icons:earphones-alt',
|
||||
'i-simple-line-icons:emotsmile',
|
||||
'i-simple-line-icons:energy',
|
||||
'i-simple-line-icons:envelope',
|
||||
'i-simple-line-icons:envelope-letter',
|
||||
'i-simple-line-icons:envelope-open',
|
||||
'i-simple-line-icons:equalizer',
|
||||
'i-simple-line-icons:event',
|
||||
'i-simple-line-icons:exclamation',
|
||||
'i-simple-line-icons:eye',
|
||||
'i-simple-line-icons:eyeglass',
|
||||
'i-simple-line-icons:feed',
|
||||
'i-simple-line-icons:film',
|
||||
'i-simple-line-icons:fire',
|
||||
'i-simple-line-icons:flag',
|
||||
'i-simple-line-icons:folder',
|
||||
'i-simple-line-icons:folder-alt',
|
||||
'i-simple-line-icons:frame',
|
||||
'i-simple-line-icons:game-controller',
|
||||
'i-simple-line-icons:ghost',
|
||||
'i-simple-line-icons:globe',
|
||||
'i-simple-line-icons:globe-alt',
|
||||
'i-simple-line-icons:graduation',
|
||||
'i-simple-line-icons:graph',
|
||||
'i-simple-line-icons:grid',
|
||||
'i-simple-line-icons:handbag',
|
||||
'i-simple-line-icons:heart',
|
||||
'i-simple-line-icons:home',
|
||||
'i-simple-line-icons:hourglass',
|
||||
'i-simple-line-icons:info',
|
||||
'i-simple-line-icons:key',
|
||||
'i-simple-line-icons:layers',
|
||||
'i-simple-line-icons:like',
|
||||
'i-simple-line-icons:link',
|
||||
'i-simple-line-icons:list',
|
||||
'i-simple-line-icons:location-pin',
|
||||
'i-simple-line-icons:lock',
|
||||
'i-simple-line-icons:lock-open',
|
||||
'i-simple-line-icons:login',
|
||||
'i-simple-line-icons:logout',
|
||||
'i-simple-line-icons:loop',
|
||||
'i-simple-line-icons:magic-wand',
|
||||
'i-simple-line-icons:magnet',
|
||||
'i-simple-line-icons:magnifier',
|
||||
'i-simple-line-icons:magnifier-add',
|
||||
'i-simple-line-icons:magnifier-remove',
|
||||
'i-simple-line-icons:map',
|
||||
'i-simple-line-icons:menu',
|
||||
'i-simple-line-icons:microphone',
|
||||
'i-simple-line-icons:minus',
|
||||
'i-simple-line-icons:mouse',
|
||||
'i-simple-line-icons:music-tone',
|
||||
'i-simple-line-icons:music-tone-alt',
|
||||
'i-simple-line-icons:mustache',
|
||||
'i-simple-line-icons:note',
|
||||
'i-simple-line-icons:notebook',
|
||||
'i-simple-line-icons:options',
|
||||
'i-simple-line-icons:options-vertical',
|
||||
'i-simple-line-icons:organization',
|
||||
'i-simple-line-icons:paper-clip',
|
||||
'i-simple-line-icons:paper-plane',
|
||||
'i-simple-line-icons:paypal',
|
||||
'i-simple-line-icons:pencil',
|
||||
'i-simple-line-icons:people',
|
||||
'i-simple-line-icons:phone',
|
||||
'i-simple-line-icons:picture',
|
||||
'i-simple-line-icons:pie-chart',
|
||||
'i-simple-line-icons:pin',
|
||||
'i-simple-line-icons:plane',
|
||||
'i-simple-line-icons:playlist',
|
||||
'i-simple-line-icons:plus',
|
||||
'i-simple-line-icons:power',
|
||||
'i-simple-line-icons:present',
|
||||
'i-simple-line-icons:printer',
|
||||
'i-simple-line-icons:puzzle',
|
||||
'i-simple-line-icons:question',
|
||||
'i-simple-line-icons:refresh',
|
||||
'i-simple-line-icons:reload',
|
||||
'i-simple-line-icons:rocket',
|
||||
'i-simple-line-icons:screen-desktop',
|
||||
'i-simple-line-icons:screen-smartphone',
|
||||
'i-simple-line-icons:screen-tablet',
|
||||
'i-simple-line-icons:settings',
|
||||
'i-simple-line-icons:share',
|
||||
'i-simple-line-icons:share-alt',
|
||||
'i-simple-line-icons:shield',
|
||||
'i-simple-line-icons:shuffle',
|
||||
'i-simple-line-icons:size-actual',
|
||||
'i-simple-line-icons:size-fullscreen',
|
||||
'i-simple-line-icons:social-behance',
|
||||
'i-simple-line-icons:social-dribbble',
|
||||
'i-simple-line-icons:social-dropbox',
|
||||
'i-simple-line-icons:social-facebook',
|
||||
'i-simple-line-icons:social-foursqare',
|
||||
'i-simple-line-icons:social-github',
|
||||
'i-simple-line-icons:social-google',
|
||||
'i-simple-line-icons:social-instagram',
|
||||
'i-simple-line-icons:social-linkedin',
|
||||
'i-simple-line-icons:social-pinterest',
|
||||
'i-simple-line-icons:social-reddit',
|
||||
'i-simple-line-icons:social-skype',
|
||||
'i-simple-line-icons:social-soundcloud',
|
||||
'i-simple-line-icons:social-spotify',
|
||||
'i-simple-line-icons:social-steam',
|
||||
'i-simple-line-icons:social-stumbleupon',
|
||||
'i-simple-line-icons:social-tumblr',
|
||||
'i-simple-line-icons:social-twitter',
|
||||
'i-simple-line-icons:social-vkontakte',
|
||||
'i-simple-line-icons:social-youtube',
|
||||
'i-simple-line-icons:speech',
|
||||
'i-simple-line-icons:speedometer',
|
||||
'i-simple-line-icons:star',
|
||||
'i-simple-line-icons:support',
|
||||
'i-simple-line-icons:symbol-female',
|
||||
'i-simple-line-icons:symbol-male',
|
||||
'i-simple-line-icons:tag',
|
||||
'i-simple-line-icons:target',
|
||||
'i-simple-line-icons:trash',
|
||||
'i-simple-line-icons:trophy',
|
||||
'i-simple-line-icons:umbrella',
|
||||
'i-simple-line-icons:user',
|
||||
'i-simple-line-icons:user-female',
|
||||
'i-simple-line-icons:user-follow',
|
||||
'i-simple-line-icons:user-following',
|
||||
'i-simple-line-icons:user-unfollow',
|
||||
'i-simple-line-icons:vector',
|
||||
'i-simple-line-icons:volume-1',
|
||||
'i-simple-line-icons:volume-2',
|
||||
'i-simple-line-icons:volume-off',
|
||||
'i-simple-line-icons:wallet',
|
||||
'i-simple-line-icons:wrench',
|
||||
'i-ant-design:account-book-filled',
|
||||
'i-ant-design:account-book-outlined',
|
||||
'i-ant-design:account-book-twotone',
|
||||
'i-ant-design:aim-outlined',
|
||||
'i-ant-design:alert-filled',
|
||||
'i-ant-design:alert-outlined',
|
||||
'i-ant-design:alert-twotone',
|
||||
'i-ant-design:alibaba-outlined',
|
||||
'i-ant-design:align-center-outlined',
|
||||
'i-ant-design:align-left-outlined',
|
||||
'i-ant-design:align-right-outlined',
|
||||
'i-ant-design:alipay-circle-filled',
|
||||
'i-ant-design:alipay-circle-outlined',
|
||||
'i-ant-design:alipay-outlined',
|
||||
'i-ant-design:alipay-square-filled',
|
||||
'i-ant-design:aliwangwang-filled',
|
||||
'i-ant-design:aliwangwang-outlined',
|
||||
'i-ant-design:aliyun-outlined',
|
||||
'i-ant-design:amazon-circle-filled',
|
||||
'i-ant-design:amazon-outlined',
|
||||
'i-ant-design:amazon-square-filled',
|
||||
'i-ant-design:android-filled',
|
||||
'i-ant-design:android-outlined',
|
||||
'i-ant-design:ant-cloud-outlined',
|
||||
'i-ant-design:ant-design-outlined',
|
||||
'i-ant-design:apartment-outlined',
|
||||
'i-ant-design:api-filled',
|
||||
'i-ant-design:api-outlined',
|
||||
'i-ant-design:api-twotone',
|
||||
'i-ant-design:apple-filled',
|
||||
'i-ant-design:apple-outlined',
|
||||
'i-ant-design:appstore-add-outlined',
|
||||
'i-ant-design:appstore-filled',
|
||||
'i-ant-design:appstore-outlined',
|
||||
'i-ant-design:appstore-twotone',
|
||||
'i-ant-design:area-chart-outlined',
|
||||
'i-ant-design:arrow-down-outlined',
|
||||
'i-ant-design:arrow-left-outlined',
|
||||
'i-ant-design:arrow-right-outlined',
|
||||
'i-ant-design:arrow-up-outlined',
|
||||
'i-ant-design:arrows-alt-outlined',
|
||||
'i-ant-design:audio-filled',
|
||||
'i-ant-design:audio-muted-outlined',
|
||||
'i-ant-design:audio-outlined',
|
||||
'i-ant-design:audio-twotone',
|
||||
'i-ant-design:audit-outlined',
|
||||
'i-ant-design:backward-filled',
|
||||
'i-ant-design:backward-outlined',
|
||||
'i-ant-design:bank-filled',
|
||||
'i-ant-design:bank-outlined',
|
||||
'i-ant-design:bank-twotone',
|
||||
'i-ant-design:bar-chart-outlined',
|
||||
'i-ant-design:barcode-outlined',
|
||||
'i-ant-design:bars-outlined',
|
||||
'i-ant-design:behance-circle-filled',
|
||||
'i-ant-design:behance-outlined',
|
||||
'i-ant-design:behance-square-filled',
|
||||
'i-ant-design:behance-square-outlined',
|
||||
'i-ant-design:bell-filled',
|
||||
'i-ant-design:bell-outlined',
|
||||
'i-ant-design:bell-twotone',
|
||||
'i-ant-design:bg-colors-outlined',
|
||||
'i-ant-design:block-outlined',
|
||||
'i-ant-design:bold-outlined',
|
||||
'i-ant-design:book-filled',
|
||||
'i-ant-design:book-outlined',
|
||||
'i-ant-design:book-twotone',
|
||||
'i-ant-design:border-bottom-outlined',
|
||||
'i-ant-design:border-horizontal-outlined',
|
||||
'i-ant-design:border-inner-outlined',
|
||||
'i-ant-design:border-left-outlined',
|
||||
'i-ant-design:border-outer-outlined',
|
||||
'i-ant-design:border-outlined',
|
||||
'i-ant-design:border-right-outlined',
|
||||
'i-ant-design:border-top-outlined',
|
||||
'i-ant-design:border-verticle-outlined',
|
||||
'i-ant-design:borderless-table-outlined',
|
||||
'i-ant-design:box-plot-filled',
|
||||
'i-ant-design:box-plot-outlined',
|
||||
'i-ant-design:box-plot-twotone',
|
||||
'i-ant-design:branches-outlined',
|
||||
'i-ant-design:bug-filled',
|
||||
'i-ant-design:bug-outlined',
|
||||
'i-ant-design:bug-twotone',
|
||||
'i-ant-design:build-filled',
|
||||
'i-ant-design:build-outlined',
|
||||
'i-ant-design:build-twotone',
|
||||
'i-ant-design:bulb-filled',
|
||||
'i-ant-design:bulb-outlined',
|
||||
'i-ant-design:bulb-twotone',
|
||||
'i-ant-design:calculator-filled',
|
||||
'i-ant-design:calculator-outlined',
|
||||
'i-ant-design:calculator-twotone',
|
||||
'i-ant-design:calendar-filled',
|
||||
'i-ant-design:calendar-outlined',
|
||||
'i-ant-design:calendar-twotone',
|
||||
'i-ant-design:camera-filled',
|
||||
'i-ant-design:camera-outlined',
|
||||
'i-ant-design:camera-twotone',
|
||||
'i-ant-design:car-filled',
|
||||
'i-ant-design:car-outlined',
|
||||
'i-ant-design:car-twotone',
|
||||
'i-ant-design:caret-down-filled',
|
||||
'i-ant-design:caret-down-outlined',
|
||||
'i-ant-design:caret-left-filled',
|
||||
'i-ant-design:caret-left-outlined',
|
||||
'i-ant-design:caret-right-filled',
|
||||
'i-ant-design:caret-right-outlined',
|
||||
'i-ant-design:caret-up-filled',
|
||||
'i-ant-design:caret-up-outlined',
|
||||
'i-ant-design:carry-out-filled',
|
||||
'i-ant-design:carry-out-outlined',
|
||||
'i-ant-design:carry-out-twotone',
|
||||
'i-ant-design:check-circle-filled',
|
||||
'i-ant-design:check-circle-outlined',
|
||||
'i-ant-design:check-circle-twotone',
|
||||
'i-ant-design:check-outlined',
|
||||
'i-ant-design:check-square-filled',
|
||||
'i-ant-design:check-square-outlined',
|
||||
'i-ant-design:check-square-twotone',
|
||||
'i-ant-design:chrome-filled',
|
||||
'i-ant-design:chrome-outlined',
|
||||
'i-ant-design:ci-circle-filled',
|
||||
'i-ant-design:ci-circle-outlined',
|
||||
'i-ant-design:ci-circle-twotone',
|
||||
'i-ant-design:ci-outlined',
|
||||
'i-ant-design:ci-twotone',
|
||||
'i-ant-design:clear-outlined',
|
||||
'i-ant-design:clock-circle-filled',
|
||||
'i-ant-design:clock-circle-outlined',
|
||||
'i-ant-design:clock-circle-twotone',
|
||||
'i-ant-design:close-circle-filled',
|
||||
'i-ant-design:close-circle-outlined',
|
||||
'i-ant-design:close-circle-twotone',
|
||||
'i-ant-design:close-outlined',
|
||||
'i-ant-design:close-square-filled',
|
||||
'i-ant-design:close-square-outlined',
|
||||
'i-ant-design:close-square-twotone',
|
||||
'i-ant-design:cloud-download-outlined',
|
||||
'i-ant-design:cloud-filled',
|
||||
'i-ant-design:cloud-outlined',
|
||||
'i-ant-design:cloud-server-outlined',
|
||||
'i-ant-design:cloud-sync-outlined',
|
||||
'i-ant-design:cloud-twotone',
|
||||
'i-ant-design:cloud-upload-outlined',
|
||||
'i-ant-design:cluster-outlined',
|
||||
'i-ant-design:code-filled',
|
||||
'i-ant-design:code-outlined',
|
||||
'i-ant-design:code-sandbox-circle-filled',
|
||||
'i-ant-design:code-sandbox-outlined',
|
||||
'i-ant-design:code-sandbox-square-filled',
|
||||
'i-ant-design:code-twotone',
|
||||
'i-ant-design:codepen-circle-filled',
|
||||
'i-ant-design:codepen-circle-outlined',
|
||||
'i-ant-design:codepen-outlined',
|
||||
'i-ant-design:codepen-square-filled',
|
||||
'i-ant-design:coffee-outlined',
|
||||
'i-ant-design:column-height-outlined',
|
||||
'i-ant-design:column-width-outlined',
|
||||
'i-ant-design:comment-outlined',
|
||||
'i-ant-design:compass-filled',
|
||||
'i-ant-design:compass-outlined',
|
||||
'i-ant-design:compass-twotone',
|
||||
'i-ant-design:compress-outlined',
|
||||
'i-ant-design:console-sql-outlined',
|
||||
'i-ant-design:contacts-filled',
|
||||
'i-ant-design:contacts-outlined',
|
||||
'i-ant-design:contacts-twotone',
|
||||
'i-ant-design:container-filled',
|
||||
'i-ant-design:container-outlined',
|
||||
'i-ant-design:container-twotone',
|
||||
'i-ant-design:control-filled',
|
||||
'i-ant-design:control-outlined',
|
||||
'i-ant-design:control-twotone',
|
||||
'i-ant-design:copy-filled',
|
||||
'i-ant-design:copy-outlined',
|
||||
'i-ant-design:copy-twotone',
|
||||
'i-ant-design:copyright-circle-filled',
|
||||
'i-ant-design:copyright-circle-outlined',
|
||||
'i-ant-design:copyright-circle-twotone',
|
||||
'i-ant-design:copyright-outlined',
|
||||
'i-ant-design:copyright-twotone',
|
||||
'i-ant-design:credit-card-filled',
|
||||
'i-ant-design:credit-card-outlined',
|
||||
'i-ant-design:credit-card-twotone',
|
||||
'i-ant-design:crown-filled',
|
||||
'i-ant-design:crown-outlined',
|
||||
'i-ant-design:crown-twotone',
|
||||
'i-ant-design:customer-service-filled',
|
||||
'i-ant-design:customer-service-outlined',
|
||||
'i-ant-design:customer-service-twotone',
|
||||
'i-ant-design:dash-outlined',
|
||||
'i-ant-design:dashboard-filled',
|
||||
'i-ant-design:dashboard-outlined',
|
||||
'i-ant-design:dashboard-twotone',
|
||||
'i-ant-design:database-filled',
|
||||
'i-ant-design:database-outlined',
|
||||
'i-ant-design:database-twotone',
|
||||
'i-ant-design:delete-column-outlined',
|
||||
'i-ant-design:delete-filled',
|
||||
'i-ant-design:delete-outlined',
|
||||
'i-ant-design:delete-row-outlined',
|
||||
'i-ant-design:delete-twotone',
|
||||
'i-ant-design:delivered-procedure-outlined',
|
||||
'i-ant-design:deployment-unit-outlined',
|
||||
'i-ant-design:desktop-outlined',
|
||||
'i-ant-design:diff-filled',
|
||||
'i-ant-design:diff-outlined',
|
||||
'i-ant-design:diff-twotone',
|
||||
'i-ant-design:dingding-outlined',
|
||||
'i-ant-design:dingtalk-circle-filled',
|
||||
'i-ant-design:dingtalk-outlined',
|
||||
'i-ant-design:dingtalk-square-filled',
|
||||
'i-ant-design:disconnect-outlined',
|
||||
'i-ant-design:dislike-filled',
|
||||
'i-ant-design:dislike-outlined',
|
||||
'i-ant-design:dislike-twotone',
|
||||
'i-ant-design:dollar-circle-filled',
|
||||
'i-ant-design:dollar-circle-outlined',
|
||||
'i-ant-design:dollar-circle-twotone',
|
||||
'i-ant-design:dollar-outlined',
|
||||
'i-ant-design:dollar-twotone',
|
||||
'i-ant-design:dot-chart-outlined',
|
||||
'i-ant-design:double-left-outlined',
|
||||
'i-ant-design:double-right-outlined',
|
||||
'i-ant-design:down-circle-filled',
|
||||
'i-ant-design:down-circle-outlined',
|
||||
'i-ant-design:down-circle-twotone',
|
||||
'i-ant-design:down-outlined',
|
||||
'i-ant-design:down-square-filled',
|
||||
'i-ant-design:down-square-outlined',
|
||||
'i-ant-design:down-square-twotone',
|
||||
'i-ant-design:download-outlined',
|
||||
'i-ant-design:drag-outlined',
|
||||
'i-ant-design:dribbble-circle-filled',
|
||||
'i-ant-design:dribbble-outlined',
|
||||
'i-ant-design:dribbble-square-filled',
|
||||
'i-ant-design:dribbble-square-outlined',
|
||||
'i-ant-design:dropbox-circle-filled',
|
||||
'i-ant-design:dropbox-outlined',
|
||||
'i-ant-design:dropbox-square-filled',
|
||||
'i-ant-design:edit-filled',
|
||||
'i-ant-design:edit-outlined',
|
||||
'i-ant-design:edit-twotone',
|
||||
'i-ant-design:ellipsis-outlined',
|
||||
'i-ant-design:enter-outlined',
|
||||
'i-ant-design:environment-filled',
|
||||
'i-ant-design:environment-outlined',
|
||||
'i-ant-design:environment-twotone',
|
||||
'i-ant-design:euro-circle-filled',
|
||||
'i-ant-design:euro-circle-outlined',
|
||||
'i-ant-design:euro-circle-twotone',
|
||||
'i-ant-design:euro-outlined',
|
||||
'i-ant-design:euro-twotone',
|
||||
'i-ant-design:exception-outlined',
|
||||
'i-ant-design:exclamation-circle-filled',
|
||||
'i-ant-design:exclamation-circle-outlined',
|
||||
'i-ant-design:exclamation-circle-twotone',
|
||||
'i-ant-design:exclamation-outlined',
|
||||
'i-ant-design:expand-alt-outlined',
|
||||
'i-ant-design:expand-outlined',
|
||||
'i-ant-design:experiment-filled',
|
||||
'i-ant-design:experiment-outlined',
|
||||
'i-ant-design:experiment-twotone',
|
||||
'i-ant-design:export-outlined',
|
||||
'i-ant-design:eye-filled',
|
||||
'i-ant-design:eye-invisible-filled',
|
||||
'i-ant-design:eye-invisible-outlined',
|
||||
'i-ant-design:eye-invisible-twotone',
|
||||
'i-ant-design:eye-outlined',
|
||||
'i-ant-design:eye-twotone',
|
||||
'i-ant-design:facebook-filled',
|
||||
'i-ant-design:facebook-outlined',
|
||||
'i-ant-design:fall-outlined',
|
||||
'i-ant-design:fast-backward-filled',
|
||||
'i-ant-design:fast-backward-outlined',
|
||||
'i-ant-design:fast-forward-filled',
|
||||
'i-ant-design:fast-forward-outlined',
|
||||
'i-ant-design:field-binary-outlined',
|
||||
'i-ant-design:field-number-outlined',
|
||||
'i-ant-design:field-string-outlined',
|
||||
'i-ant-design:field-time-outlined',
|
||||
'i-ant-design:file-add-filled',
|
||||
'i-ant-design:file-add-outlined',
|
||||
'i-ant-design:file-add-twotone',
|
||||
'i-ant-design:file-done-outlined',
|
||||
'i-ant-design:file-excel-filled',
|
||||
'i-ant-design:file-excel-outlined',
|
||||
'i-ant-design:file-excel-twotone',
|
||||
'i-ant-design:file-exclamation-filled',
|
||||
'i-ant-design:file-exclamation-outlined',
|
||||
'i-ant-design:file-exclamation-twotone',
|
||||
'i-ant-design:file-filled',
|
||||
'i-ant-design:file-gif-outlined',
|
||||
'i-ant-design:file-image-filled',
|
||||
'i-ant-design:file-image-outlined',
|
||||
'i-ant-design:file-image-twotone',
|
||||
'i-ant-design:file-jpg-outlined',
|
||||
'i-ant-design:file-markdown-filled',
|
||||
'i-ant-design:file-markdown-outlined',
|
||||
'i-ant-design:file-markdown-twotone',
|
||||
'i-ant-design:file-outlined',
|
||||
'i-ant-design:file-pdf-filled',
|
||||
'i-ant-design:file-pdf-outlined',
|
||||
'i-ant-design:file-pdf-twotone',
|
||||
'i-ant-design:file-ppt-filled',
|
||||
'i-ant-design:file-ppt-outlined',
|
||||
'i-ant-design:file-ppt-twotone',
|
||||
'i-ant-design:file-protect-outlined',
|
||||
'i-ant-design:file-search-outlined',
|
||||
'i-ant-design:file-sync-outlined',
|
||||
'i-ant-design:file-text-filled',
|
||||
'i-ant-design:file-text-outlined',
|
||||
'i-ant-design:file-text-twotone',
|
||||
'i-ant-design:file-twotone',
|
||||
'i-ant-design:file-unknown-filled',
|
||||
'i-ant-design:file-unknown-outlined',
|
||||
'i-ant-design:file-unknown-twotone',
|
||||
'i-ant-design:file-word-filled',
|
||||
'i-ant-design:file-word-outlined',
|
||||
'i-ant-design:file-word-twotone',
|
||||
'i-ant-design:file-zip-filled',
|
||||
'i-ant-design:file-zip-outlined',
|
||||
'i-ant-design:file-zip-twotone',
|
||||
'i-ant-design:filter-filled',
|
||||
'i-ant-design:filter-outlined',
|
||||
'i-ant-design:filter-twotone',
|
||||
'i-ant-design:fire-filled',
|
||||
'i-ant-design:fire-outlined',
|
||||
'i-ant-design:fire-twotone',
|
||||
'i-ant-design:flag-filled',
|
||||
'i-ant-design:flag-outlined',
|
||||
'i-ant-design:flag-twotone',
|
||||
'i-ant-design:folder-add-filled',
|
||||
'i-ant-design:folder-add-outlined',
|
||||
'i-ant-design:folder-add-twotone',
|
||||
'i-ant-design:folder-filled',
|
||||
'i-ant-design:folder-open-filled',
|
||||
'i-ant-design:folder-open-outlined',
|
||||
'i-ant-design:folder-open-twotone',
|
||||
'i-ant-design:folder-outlined',
|
||||
'i-ant-design:folder-twotone',
|
||||
'i-ant-design:folder-view-outlined',
|
||||
'i-ant-design:font-colors-outlined',
|
||||
'i-ant-design:font-size-outlined',
|
||||
'i-ant-design:fork-outlined',
|
||||
'i-ant-design:form-outlined',
|
||||
'i-ant-design:format-painter-filled',
|
||||
'i-ant-design:format-painter-outlined',
|
||||
'i-ant-design:forward-filled',
|
||||
'i-ant-design:forward-outlined',
|
||||
'i-ant-design:frown-filled',
|
||||
'i-ant-design:frown-outlined',
|
||||
'i-ant-design:frown-twotone',
|
||||
'i-ant-design:fullscreen-exit-outlined',
|
||||
'i-ant-design:fullscreen-outlined',
|
||||
'i-ant-design:function-outlined',
|
||||
'i-ant-design:fund-filled',
|
||||
'i-ant-design:fund-outlined',
|
||||
'i-ant-design:fund-projection-screen-outlined',
|
||||
'i-ant-design:fund-twotone',
|
||||
'i-ant-design:fund-view-outlined',
|
||||
'i-ant-design:funnel-plot-filled',
|
||||
'i-ant-design:funnel-plot-outlined',
|
||||
'i-ant-design:funnel-plot-twotone',
|
||||
'i-ant-design:gateway-outlined',
|
||||
'i-ant-design:gif-outlined',
|
||||
'i-ant-design:gift-filled',
|
||||
'i-ant-design:gift-outlined',
|
||||
'i-ant-design:gift-twotone',
|
||||
'i-ant-design:github-filled',
|
||||
'i-ant-design:github-outlined',
|
||||
'i-ant-design:gitlab-filled',
|
||||
'i-ant-design:gitlab-outlined',
|
||||
'i-ant-design:global-outlined',
|
||||
'i-ant-design:gold-filled',
|
||||
'i-ant-design:gold-outlined',
|
||||
'i-ant-design:gold-twotone',
|
||||
'i-ant-design:golden-filled',
|
||||
'i-ant-design:google-circle-filled',
|
||||
'i-ant-design:google-outlined',
|
||||
'i-ant-design:google-plus-circle-filled',
|
||||
'i-ant-design:google-plus-outlined',
|
||||
'i-ant-design:google-plus-square-filled',
|
||||
'i-ant-design:google-square-filled',
|
||||
'i-ant-design:group-outlined',
|
||||
'i-ant-design:hdd-filled',
|
||||
'i-ant-design:hdd-outlined',
|
||||
'i-ant-design:hdd-twotone',
|
||||
'i-ant-design:heart-filled',
|
||||
'i-ant-design:heart-outlined',
|
||||
'i-ant-design:heart-twotone',
|
||||
'i-ant-design:heat-map-outlined',
|
||||
'i-ant-design:highlight-filled',
|
||||
'i-ant-design:highlight-outlined',
|
||||
'i-ant-design:highlight-twotone',
|
||||
'i-ant-design:history-outlined',
|
||||
'i-ant-design:home-filled',
|
||||
'i-ant-design:home-outlined',
|
||||
'i-ant-design:home-twotone',
|
||||
'i-ant-design:hourglass-filled',
|
||||
'i-ant-design:hourglass-outlined',
|
||||
'i-ant-design:hourglass-twotone',
|
||||
'i-ant-design:html5-filled',
|
||||
'i-ant-design:html5-outlined',
|
||||
'i-ant-design:html5-twotone',
|
||||
'i-ant-design:idcard-filled',
|
||||
'i-ant-design:idcard-outlined',
|
||||
'i-ant-design:idcard-twotone',
|
||||
'i-ant-design:ie-circle-filled',
|
||||
'i-ant-design:ie-outlined',
|
||||
'i-ant-design:ie-square-filled',
|
||||
'i-ant-design:import-outlined',
|
||||
'i-ant-design:inbox-outlined',
|
||||
'i-ant-design:info-circle-filled',
|
||||
'i-ant-design:info-circle-outlined',
|
||||
'i-ant-design:info-circle-twotone',
|
||||
'i-ant-design:info-outlined',
|
||||
'i-ant-design:insert-row-above-outlined',
|
||||
'i-ant-design:insert-row-below-outlined',
|
||||
'i-ant-design:insert-row-left-outlined',
|
||||
'i-ant-design:insert-row-right-outlined',
|
||||
'i-ant-design:instagram-filled',
|
||||
'i-ant-design:instagram-outlined',
|
||||
'i-ant-design:insurance-filled',
|
||||
'i-ant-design:insurance-outlined',
|
||||
'i-ant-design:insurance-twotone',
|
||||
'i-ant-design:interaction-filled',
|
||||
'i-ant-design:interaction-outlined',
|
||||
'i-ant-design:interaction-twotone',
|
||||
'i-ant-design:issues-close-outlined',
|
||||
'i-ant-design:italic-outlined',
|
||||
'i-ant-design:key-outlined',
|
||||
'i-ant-design:laptop-outlined',
|
||||
'i-ant-design:layout-filled',
|
||||
'i-ant-design:layout-outlined',
|
||||
'i-ant-design:layout-twotone',
|
||||
'i-ant-design:left-circle-filled',
|
||||
'i-ant-design:left-circle-outlined',
|
||||
'i-ant-design:left-circle-twotone',
|
||||
'i-ant-design:left-outlined',
|
||||
'i-ant-design:left-square-filled',
|
||||
'i-ant-design:left-square-outlined',
|
||||
'i-ant-design:left-square-twotone',
|
||||
'i-ant-design:like-filled',
|
||||
'i-ant-design:like-outlined',
|
||||
'i-ant-design:like-twotone',
|
||||
'i-ant-design:line-chart-outlined',
|
||||
'i-ant-design:line-height-outlined',
|
||||
'i-ant-design:line-outlined',
|
||||
'i-ant-design:link-outlined',
|
||||
'i-ant-design:linkedin-filled',
|
||||
'i-ant-design:linkedin-outlined',
|
||||
'i-ant-design:loading-3-quarters-outlined',
|
||||
'i-ant-design:loading-outlined',
|
||||
'i-ant-design:lock-filled',
|
||||
'i-ant-design:lock-outlined',
|
||||
'i-ant-design:lock-twotone',
|
||||
'i-ant-design:login-outlined',
|
||||
'i-ant-design:logout-outlined',
|
||||
'i-ant-design:mac-command-filled',
|
||||
'i-ant-design:mac-command-outlined',
|
||||
'i-ant-design:mail-filled',
|
||||
'i-ant-design:mail-outlined',
|
||||
'i-ant-design:mail-twotone',
|
||||
'i-ant-design:man-outlined',
|
||||
'i-ant-design:medicine-box-filled',
|
||||
'i-ant-design:medicine-box-outlined',
|
||||
'i-ant-design:medicine-box-twotone',
|
||||
'i-ant-design:medium-circle-filled',
|
||||
'i-ant-design:medium-outlined',
|
||||
'i-ant-design:medium-square-filled',
|
||||
'i-ant-design:medium-workmark-outlined',
|
||||
'i-ant-design:meh-filled',
|
||||
'i-ant-design:meh-outlined',
|
||||
'i-ant-design:meh-twotone',
|
||||
'i-ant-design:menu-fold-outlined',
|
||||
'i-ant-design:menu-outlined',
|
||||
'i-ant-design:menu-unfold-outlined',
|
||||
'i-ant-design:merge-cells-outlined',
|
||||
'i-ant-design:message-filled',
|
||||
'i-ant-design:message-outlined',
|
||||
'i-ant-design:message-twotone',
|
||||
'i-ant-design:minus-circle-filled',
|
||||
'i-ant-design:minus-circle-outlined',
|
||||
'i-ant-design:minus-circle-twotone',
|
||||
'i-ant-design:minus-outlined',
|
||||
'i-ant-design:minus-square-filled',
|
||||
'i-ant-design:minus-square-outlined',
|
||||
'i-ant-design:minus-square-twotone',
|
||||
'i-ant-design:mobile-filled',
|
||||
'i-ant-design:mobile-outlined',
|
||||
'i-ant-design:mobile-twotone',
|
||||
'i-ant-design:money-collect-filled',
|
||||
'i-ant-design:money-collect-outlined',
|
||||
'i-ant-design:money-collect-twotone',
|
||||
'i-ant-design:monitor-outlined',
|
||||
'i-ant-design:more-outlined',
|
||||
'i-ant-design:node-collapse-outlined',
|
||||
'i-ant-design:node-expand-outlined',
|
||||
'i-ant-design:node-index-outlined',
|
||||
'i-ant-design:notification-filled',
|
||||
'i-ant-design:notification-outlined',
|
||||
'i-ant-design:notification-twotone',
|
||||
'i-ant-design:number-outlined',
|
||||
'i-ant-design:one-to-one-outlined',
|
||||
'i-ant-design:ordered-list-outlined',
|
||||
'i-ant-design:paper-clip-outlined',
|
||||
'i-ant-design:partition-outlined',
|
||||
'i-ant-design:pause-circle-filled',
|
||||
'i-ant-design:pause-circle-outlined',
|
||||
'i-ant-design:pause-circle-twotone',
|
||||
'i-ant-design:pause-outlined',
|
||||
'i-ant-design:pay-circle-filled',
|
||||
'i-ant-design:pay-circle-outlined',
|
||||
'i-ant-design:percentage-outlined',
|
||||
'i-ant-design:phone-filled',
|
||||
'i-ant-design:phone-outlined',
|
||||
'i-ant-design:phone-twotone',
|
||||
'i-ant-design:pic-center-outlined',
|
||||
'i-ant-design:pic-left-outlined',
|
||||
'i-ant-design:pic-right-outlined',
|
||||
'i-ant-design:picture-filled',
|
||||
'i-ant-design:picture-outlined',
|
||||
'i-ant-design:picture-twotone',
|
||||
'i-ant-design:pie-chart-filled',
|
||||
'i-ant-design:pie-chart-outlined',
|
||||
'i-ant-design:pie-chart-twotone',
|
||||
'i-ant-design:play-circle-filled',
|
||||
'i-ant-design:play-circle-outlined',
|
||||
'i-ant-design:play-circle-twotone',
|
||||
'i-ant-design:play-square-filled',
|
||||
'i-ant-design:play-square-outlined',
|
||||
'i-ant-design:play-square-twotone',
|
||||
'i-ant-design:plus-circle-filled',
|
||||
'i-ant-design:plus-circle-outlined',
|
||||
'i-ant-design:plus-circle-twotone',
|
||||
'i-ant-design:plus-outlined',
|
||||
'i-ant-design:plus-square-filled',
|
||||
'i-ant-design:plus-square-outlined',
|
||||
'i-ant-design:plus-square-twotone',
|
||||
'i-ant-design:pound-circle-filled',
|
||||
'i-ant-design:pound-circle-outlined',
|
||||
'i-ant-design:pound-circle-twotone',
|
||||
'i-ant-design:pound-outlined',
|
||||
'i-ant-design:poweroff-outlined',
|
||||
'i-ant-design:printer-filled',
|
||||
'i-ant-design:printer-outlined',
|
||||
'i-ant-design:printer-twotone',
|
||||
'i-ant-design:profile-filled',
|
||||
'i-ant-design:profile-outlined',
|
||||
'i-ant-design:profile-twotone',
|
||||
'i-ant-design:project-filled',
|
||||
'i-ant-design:project-outlined',
|
||||
'i-ant-design:project-twotone',
|
||||
'i-ant-design:property-safety-filled',
|
||||
'i-ant-design:property-safety-outlined',
|
||||
'i-ant-design:property-safety-twotone',
|
||||
'i-ant-design:pull-request-outlined',
|
||||
'i-ant-design:pushpin-filled',
|
||||
'i-ant-design:pushpin-outlined',
|
||||
'i-ant-design:pushpin-twotone',
|
||||
'i-ant-design:qq-circle-filled',
|
||||
'i-ant-design:qq-outlined',
|
||||
'i-ant-design:qq-square-filled',
|
||||
'i-ant-design:qrcode-outlined',
|
||||
'i-ant-design:question-circle-filled',
|
||||
'i-ant-design:question-circle-outlined',
|
||||
'i-ant-design:question-circle-twotone',
|
||||
'i-ant-design:question-outlined',
|
||||
'i-ant-design:radar-chart-outlined',
|
||||
'i-ant-design:radius-bottomleft-outlined',
|
||||
'i-ant-design:radius-bottomright-outlined',
|
||||
'i-ant-design:radius-setting-outlined',
|
||||
'i-ant-design:radius-upleft-outlined',
|
||||
'i-ant-design:radius-upright-outlined',
|
||||
'i-ant-design:read-filled',
|
||||
'i-ant-design:read-outlined',
|
||||
'i-ant-design:reconciliation-filled',
|
||||
'i-ant-design:reconciliation-outlined',
|
||||
'i-ant-design:reconciliation-twotone',
|
||||
'i-ant-design:red-envelope-filled',
|
||||
'i-ant-design:red-envelope-outlined',
|
||||
'i-ant-design:red-envelope-twotone',
|
||||
'i-ant-design:reddit-circle-filled',
|
||||
'i-ant-design:reddit-outlined',
|
||||
'i-ant-design:reddit-square-filled',
|
||||
'i-ant-design:redo-outlined',
|
||||
'i-ant-design:reload-outlined',
|
||||
'i-ant-design:rest-filled',
|
||||
'i-ant-design:rest-outlined',
|
||||
'i-ant-design:rest-twotone',
|
||||
'i-ant-design:retweet-outlined',
|
||||
'i-ant-design:right-circle-filled',
|
||||
'i-ant-design:right-circle-outlined',
|
||||
'i-ant-design:right-circle-twotone',
|
||||
'i-ant-design:right-outlined',
|
||||
'i-ant-design:right-square-filled',
|
||||
'i-ant-design:right-square-outlined',
|
||||
'i-ant-design:right-square-twotone',
|
||||
'i-ant-design:rise-outlined',
|
||||
'i-ant-design:robot-filled',
|
||||
'i-ant-design:robot-outlined',
|
||||
'i-ant-design:rocket-filled',
|
||||
'i-ant-design:rocket-outlined',
|
||||
'i-ant-design:rocket-twotone',
|
||||
'i-ant-design:rollback-outlined',
|
||||
'i-ant-design:rotate-left-outlined',
|
||||
'i-ant-design:rotate-right-outlined',
|
||||
'i-ant-design:safety-certificate-filled',
|
||||
'i-ant-design:safety-certificate-outlined',
|
||||
'i-ant-design:safety-certificate-twotone',
|
||||
'i-ant-design:safety-outlined',
|
||||
'i-ant-design:save-filled',
|
||||
'i-ant-design:save-outlined',
|
||||
'i-ant-design:save-twotone',
|
||||
'i-ant-design:scan-outlined',
|
||||
'i-ant-design:schedule-filled',
|
||||
'i-ant-design:schedule-outlined',
|
||||
'i-ant-design:schedule-twotone',
|
||||
'i-ant-design:scissor-outlined',
|
||||
'i-ant-design:search-outlined',
|
||||
'i-ant-design:security-scan-filled',
|
||||
'i-ant-design:security-scan-outlined',
|
||||
'i-ant-design:security-scan-twotone',
|
||||
'i-ant-design:select-outlined',
|
||||
'i-ant-design:send-outlined',
|
||||
'i-ant-design:setting-filled',
|
||||
'i-ant-design:setting-outlined',
|
||||
'i-ant-design:setting-twotone',
|
||||
'i-ant-design:shake-outlined',
|
||||
'i-ant-design:share-alt-outlined',
|
||||
'i-ant-design:shop-filled',
|
||||
'i-ant-design:shop-outlined',
|
||||
'i-ant-design:shop-twotone',
|
||||
'i-ant-design:shopping-cart-outlined',
|
||||
'i-ant-design:shopping-filled',
|
||||
'i-ant-design:shopping-outlined',
|
||||
'i-ant-design:shopping-twotone',
|
||||
'i-ant-design:shrink-outlined',
|
||||
'i-ant-design:signal-filled',
|
||||
'i-ant-design:sisternode-outlined',
|
||||
'i-ant-design:sketch-circle-filled',
|
||||
'i-ant-design:sketch-outlined',
|
||||
'i-ant-design:sketch-square-filled',
|
||||
'i-ant-design:skin-filled',
|
||||
'i-ant-design:skin-outlined',
|
||||
'i-ant-design:skin-twotone',
|
||||
'i-ant-design:skype-filled',
|
||||
'i-ant-design:skype-outlined',
|
||||
'i-ant-design:slack-circle-filled',
|
||||
'i-ant-design:slack-outlined',
|
||||
'i-ant-design:slack-square-filled',
|
||||
'i-ant-design:slack-square-outlined',
|
||||
'i-ant-design:sliders-filled',
|
||||
'i-ant-design:sliders-outlined',
|
||||
'i-ant-design:sliders-twotone',
|
||||
'i-ant-design:small-dash-outlined',
|
||||
'i-ant-design:smile-filled',
|
||||
'i-ant-design:smile-outlined',
|
||||
'i-ant-design:smile-twotone',
|
||||
'i-ant-design:snippets-filled',
|
||||
'i-ant-design:snippets-outlined',
|
||||
'i-ant-design:snippets-twotone',
|
||||
'i-ant-design:solution-outlined',
|
||||
'i-ant-design:sort-ascending-outlined',
|
||||
'i-ant-design:sort-descending-outlined',
|
||||
'i-ant-design:sound-filled',
|
||||
'i-ant-design:sound-outlined',
|
||||
'i-ant-design:sound-twotone',
|
||||
'i-ant-design:split-cells-outlined',
|
||||
'i-ant-design:star-filled',
|
||||
'i-ant-design:star-outlined',
|
||||
'i-ant-design:star-twotone',
|
||||
'i-ant-design:step-backward-filled',
|
||||
'i-ant-design:step-backward-outlined',
|
||||
'i-ant-design:step-forward-filled',
|
||||
'i-ant-design:step-forward-outlined',
|
||||
'i-ant-design:stock-outlined',
|
||||
'i-ant-design:stop-filled',
|
||||
'i-ant-design:stop-outlined',
|
||||
'i-ant-design:stop-twotone',
|
||||
'i-ant-design:strikethrough-outlined',
|
||||
'i-ant-design:subnode-outlined',
|
||||
'i-ant-design:swap-left-outlined',
|
||||
'i-ant-design:swap-outlined',
|
||||
'i-ant-design:swap-right-outlined',
|
||||
'i-ant-design:switcher-filled',
|
||||
'i-ant-design:switcher-outlined',
|
||||
'i-ant-design:switcher-twotone',
|
||||
'i-ant-design:sync-outlined',
|
||||
'i-ant-design:table-outlined',
|
||||
'i-ant-design:tablet-filled',
|
||||
'i-ant-design:tablet-outlined',
|
||||
'i-ant-design:tablet-twotone',
|
||||
'i-ant-design:tag-filled',
|
||||
'i-ant-design:tag-outlined',
|
||||
'i-ant-design:tag-twotone',
|
||||
'i-ant-design:tags-filled',
|
||||
'i-ant-design:tags-outlined',
|
||||
'i-ant-design:tags-twotone',
|
||||
'i-ant-design:taobao-circle-filled',
|
||||
'i-ant-design:taobao-circle-outlined',
|
||||
'i-ant-design:taobao-outlined',
|
||||
'i-ant-design:taobao-square-filled',
|
||||
'i-ant-design:team-outlined',
|
||||
'i-ant-design:thunderbolt-filled',
|
||||
'i-ant-design:thunderbolt-outlined',
|
||||
'i-ant-design:thunderbolt-twotone',
|
||||
'i-ant-design:to-top-outlined',
|
||||
'i-ant-design:tool-filled',
|
||||
'i-ant-design:tool-outlined',
|
||||
'i-ant-design:tool-twotone',
|
||||
'i-ant-design:trademark-circle-filled',
|
||||
'i-ant-design:trademark-circle-outlined',
|
||||
'i-ant-design:trademark-circle-twotone',
|
||||
'i-ant-design:trademark-outlined',
|
||||
'i-ant-design:transaction-outlined',
|
||||
'i-ant-design:translation-outlined',
|
||||
'i-ant-design:trophy-filled',
|
||||
'i-ant-design:trophy-outlined',
|
||||
'i-ant-design:trophy-twotone',
|
||||
'i-ant-design:twitter-circle-filled',
|
||||
'i-ant-design:twitter-outlined',
|
||||
'i-ant-design:twitter-square-filled',
|
||||
'i-ant-design:underline-outlined',
|
||||
'i-ant-design:undo-outlined',
|
||||
'i-ant-design:ungroup-outlined',
|
||||
'i-ant-design:unlock-filled',
|
||||
'i-ant-design:unlock-outlined',
|
||||
'i-ant-design:unlock-twotone',
|
||||
'i-ant-design:unordered-list-outlined',
|
||||
'i-ant-design:up-circle-filled',
|
||||
'i-ant-design:up-circle-outlined',
|
||||
'i-ant-design:up-circle-twotone',
|
||||
'i-ant-design:up-outlined',
|
||||
'i-ant-design:up-square-filled',
|
||||
'i-ant-design:up-square-outlined',
|
||||
'i-ant-design:up-square-twotone',
|
||||
'i-ant-design:upload-outlined',
|
||||
'i-ant-design:usb-filled',
|
||||
'i-ant-design:usb-outlined',
|
||||
'i-ant-design:usb-twotone',
|
||||
'i-ant-design:user-add-outlined',
|
||||
'i-ant-design:user-delete-outlined',
|
||||
'i-ant-design:user-outlined',
|
||||
'i-ant-design:user-switch-outlined',
|
||||
'i-ant-design:usergroup-add-outlined',
|
||||
'i-ant-design:usergroup-delete-outlined',
|
||||
'i-ant-design:verified-outlined',
|
||||
'i-ant-design:vertical-align-bottom-outlined',
|
||||
'i-ant-design:vertical-align-middle-outlined',
|
||||
'i-ant-design:vertical-align-top-outlined',
|
||||
'i-ant-design:vertical-left-outlined',
|
||||
'i-ant-design:vertical-right-outlined',
|
||||
'i-ant-design:video-camera-add-outlined',
|
||||
'i-ant-design:video-camera-filled',
|
||||
'i-ant-design:video-camera-outlined',
|
||||
'i-ant-design:video-camera-twotone',
|
||||
'i-ant-design:wallet-filled',
|
||||
'i-ant-design:wallet-outlined',
|
||||
'i-ant-design:wallet-twotone',
|
||||
'i-ant-design:warning-filled',
|
||||
'i-ant-design:warning-outlined',
|
||||
'i-ant-design:warning-twotone',
|
||||
'i-ant-design:wechat-filled',
|
||||
'i-ant-design:wechat-outlined',
|
||||
'i-ant-design:weibo-circle-filled',
|
||||
'i-ant-design:weibo-circle-outlined',
|
||||
'i-ant-design:weibo-outlined',
|
||||
'i-ant-design:weibo-square-filled',
|
||||
'i-ant-design:weibo-square-outlined',
|
||||
'i-ant-design:whats-app-outlined',
|
||||
'i-ant-design:wifi-outlined',
|
||||
'i-ant-design:windows-filled',
|
||||
'i-ant-design:windows-outlined',
|
||||
'i-ant-design:woman-outlined',
|
||||
'i-ant-design:yahoo-filled',
|
||||
'i-ant-design:yahoo-outlined',
|
||||
'i-ant-design:youtube-filled',
|
||||
'i-ant-design:youtube-outlined',
|
||||
'i-ant-design:yuque-filled',
|
||||
'i-ant-design:yuque-outlined',
|
||||
'i-ant-design:zhihu-circle-filled',
|
||||
'i-ant-design:zhihu-outlined',
|
||||
'i-ant-design:zhihu-square-filled',
|
||||
'i-ant-design:zoom-in-outlined',
|
||||
'i-ant-design:zoom-out-outlined',
|
||||
'i-ant-design:open-a-i-outlined',
|
||||
'i-bx:bx-circle',
|
||||
'i-fa:bug',
|
||||
'i-fa:code',
|
||||
'i-fa:database',
|
||||
'i-fa:cube',
|
||||
'i-fa:list',
|
||||
'i-fa:wpforms',
|
||||
'i-svg:sun',
|
||||
'i-svg:moon',
|
||||
];
|
||||
186
web-vue/packages/core/components/Icon/src/IconPicker.vue
Normal file
186
web-vue/packages/core/components/Icon/src/IconPicker.vue
Normal file
@@ -0,0 +1,186 @@
|
||||
<!--
|
||||
* Copyright (c) 2013-Now http://jeesite.com All rights reserved.
|
||||
* No deletion without permission, or be held responsible to law.
|
||||
* @author ThinkGem
|
||||
-->
|
||||
<template>
|
||||
<a-input
|
||||
disabled
|
||||
:style="{ width }"
|
||||
:placeholder="t('component.icon.placeholder')"
|
||||
:class="prefixCls"
|
||||
v-model:value="currentSelect"
|
||||
>
|
||||
<template #addonAfter>
|
||||
<a-popover placement="bottom" trigger="click" v-model="open" :overlayClassName="`${prefixCls}-popover`">
|
||||
<template #title>
|
||||
<div class="flex justify-between">
|
||||
<a-input :placeholder="t('component.icon.search')" @change="debounceHandleSearchChange" allowClear />
|
||||
</div>
|
||||
</template>
|
||||
<template #content>
|
||||
<div v-if="getPaginationList.length">
|
||||
<ul class="content flex flex-wrap flex-content-start">
|
||||
<li
|
||||
v-for="icon in getPaginationList"
|
||||
:key="icon"
|
||||
:class="currentSelect === icon ? 'active' : ''"
|
||||
class="flex cursor-pointer items-center justify-center"
|
||||
@click="handleClick(icon)"
|
||||
:title="icon"
|
||||
>
|
||||
<Icon :icon="icon" />
|
||||
</li>
|
||||
</ul>
|
||||
<div class="flex items-center justify-center py-2" v-if="getTotal >= pageSize">
|
||||
<a-pagination
|
||||
size="small"
|
||||
:pageSize="pageSize"
|
||||
:total="getTotal"
|
||||
:showLessItems="true"
|
||||
:showSizeChanger="false"
|
||||
@change="handlePageChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<template v-else
|
||||
><div class="p-5"><a-empty /></div>
|
||||
</template>
|
||||
</template>
|
||||
<span class="flex cursor-pointer items-center px-2 py-1">
|
||||
<Icon :icon="currentSelect || 'ion:apps-outline'" />
|
||||
</span>
|
||||
</a-popover>
|
||||
</template>
|
||||
</a-input>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, watchEffect, watch, unref } from 'vue';
|
||||
import { useDesign } from '@jeesite/core/hooks/web/useDesign';
|
||||
import { Popover, Pagination, Empty } from 'ant-design-vue';
|
||||
import { propTypes } from '@jeesite/core/utils/propTypes';
|
||||
import { usePagination } from '@jeesite/core/hooks/web/usePagination';
|
||||
import { useDebounceFn } from '@vueuse/core';
|
||||
import { useI18n } from '@jeesite/core/hooks/web/useI18n';
|
||||
import { useCopyToClipboard } from '@jeesite/core/hooks/web/useCopyToClipboard';
|
||||
import { useMessage } from '@jeesite/core/hooks/web/useMessage';
|
||||
import IconData from './IconData';
|
||||
import Icon from './Icon.vue';
|
||||
|
||||
const APopover = Popover;
|
||||
const APagination = Pagination;
|
||||
const AEmpty = Empty;
|
||||
|
||||
function getIcons() {
|
||||
const data = IconData as any;
|
||||
const prefix: string = data?.prefix ?? '';
|
||||
let result: string[] = [];
|
||||
if (prefix) {
|
||||
result = (data?.icons ?? []).map((item) => `${prefix}:${item}`);
|
||||
} else if (Array.isArray(IconData)) {
|
||||
result = IconData as string[];
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
value: propTypes.string,
|
||||
width: propTypes.string.def('100%'),
|
||||
pageSize: propTypes.number.def(70),
|
||||
copy: propTypes.bool.def(false),
|
||||
});
|
||||
|
||||
const emit = defineEmits(['change', 'update:value']);
|
||||
|
||||
const icons = getIcons();
|
||||
|
||||
const currentSelect = ref('');
|
||||
const open = ref(false);
|
||||
const currentList = ref(icons);
|
||||
|
||||
const { t } = useI18n();
|
||||
const { prefixCls } = useDesign('icon-picker');
|
||||
|
||||
const debounceHandleSearchChange = useDebounceFn(handleSearchChange, 100) as any;
|
||||
const { clipboardRef, isSuccessRef } = useCopyToClipboard(props.value);
|
||||
const { createMessage } = useMessage();
|
||||
|
||||
const { getPaginationList, getTotal, setCurrentPage } = usePagination(currentList, props.pageSize);
|
||||
|
||||
watchEffect(() => {
|
||||
currentSelect.value = props.value;
|
||||
});
|
||||
|
||||
watch(
|
||||
() => currentSelect.value,
|
||||
(v) => {
|
||||
emit('update:value', v);
|
||||
return emit('change', v);
|
||||
},
|
||||
);
|
||||
|
||||
function handlePageChange(page: number) {
|
||||
setCurrentPage(page);
|
||||
}
|
||||
|
||||
function handleClick(icon: string) {
|
||||
if (icon.startsWith('i-')) {
|
||||
icon = icon.substring(2);
|
||||
}
|
||||
currentSelect.value = icon;
|
||||
if (props.copy) {
|
||||
clipboardRef.value = icon;
|
||||
if (unref(isSuccessRef)) {
|
||||
createMessage.success(t('component.icon.copy'));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleSearchChange(e: ChangeEvent) {
|
||||
const value = e.target.value;
|
||||
if (!value) {
|
||||
setCurrentPage(1);
|
||||
currentList.value = icons;
|
||||
return;
|
||||
}
|
||||
currentList.value = icons.filter((item) => item.includes(value));
|
||||
}
|
||||
</script>
|
||||
<style lang="less">
|
||||
@prefix-cls: ~'jeesite-icon-picker';
|
||||
|
||||
.@{prefix-cls} {
|
||||
.ant-input-group-addon {
|
||||
padding: 0;
|
||||
|
||||
> span {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
&-popover {
|
||||
width: 540px;
|
||||
|
||||
.content {
|
||||
border: 1px solid @border-color-base;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 0;
|
||||
padding: 5px;
|
||||
|
||||
li {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 16px;
|
||||
border: 1px solid @border-color-base;
|
||||
border-radius: 4px;
|
||||
margin: 2px;
|
||||
|
||||
&.active {
|
||||
border-color: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user