jiangyc/ruoyi-plus-soybean
1
0
Fork 0
mirror of https://github.com/m-xlsea/ruoyi-plus-soybean.git synced 2025-09-24 07:49:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(projects): refactor icon system, unify icon usage [重构图标系统，统一图标用法]

Browse Source
This commit is contained in:
Soybean
2022-09-23 00:15:00 +08:00
parent fe8cab3d1c
commit 811f820644
47 changed files with 270 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/views/component/button/index.vue
View File

@ -13,7 +13,7 @@
:style="`--icon-margin: ${button.props.circle ? 0 : 6}px`"
>
<template v-if="button.icon" #icon>
<Icon :icon="button.icon" />
<svg-icon :icon="button.icon" />
</template>
{{ button.label }}
</n-button>
@ -36,7 +36,6 @@
<script setup lang="ts">
import type { ButtonProps } from 'naive-ui';
import { Icon } from '@iconify/vue';
import { useLoading } from '@/hooks';
interface ButtonDetail {

3
src/views/dashboard/analysis/components/DataCard/index.vue
View File

@ -4,7 +4,7 @@
<gradient-bg class="h-100px" :start-color="item.colors[0]" :end-color="item.colors[1]">
<h3 class="text-16px">{{ item.title }}</h3>
<div class="flex justify-between pt-12px">
<Icon :icon="item.icon" class="text-32px" />
<svg-icon :icon="item.icon" class="text-32px" />
<count-to
:prefix="item.unit"
:start-value="1"
@ -18,7 +18,6 @@
</template>
<script setup lang="ts">
import { Icon } from '@iconify/vue';
import { GradientBg } from './components';
defineOptions({ name: 'DashboardAnalysisDataCard' });

2
src/views/dashboard/workbench/components/WorkbenchHeader/index.vue
View File

@ -2,7 +2,7 @@
<n-card :bordered="false" class="rounded-16px shadow-sm">
<div class="flex-y-center justify-between">
<div class="flex-y-center">
<icon-custom-avatar class="text-70px" />
<icon-local-avatar class="text-70px" />
<div class="pl-12px">
<h3 class="text-18px font-semibold">早安，{{ auth.userInfo.userName }}, 今天又是充满活力的一天！</h3>
<p class="leading-30px text-[#999]">今日多云转晴，20℃ - 25℃！</p>

4
src/views/dashboard/workbench/components/WorkbenchMain/components/ShortcutsCard.vue
View File

@ -2,14 +2,12 @@
<div
class="flex-col-center p-12px border-1px border-[#efeff5] dark:border-[#ffffff17] rounded-4px hover:shadow-sm cursor-pointer"
>
<Icon :icon="icon" :style="{ color: iconColor }" class="text-30px" />
<svg-icon :icon="icon" :style="{ color: iconColor }" class="text-30px" />
<p class="py-8px text-16px">{{ label }}</p>
</div>
</template>
<script setup lang="ts">
import { Icon } from '@iconify/vue';
defineOptions({ name: 'DashboardWorkbenchMainShortcutsCard' });
interface Props {

4
src/views/dashboard/workbench/components/WorkbenchMain/components/TechnologyCard.vue
View File

@ -4,7 +4,7 @@
@click="handleOpenSite"
>
<header class="flex-y-center">
<Icon :icon="icon" :style="{ color: iconColor }" class="text-30px" />
<svg-icon :icon="icon" :style="{ color: iconColor }" class="text-30px" />
<h3 class="pl-12px text-18px font-semibold">{{ name }}</h3>
</header>
<p class="py-8px h-56px text-[#999]">{{ description }}</p>
@ -15,8 +15,6 @@
</template>
<script setup lang="ts">
import { Icon } from '@iconify/vue';
defineOptions({ name: 'DashboardWorkbenchMainTechnologyCard' });
interface Props {

4
src/views/dashboard/workbench/components/WorkbenchMain/index.vue
View File

@ -19,7 +19,7 @@
<n-list>
<n-list-item v-for="item in activity" :key="item.id">
<template #prefix>
<icon-custom-avatar class="text-48px" />
<icon-local-avatar class="text-48px" />
</template>
<n-thing :title="item.content" :description="item.time" />
</n-list-item>
@ -37,7 +37,7 @@
</n-grid>
</n-card>
<n-card title="创意" :bordered="false" size="small" class="shadow-sm rounded-16px">
<icon-custom-banner class="text-400px text-primary" />
<icon-local-banner class="text-400px text-primary" />
</n-card>
</n-space>
</n-grid-item>

18
src/views/plugin/icon/index.vue
View File

@ -4,7 +4,7 @@
<div class="grid grid-cols-10">
<template v-for="item in icons" :key="item">
<div class="mt-5px flex-x-center">
<Icon :icon="item" class="text-30px" />
<svg-icon :icon="item" class="text-30px" />
</div>
</template>
</div>
@ -18,20 +18,21 @@
</n-card>
<n-card title="自定义图标示例" class="mt-10px shadow-sm rounded-16px">
<div class="pb-12px text-16px">
在src/assets/svg文件夹下的svg文件，通过在template里面以 icon-custom-{文件名} 直接渲染
在src/assets/svg-icon文件夹下的svg文件，通过在template里面以 icon-local-{文件名} 直接渲染,
其中icon-local为.env文件里的 VITE_ICON_LOCAL_PREFFIX
</div>
<div class="grid grid-cols-10">
<div class="mt-5px flex-x-center">
<icon-custom-activity class="text-40px text-success" />
<icon-local-activity class="text-40px text-success" />
</div>
<div class="mt-5px flex-x-center">
<icon-custom-cast class="text-20px text-error" />
<icon-local-cast class="text-20px text-error" />
</div>
</div>
<div class="py-12px text-16px">通过SvgIcon组件动态渲染, 菜单通过meta的customIcon属性渲染自定义图标</div>
<div class="py-12px text-16px">通过SvgIcon组件动态渲染, 菜单通过meta的localIcon属性渲染自定义图标</div>
<div class="grid grid-cols-10">
<div v-for="(item, index) in customIcons" :key="index" class="mt-5px flex-x-center">
<svg-icon :icon="item" class="text-30px text-primary" />
<div v-for="(fileName, index) in localIcons" :key="index" class="mt-5px flex-x-center">
<svg-icon :local-icon="fileName" class="text-30px text-primary" />
</div>
</div>
</n-card>
@ -40,12 +41,11 @@
<script lang="ts" setup>
import { ref } from 'vue';
import { Icon } from '@iconify/vue';
import { icons } from './icons';
const selectValue = ref('');
const customIcons = ['custom-icon', 'activity', 'at-sign', 'cast', 'chrome', 'copy', 'wind'];
const localIcons = ['custom-icon', 'activity', 'at-sign', 'cast', 'chrome', 'copy', 'wind'];
</script>
<style scoped></style>