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 图标

+ + +
+ + + -
  • - -
    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>
    +        
    +        
    +    
    + diff --git a/src/assets/fonts/iconfont.svg b/src/assets/fonts/iconfont.svg index 3c021ca..1e6ac17 100644 --- a/src/assets/fonts/iconfont.svg +++ b/src/assets/fonts/iconfont.svg @@ -279,13 +279,96 @@ t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q- - - + + - + + horiz-adv-x="1024" /> - - + + horiz-adv-x="1024" />