From add87e6288f1b12db05c3ac08d54478164b52ae2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=A9=AC=E6=B5=B7=E9=A6=A8?= <2094472715@qq.com>
Date: Mon, 16 Dec 2024 20:11:03 +0800
Subject: [PATCH] mhx
---
src/assets/fonts/demo_symbol.html | 201 ++++++++++++++++++++++--------
src/assets/fonts/iconfont.svg | 93 +++++++++++++-
2 files changed, 235 insertions(+), 59 deletions(-)
diff --git a/src/assets/fonts/demo_symbol.html b/src/assets/fonts/demo_symbol.html
index f701b52..c7aab83 100644
--- a/src/assets/fonts/demo_symbol.html
+++ b/src/assets/fonts/demo_symbol.html
@@ -37,95 +37,174 @@
+
+
IconFont 图标
+
+
-
+
show-password
+
#icon-showpassword
+
-
+
user
+
#icon-user
+
-
+
users
+
#icon-users
+
-
+
password-b
+
#icon-3702mima
+
+
+
+
+
+
+
+
-
-
- 06商品
- #icon-shangpin
-
-
-
-
- 25单据
- #icon-danju
-
-
-
-
- 28体积、空间
- #icon-tijikongjian
-
-
-
-
- 225默认头像
- #icon-morentouxiang
-
-
-
-
- 406报表
- #icon-baobiao
-
+
+
+
+ 06商品
+
+
+ #icon-shangpin
+
+
+
+
+
+
+
+
+ 25单据
+
+ #icon-danju
+
+
+
+
+
+
+ 28体积、空间
+
+ #icon-tijikongjian
+
+
+
+
+
+
+ 225默认头像
+
+ #icon-morentouxiang
+
+
-
- lock_fill
- #icon-lock_fill
-
-
-
+
+
+ 406报表
+
+
+ #icon-baobiao
+
+
+
+
+
+
+
+
+ lock_fill
+
+ #icon-lock_fill
+
+
+
+
- symbol引用
-
+symbol引用
+
+
+
+
+
+
+
这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章
这种用法其实是做了一个svg的集合,与另外两种相比具有如下特点:
@@ -148,10 +227,24 @@
}
</style>
第三步:挑选相应图标并获取类名,应用于页面:
- <svg class="icon" aria-hidden="true">
- <use xlink:href="#icon-xxx"></use>
-</svg>
-
-
+
+
+
+
+
+
+ <svg class="icon" aria-hidden="true">
+
+ <use xlink:href="#icon-xxx"></use>
+
+
+ </svg>
+
+
+
+