refactor: 重构图标模块,使用@iconify/json替换不再维护更新的@iconify-icons/*依赖,优化使用体验,确保图标库可持续更新并支持Tree-shaking (#1202)

refactor: 重构图标模块,使用`@iconify/json`替换不再维护更新的`@iconify-icons/*`依赖,优化使用体验,确保图标库可持续更新并支持`Tree-shaking`
This commit is contained in:
xiaoming
2025-03-25 09:18:20 +08:00
committed by GitHub
parent b004c224c2
commit a9ee9ebcf9
85 changed files with 416 additions and 292 deletions

View File

@@ -7,7 +7,7 @@ import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { extractPathList, deleteChildren } from "@/utils/tree";
import { usePermissionStoreHook } from "@/store/modules/permission";
import type { TreeNode } from "element-plus/es/components/tree-v2/src/types";
import NodeTree from "@iconify-icons/ri/node-tree";
import NodeTree from "~icons/ri/node-tree";
defineOptions({
name: "MenuTree"

View File

@@ -2,7 +2,7 @@
import { onMounted } from "vue";
import { deviceDetection } from "@pureadmin/utils";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import VideoPlay from "@iconify-icons/ep/video-play";
import VideoPlay from "~icons/ep/video-play";
import Player from "xgplayer";
import "xgplayer/dist/index.min.css";

View File

@@ -6,7 +6,7 @@ import { type UserInfo, getMine } from "@/api/user";
import type { FormInstance, FormRules } from "element-plus";
import ReCropperPreview from "@/components/ReCropperPreview";
import { createFormData, deviceDetection } from "@pureadmin/utils";
import uploadLine from "@iconify-icons/ri/upload-line";
import uploadLine from "~icons/ri/upload-line";
defineOptions({
name: "Profile"

View File

@@ -11,11 +11,11 @@ import AccountManagement from "./components/AccountManagement.vue";
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
import LaySidebarTopCollapse from "@/layout/components/lay-sidebar/components/SidebarTopCollapse.vue";
import leftLine from "@iconify-icons/ri/arrow-left-s-line";
import ProfileIcon from "@iconify-icons/ri/user-3-line";
import PreferencesIcon from "@iconify-icons/ri/settings-3-line";
import SecurityLogIcon from "@iconify-icons/ri/window-line";
import AccountManagementIcon from "@iconify-icons/ri/profile-line";
import leftLine from "~icons/ri/arrow-left-s-line";
import ProfileIcon from "~icons/ri/user-3-line";
import PreferencesIcon from "~icons/ri/settings-3-line";
import SecurityLogIcon from "~icons/ri/window-line";
import AccountManagementIcon from "~icons/ri/profile-line";
defineOptions({
name: "AccountSettings"

View File

@@ -3,7 +3,7 @@ import { h } from "vue";
import hot from "@/assets/svg/hot.svg?component";
import { message, closeAllMessage } from "@/utils/message";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Check from "@iconify-icons/ep/check";
import Check from "~icons/ep/check";
defineOptions({
name: "Message"

View File

@@ -1,7 +1,7 @@
<script setup lang="tsx">
import { h, ref, watch } from "vue";
import { message } from "@/utils/message";
import HomeFilled from "@iconify-icons/ep/home-filled";
import HomeFilled from "~icons/ep/home-filled";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Segmented, { type OptionsType } from "@/components/ReSegmented";

View File

@@ -3,7 +3,7 @@ import { markRaw } from "vue";
import { randomGradient } from "@pureadmin/utils";
import { useRenderFlicker } from "@/components/ReFlicker";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Iphone from "@iconify-icons/ep/iphone";
import Iphone from "~icons/ep/iphone";
defineOptions({
name: "TimeLine"

View File

@@ -4,7 +4,7 @@ import { formUpload } from "@/api/mock";
import { message } from "@/utils/message";
import { createFormData } from "@pureadmin/utils";
import UploadIcon from "@iconify-icons/ri/upload-2-line";
import UploadIcon from "~icons/ri/upload-2-line";
const formRef = ref();
const uploadRef = ref();

View File

@@ -8,9 +8,9 @@ import { message } from "@/utils/message";
import type { UploadFile } from "element-plus";
import { getKeyList, extractFields, downloadByData } from "@pureadmin/utils";
import Add from "@iconify-icons/ep/plus";
import Eye from "@iconify-icons/ri/eye-line";
import Delete from "@iconify-icons/ri/delete-bin-7-line";
import Add from "~icons/ep/plus";
import Eye from "~icons/ri/eye-line";
import Delete from "~icons/ri/delete-bin-7-line";
defineOptions({
name: "PureUpload"

View File

@@ -5,7 +5,7 @@ import laptopIcon from "@/assets/svg/laptop.svg?component";
import serviceIcon from "@/assets/svg/service.svg?component";
import calendarIcon from "@/assets/svg/calendar.svg?component";
import userAvatarIcon from "@/assets/svg/user_avatar.svg?component";
import More2Fill from "@iconify-icons/ri/more-2-fill";
import More2Fill from "~icons/ri/more-2-fill";
defineOptions({
name: "ReCard"

View File

@@ -6,7 +6,7 @@ import { ref, onMounted, nextTick } from "vue";
import ListCard from "./components/ListCard.vue";
import ListDialogForm from "./components/ListDialogForm.vue";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import AddFill from "@iconify-icons/ri/add-circle-line";
import AddFill from "~icons/ri/add-circle-line";
defineOptions({
name: "CardList"

View File

@@ -9,7 +9,8 @@ import { $t, transformI18n } from "@/plugins/i18n";
import { useVerifyCode } from "../utils/verifyCode";
import { useUserStoreHook } from "@/store/modules/user";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Iphone from "@iconify-icons/ep/iphone";
import Iphone from "~icons/ep/iphone";
import Keyhole from "~icons/ri/shield-keyhole-line";
const { t } = useI18n();
const loading = ref(false);
@@ -64,7 +65,7 @@ function onBack() {
v-model="ruleForm.verifyCode"
clearable
:placeholder="t('login.pureSmsVerifyCode')"
:prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
:prefix-icon="useRenderIcon(Keyhole)"
/>
<el-button
:disabled="isDisabled"

View File

@@ -9,9 +9,10 @@ import { useVerifyCode } from "../utils/verifyCode";
import { $t, transformI18n } from "@/plugins/i18n";
import { useUserStoreHook } from "@/store/modules/user";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Lock from "@iconify-icons/ri/lock-fill";
import Iphone from "@iconify-icons/ep/iphone";
import User from "@iconify-icons/ri/user-3-fill";
import Lock from "~icons/ri/lock-fill";
import Iphone from "~icons/ep/iphone";
import User from "~icons/ri/user-3-fill";
import Keyhole from "~icons/ri/shield-keyhole-line";
const { t } = useI18n();
const checked = ref(false);
@@ -118,7 +119,7 @@ function onBack() {
v-model="ruleForm.verifyCode"
clearable
:placeholder="t('login.pureSmsVerifyCode')"
:prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
:prefix-icon="useRenderIcon(Keyhole)"
/>
<el-button
:disabled="isDisabled"

View File

@@ -9,8 +9,9 @@ import { useVerifyCode } from "../utils/verifyCode";
import { $t, transformI18n } from "@/plugins/i18n";
import { useUserStoreHook } from "@/store/modules/user";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Lock from "@iconify-icons/ri/lock-fill";
import Iphone from "@iconify-icons/ep/iphone";
import Lock from "~icons/ri/lock-fill";
import Iphone from "~icons/ep/iphone";
import Keyhole from "~icons/ri/shield-keyhole-line";
const { t } = useI18n();
const loading = ref(false);
@@ -88,7 +89,7 @@ function onBack() {
v-model="ruleForm.verifyCode"
clearable
:placeholder="t('login.pureSmsVerifyCode')"
:prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
:prefix-icon="useRenderIcon(Keyhole)"
/>
<el-button
:disabled="isDisabled"

View File

@@ -28,10 +28,11 @@ import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
import dayIcon from "@/assets/svg/day.svg?component";
import darkIcon from "@/assets/svg/dark.svg?component";
import globalization from "@/assets/svg/globalization.svg?component";
import Lock from "@iconify-icons/ri/lock-fill";
import Check from "@iconify-icons/ep/check";
import User from "@iconify-icons/ri/user-3-fill";
import Info from "@iconify-icons/ri/information-line";
import Lock from "~icons/ri/lock-fill";
import Check from "~icons/ep/check";
import User from "~icons/ri/user-3-fill";
import Info from "~icons/ri/information-line";
import Keyhole from "~icons/ri/shield-keyhole-line";
defineOptions({
name: "Login"
@@ -224,7 +225,7 @@ watch(loginDay, value => {
v-model="ruleForm.verifyCode"
clearable
:placeholder="t('login.pureVerifyCode')"
:prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
:prefix-icon="useRenderIcon(Keyhole)"
>
<template v-slot:append>
<ReImageVerify v-model:code="imgCode" />

View File

@@ -5,8 +5,8 @@ import { getPickerShortcuts } from "../../utils";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Delete from "@iconify-icons/ep/delete";
import Refresh from "@iconify-icons/ep/refresh";
import Delete from "~icons/ep/delete";
import Refresh from "~icons/ep/refresh";
defineOptions({
name: "LoginLog"

View File

@@ -5,8 +5,8 @@ import { getPickerShortcuts } from "../../utils";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Delete from "@iconify-icons/ep/delete";
import Refresh from "@iconify-icons/ep/refresh";
import Delete from "~icons/ep/delete";
import Refresh from "~icons/ep/refresh";
defineOptions({
name: "OperationLog"

View File

@@ -6,7 +6,7 @@ import type { PaginationProps } from "@pureadmin/table";
import { type Ref, reactive, ref, onMounted, toRaw } from "vue";
import { getKeyList, useCopyToClipboard } from "@pureadmin/utils";
import { getSystemLogsList, getSystemLogsDetail } from "@/api/system";
import Info from "@iconify-icons/ri/question-line";
import Info from "~icons/ri/question-line";
export function useRole(tableRef: Ref) {
const form = reactive({

View File

@@ -5,9 +5,9 @@ import { getPickerShortcuts } from "../../utils";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import View from "@iconify-icons/ep/view";
import Delete from "@iconify-icons/ep/delete";
import Refresh from "@iconify-icons/ep/refresh";
import View from "~icons/ep/view";
import Delete from "~icons/ep/delete";
import Refresh from "~icons/ep/refresh";
defineOptions({
name: "SystemLog"

View File

@@ -4,8 +4,8 @@ import { useRole } from "./hook";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Plane from "@iconify-icons/ri/plane-line";
import Refresh from "@iconify-icons/ep/refresh";
import Plane from "~icons/ri/plane-line";
import Refresh from "~icons/ep/refresh";
defineOptions({
name: "OnlineUser"

View File

@@ -1,5 +1,5 @@
import ArrowRightSLine from "@iconify-icons/ri/arrow-right-s-line";
import CloseCircleLine from "@iconify-icons/ri/close-circle-line";
import ArrowRightSLine from "~icons/ri/arrow-right-s-line";
import CloseCircleLine from "~icons/ri/close-circle-line";
export function useColumns() {
const columns = [

View File

@@ -4,10 +4,10 @@ import { useDept } from "./utils/hook";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Delete from "@iconify-icons/ep/delete";
import EditPen from "@iconify-icons/ep/edit-pen";
import Refresh from "@iconify-icons/ep/refresh";
import AddFill from "@iconify-icons/ri/add-circle-line";
import Delete from "~icons/ep/delete";
import EditPen from "~icons/ep/edit-pen";
import Refresh from "~icons/ep/refresh";
import AddFill from "~icons/ri/add-circle-line";
defineOptions({
name: "SystemDept"

View File

@@ -5,10 +5,10 @@ import { transformI18n } from "@/plugins/i18n";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Delete from "@iconify-icons/ep/delete";
import EditPen from "@iconify-icons/ep/edit-pen";
import Refresh from "@iconify-icons/ep/refresh";
import AddFill from "@iconify-icons/ri/add-circle-line";
import Delete from "~icons/ep/delete";
import EditPen from "~icons/ep/edit-pen";
import Refresh from "~icons/ep/refresh";
import AddFill from "~icons/ri/add-circle-line";
defineOptions({
name: "SystemMenu"

View File

@@ -10,15 +10,15 @@ import {
useResizeObserver
} from "@pureadmin/utils";
// import Database from "@iconify-icons/ri/database-2-line";
// import More from "@iconify-icons/ep/more-filled";
import Delete from "@iconify-icons/ep/delete";
import EditPen from "@iconify-icons/ep/edit-pen";
import Refresh from "@iconify-icons/ep/refresh";
import Menu from "@iconify-icons/ep/menu";
import AddFill from "@iconify-icons/ri/add-circle-line";
import Close from "@iconify-icons/ep/close";
import Check from "@iconify-icons/ep/check";
// import Database from "~icons/ri/database-2-line";
// import More from "~icons/ep/more-filled";
import Delete from "~icons/ep/delete";
import EditPen from "~icons/ep/edit-pen";
import Refresh from "~icons/ep/refresh";
import Menu from "~icons/ep/menu";
import AddFill from "~icons/ri/add-circle-line";
import Close from "~icons/ep/close";
import Check from "~icons/ep/check";
defineOptions({
name: "SystemRole"

View File

@@ -5,14 +5,14 @@ import { useUser } from "./utils/hook";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Upload from "@iconify-icons/ri/upload-line";
import Role from "@iconify-icons/ri/admin-line";
import Password from "@iconify-icons/ri/lock-password-line";
import More from "@iconify-icons/ep/more-filled";
import Delete from "@iconify-icons/ep/delete";
import EditPen from "@iconify-icons/ep/edit-pen";
import Refresh from "@iconify-icons/ep/refresh";
import AddFill from "@iconify-icons/ri/add-circle-line";
import Upload from "~icons/ri/upload-line";
import Role from "~icons/ri/admin-line";
import Password from "~icons/ri/lock-password-line";
import More from "~icons/ep/more-filled";
import Delete from "~icons/ep/delete";
import EditPen from "~icons/ep/edit-pen";
import Refresh from "~icons/ep/refresh";
import AddFill from "~icons/ri/add-circle-line";
defineOptions({
name: "SystemUser"

View File

@@ -2,11 +2,11 @@
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { ref, computed, watch, getCurrentInstance } from "vue";
import Dept from "@iconify-icons/ri/git-branch-line";
// import Reset from "@iconify-icons/ri/restart-line";
import More2Fill from "@iconify-icons/ri/more-2-fill";
import OfficeBuilding from "@iconify-icons/ep/office-building";
import LocationCompany from "@iconify-icons/ep/add-location";
import Dept from "~icons/ri/git-branch-line";
// import Reset from "~icons/ri/restart-line";
import More2Fill from "~icons/ri/more-2-fill";
import OfficeBuilding from "~icons/ep/office-building";
import LocationCompany from "~icons/ep/add-location";
import ExpandIcon from "./svg/expand.svg?component";
import UnExpandIcon from "./svg/unexpand.svg?component";

View File

@@ -1,6 +1,6 @@
<script setup lang="ts">
import { useColumns } from "./columns";
import Calendar from "@iconify-icons/ri/calendar-2-line";
import Calendar from "~icons/ri/calendar-2-line";
const { columns, filterTableData } = useColumns();
</script>

View File

@@ -2,8 +2,8 @@
import { useColumns } from "./columns";
import Empty from "../empty.svg?component";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import AddFill from "@iconify-icons/ep/plus";
import Delete from "@iconify-icons/ep/delete";
import AddFill from "~icons/ep/plus";
import Delete from "~icons/ep/delete";
const { columns, dataList, onAdd, onDel } = useColumns();
</script>

View File

@@ -1,8 +1,8 @@
import { ref, computed } from "vue";
import { tableDataEdit } from "../data";
import EditPen from "@iconify-icons/ep/edit-pen";
import Check from "@iconify-icons/ep/check";
import EditPen from "~icons/ep/edit-pen";
import Check from "~icons/ep/check";
export function useColumns() {
const editMap = ref({});

View File

@@ -2,8 +2,8 @@ import { tableData } from "../../data";
import { delay } from "@pureadmin/utils";
import { ref, onMounted, reactive } from "vue";
import type { PaginationProps } from "@pureadmin/table";
import ThumbUp from "@iconify-icons/ri/thumb-up-line";
import Hearts from "@iconify-icons/ri/hearts-line";
import ThumbUp from "~icons/ri/thumb-up-line";
import Hearts from "~icons/ri/hearts-line";
import Empty from "./empty.svg?component";
export function useColumns() {

View File

@@ -1,8 +1,8 @@
import { dayjs, cloneDeep, getRandomIntBetween } from "./utils";
import GroupLine from "@iconify-icons/ri/group-line";
import Question from "@iconify-icons/ri/question-answer-line";
import CheckLine from "@iconify-icons/ri/chat-check-line";
import Smile from "@iconify-icons/ri/star-smile-line";
import GroupLine from "~icons/ri/group-line";
import Question from "~icons/ri/question-answer-line";
import CheckLine from "~icons/ri/chat-check-line";
import Smile from "~icons/ri/star-smile-line";
const days = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];