github
/
jeecg-boot
mirror of https://github.com/jeecgboot/jeecg-boot
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

【issues/8097】icon组件svg图标显示空白问题

pull/8191/head
JEECG 2025-04-16 18:42:22 +08:00
parent b032a415aa
commit 61a8904e52
2 changed files with 44 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
jeecgboot-vue3/src/components/Icon/src/IconList.vue
View File

@ -185,11 +185,10 @@
}
ul span {
font-size: 1.5rem !important;
border: 1px solid #f1f1f1;
padding: 0.2rem;
margin: 0.3rem;
}
.icon-border span {
.icon-border {
border: 1px solid rgba(24, 144, 255) !important;
}
.justify-content-right {

81
jeecgboot-vue3/src/components/Icon/src/IconPicker.vue
View File

@ -20,44 +20,49 @@
/>
</template>
</a-input>
<a-modal :bodyStyle="{ padding: '24px'}" v-bind="$attrs" v-model:open="iconOpen" :keyboard="false" :width="800" @ok="handleOk" :ok-text="t('common.okText')" :cancel-text="t('common.cancelText')">
<a-tabs style="padding-left: 15px;padding-right: 15px">
<a-tab-pane tab="方向性图标" key="1">
<a-form-item-rest>
<icon-list ref="iconListRef" :clear-select="clearSelect" :copy="copy" :is-svg-mode="isSvgMode" :current-list="directionIcons" v-model:value="selectIcon" />
</a-form-item-rest>
</a-tab-pane>
<a-tab-pane tab="指示性图标" key="2">
<a-form-item-rest>
<icon-list ref="iconListRef" :clear-select="clearSelect" :copy="copy" :is-svg-mode="isSvgMode" :current-list="suggestionIcons" v-model:value="selectIcon" />
</a-form-item-rest>
</a-tab-pane>
<a-tab-pane tab="编辑类图标" key="3">
<a-form-item-rest>
<icon-list ref="iconListRef" :clear-select="clearSelect" :copy="copy" :is-svg-mode="isSvgMode" :current-list="editIcons" v-model:value="selectIcon" />
</a-form-item-rest>
</a-tab-pane>
<a-tab-pane tab="数据类图标" key="4">
<a-form-item-rest>
<icon-list ref="iconListRef" :clear-select="clearSelect" :copy="copy" :is-svg-mode="isSvgMode" :current-list="dataIcons" v-model:value="selectIcon" />
</a-form-item-rest>
</a-tab-pane>
<a-tab-pane tab="网站通用图标" key="5">
<a-form-item-rest>
<icon-list ref="iconListRef" :clear-select="clearSelect" :copy="copy" :is-svg-mode="isSvgMode" :current-list="webIcons" v-model:value="selectIcon" />
</a-form-item-rest>
</a-tab-pane>
<a-tab-pane tab="品牌和标识" key="6">
<a-form-item-rest>
<icon-list ref="iconListRef" :clear-select="clearSelect" :copy="copy" :is-svg-mode="isSvgMode" :current-list="logoIcons" v-model:value="selectIcon" />
</a-form-item-rest>
</a-tab-pane>
<a-tab-pane tab="其他" key="7">
<a-form-item-rest>
<icon-list ref="iconListRef" :clear-select="clearSelect" :copy="copy" :is-page="true" :is-search="true" :is-svg-mode="isSvgMode" :current-list="otherIcons" v-model:value="selectIcon" />
</a-form-item-rest>
</a-tab-pane>
</a-tabs>
<a-modal :bodyStyle="{ padding: '24px', paddingTop: mode === 'svg' ? '48px' : '24px'}" v-bind="$attrs" v-model:open="iconOpen" :keyboard="false" :width="800" @ok="handleOk" :ok-text="t('common.okText')" :cancel-text="t('common.cancelText')">
<template v-if="mode === 'iconify'">
<a-tabs style="padding-left: 15px;padding-right: 15px">
<a-tab-pane tab="方向性图标" key="1">
<a-form-item-rest>
<icon-list ref="iconListRef" :clear-select="clearSelect" :copy="copy" :is-svg-mode="isSvgMode" :current-list="directionIcons" v-model:value="selectIcon" />
</a-form-item-rest>
</a-tab-pane>
<a-tab-pane tab="指示性图标" key="2">
<a-form-item-rest>
<icon-list ref="iconListRef" :clear-select="clearSelect" :copy="copy" :is-svg-mode="isSvgMode" :current-list="suggestionIcons" v-model:value="selectIcon" />
</a-form-item-rest>
</a-tab-pane>
<a-tab-pane tab="编辑类图标" key="3">
<a-form-item-rest>
<icon-list ref="iconListRef" :clear-select="clearSelect" :copy="copy" :is-svg-mode="isSvgMode" :current-list="editIcons" v-model:value="selectIcon" />
</a-form-item-rest>
</a-tab-pane>
<a-tab-pane tab="数据类图标" key="4">
<a-form-item-rest>
<icon-list ref="iconListRef" :clear-select="clearSelect" :copy="copy" :is-svg-mode="isSvgMode" :current-list="dataIcons" v-model:value="selectIcon" />
</a-form-item-rest>
</a-tab-pane>
<a-tab-pane tab="网站通用图标" key="5">
<a-form-item-rest>
<icon-list ref="iconListRef" :clear-select="clearSelect" :copy="copy" :is-svg-mode="isSvgMode" :current-list="webIcons" v-model:value="selectIcon" />
</a-form-item-rest>
</a-tab-pane>
<a-tab-pane tab="品牌和标识" key="6">
<a-form-item-rest>
<icon-list ref="iconListRef" :clear-select="clearSelect" :copy="copy" :is-svg-mode="isSvgMode" :current-list="logoIcons" v-model:value="selectIcon" />
</a-form-item-rest>
</a-tab-pane>
<a-tab-pane tab="其他" key="7">
<a-form-item-rest>
<icon-list ref="iconListRef" :clear-select="clearSelect" :copy="copy" :is-page="true" :is-search="true" :is-svg-mode="isSvgMode" :current-list="otherIcons" v-model:value="selectIcon" />
</a-form-item-rest>
</a-tab-pane>
</a-tabs>
</template>
<template v-else>
<icon-list ref="iconListRef" :clear-select="clearSelect" :copy="copy" :is-page="true" :is-search="true" :is-svg-mode="isSvgMode" :current-list="otherIcons" v-model:value="selectIcon" />
</template>
</a-modal>
</template>
<script lang="ts" setup name="icon-picker">