tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: 🔨 本地 SVG 加载方式由 vite-plugin-svg-icons 切换为 @unocss/preset-icons

Browse Source
This commit is contained in:
Ray.Hao
2025-02-07 23:57:57 +08:00
parent e041c5575c
commit dd275dae27
23 changed files with 111 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/codegen/index.vue
View File

@@ -354,7 +354,7 @@
@node-click="handleFileTreeNodeClick"
>
<template #default="{ data }">
<svg-icon :icon-class="getFileTreeNodeIcon(data.label)" />
<div :class="`i-svg:${getFileTreeNodeIcon(data.label)}`" />
<span class="ml-1">{{ data.label }}</span>
</template>
</el-tree>

18
src/views/dashboard/index.vue
View File

@@ -27,15 +27,15 @@
</div>
<div class="mt-3">
<el-link href="https://gitee.com/youlaiorg/vue3-element-admin" target="_blank">
<SvgIcon icon-class="gitee" class="text-lg color-#f76560" />
<div class="i-svg:gitee text-lg color-#F76560" />
</el-link>
<el-divider direction="vertical" />
<el-link href="https://github.com/youlaitech/vue3-element-admin" target="_blank">
<SvgIcon icon-class="github" class="text-lg color-#4080ff" />
<div class="i-svg:github text-lg color-#4080FF" />
</el-link>
<el-divider direction="vertical" />
<el-link href="https://gitcode.com/youlai/vue3-element-admin" target="_blank">
<SvgIcon icon-class="gitcode" class="text-lg color-#ff9a2e" />
<div class="i-svg:gitcode text-lg color-#FF9A2E" />
</el-link>
</div>
</el-col>
@@ -47,18 +47,18 @@
</div>
<div class="mt-3">
<el-link href="https://juejin.cn/post/7228990409909108793" target="_blank">
<SvgIcon icon-class="juejin" class="text-lg" />
<div class="i-svg:juejin text-lg" />
</el-link>
<el-divider direction="vertical" />
<el-link
href="https://youlai.blog.csdn.net/article/details/130191394"
target="_blank"
>
<SvgIcon icon-class="csdn" class="text-lg" />
<div class="i-svg:csdn text-lg" />
</el-link>
<el-divider direction="vertical" />
<el-link href="https://www.cnblogs.com/haoxianrui/p/17331952.html" target="_blank">
<SvgIcon icon-class="cnblogs" class="text-lg" />
<div class="i-svg:cnblogs text-lg" />
</el-link>
</div>
</el-col>
@@ -70,7 +70,7 @@
</div>
<div class="mt-3">
<el-link href="https://www.bilibili.com/video/BV1eFUuYyEFj" target="_blank">
<SvgIcon icon-class="bilibili" class="text-lg" />
<div class="i-svg:bilibili text-lg" />
</el-link>
</div>
</el-col>
@@ -125,7 +125,7 @@
{{ formatGrowthRate(visitStatsData.uvGrowthRate) }}
</span>
</div>
<svg-icon icon-class="visitor" size="2em" />
<div class="i-svg:visitor w-8 h-8" />
</div>
<div class="flex-x-between mt-2 text-sm text-gray">
@@ -181,7 +181,7 @@
{{ formatGrowthRate(visitStatsData.pvGrowthRate) }}
</span>
</div>
<svg-icon icon-class="browser" size="2em" />
<div class="i-svg:browser w-8 h-8" />
</div>
<div class="flex-x-between mt-2 text-sm text-gray">

5
src/views/demo/icons.vue
View File

@@ -7,7 +7,7 @@
<copy-button :text="generateIconCode(item)">
<el-tooltip effect="dark" :content="generateIconCode(item)" placement="top">
<div class="icon-item">
<svg-icon :icon-class="item" />
<div :class="`i-svg:${item}`" />
<span>{{ item }}</span>
</div>
</el-tooltip>
@@ -36,7 +36,6 @@
</template>
<script setup lang="ts">
import SvgIcon from "@/components/SvgIcon/index.vue";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
defineOptions({
@@ -87,7 +86,7 @@ const svg_icons: string[] = [
const icons = ref(ElementPlusIconsVue);
function generateIconCode(symbol: any) {
return `<svg-icon icon-class="${symbol}" />`;
return `<div class="i-svg:${symbol}" />`;
}
function generateElementIconCode(symbol: any) {

11
src/views/login/index.vue
View File

@@ -86,7 +86,8 @@
<!-- 验证码 -->
<el-form-item prop="captchaCode">
<div class="input-wrapper">
<svg-icon icon-class="captcha" class="mx-2" />
<div class="i-svg:captcha mx-2" />
<el-input
v-model="loginFormData.captchaCode"
auto-complete="off"
@@ -126,10 +127,10 @@
<el-text size="small">{{ $t("login.otherLoginMethods") }}</el-text>
</el-divider>
<div class="third-party-login">
<svg-icon icon-class="wechat" class="icon" />
<svg-icon icon-class="qq" class="icon" />
<svg-icon icon-class="github" class="icon" />
<svg-icon icon-class="gitee" class="icon" />
<div class="i-svg:wechat" />
<div class="i-svg:qq" />
<div class="i-svg:github" />
<div class="i-svg:gitee" />
</div>
</el-form>
</div>

2
src/views/system/menu/index.vue
View File

@@ -48,7 +48,7 @@
</el-icon>
</template>
<template v-else-if="scope.row.icon">
<svg-icon :icon-class="scope.row.icon" />
<div :class="`i-svg:${scope.row.icon}`" />
</template>
{{ scope.row.name }}
</template>