From 5d4d523111ec6af9ea4156a1282ccac533014adb Mon Sep 17 00:00:00 2001 From: guanj Date: Mon, 27 Oct 2025 09:20:03 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0svg?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/font/demo.css | 539 ++++++++++++++++++++++++++++++++ src/assets/font/demo_index.html | 234 ++++++++++++++ src/assets/font/iconfont.css | 23 ++ src/assets/font/iconfont.js | 1 + src/assets/font/iconfont.json | 23 ++ src/assets/font/iconfont.ttf | Bin 0 -> 2304 bytes src/assets/font/iconfont.woff | Bin 0 -> 1556 bytes src/assets/font/iconfont.woff2 | Bin 0 -> 1156 bytes src/assets/icon/demo_index.html | 29 +- src/assets/icon/iconfont.css | 10 +- src/assets/icon/iconfont.js | 2 +- src/assets/icon/iconfont.json | 7 + src/assets/icon/iconfont.ttf | Bin 1820 -> 2304 bytes src/assets/icon/iconfont.woff | Bin 1208 -> 1556 bytes src/assets/icon/iconfont.woff2 | Bin 852 -> 1156 bytes src/main.ts | 1 + 16 files changed, 862 insertions(+), 7 deletions(-) create mode 100644 src/assets/font/demo.css create mode 100644 src/assets/font/demo_index.html create mode 100644 src/assets/font/iconfont.css create mode 100644 src/assets/font/iconfont.js create mode 100644 src/assets/font/iconfont.json create mode 100644 src/assets/font/iconfont.ttf create mode 100644 src/assets/font/iconfont.woff create mode 100644 src/assets/font/iconfont.woff2 diff --git a/src/assets/font/demo.css b/src/assets/font/demo.css new file mode 100644 index 0000000..a67054a --- /dev/null +++ b/src/assets/font/demo.css @@ -0,0 +1,539 @@ +/* Logo 字体 */ +@font-face { + font-family: "iconfont logo"; + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); +} + +.logo { + font-family: "iconfont logo"; + font-size: 160px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* tabs */ +.nav-tabs { + position: relative; +} + +.nav-tabs .nav-more { + position: absolute; + right: 0; + bottom: 0; + height: 42px; + line-height: 42px; + color: #666; +} + +#tabs { + border-bottom: 1px solid #eee; +} + +#tabs li { + cursor: pointer; + width: 100px; + height: 40px; + line-height: 40px; + text-align: center; + font-size: 16px; + border-bottom: 2px solid transparent; + position: relative; + z-index: 1; + margin-bottom: -1px; + color: #666; +} + + +#tabs .active { + border-bottom-color: #f00; + color: #222; +} + +.tab-container .content { + display: none; +} + +/* 页面布局 */ +.main { + padding: 30px 100px; + width: 960px; + margin: 0 auto; +} + +.main .logo { + color: #333; + text-align: left; + margin-bottom: 30px; + line-height: 1; + height: 110px; + margin-top: -50px; + overflow: hidden; + *zoom: 1; +} + +.main .logo a { + font-size: 160px; + color: #333; +} + +.helps { + margin-top: 40px; +} + +.helps pre { + padding: 20px; + margin: 10px 0; + border: solid 1px #e7e1cd; + background-color: #fffdef; + overflow: auto; +} + +.icon_lists { + width: 100% !important; + overflow: hidden; + *zoom: 1; +} + +.icon_lists li { + width: 100px; + margin-bottom: 10px; + margin-right: 20px; + text-align: center; + list-style: none !important; + cursor: default; +} + +.icon_lists li .code-name { + line-height: 1.2; +} + +.icon_lists .icon { + display: block; + height: 100px; + line-height: 100px; + font-size: 42px; + margin: 10px auto; + color: #333; + -webkit-transition: font-size 0.25s linear, width 0.25s linear; + -moz-transition: font-size 0.25s linear, width 0.25s linear; + transition: font-size 0.25s linear, width 0.25s linear; +} + +.icon_lists .icon:hover { + font-size: 100px; +} + +.icon_lists .svg-icon { + /* 通过设置 font-size 来改变图标大小 */ + width: 1em; + /* 图标和文字相邻时，垂直对齐 */ + vertical-align: -0.15em; + /* 通过设置 color 来改变 SVG 的颜色/fill */ + fill: currentColor; + /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 + normalize.css 中也包含这行 */ + overflow: hidden; +} + +.icon_lists li .name, +.icon_lists li .code-name { + color: #666; +} + +/* markdown 样式 */ +.markdown { + color: #666; + font-size: 14px; + line-height: 1.8; +} + +.highlight { + line-height: 1.5; +} + +.markdown img { + vertical-align: middle; + max-width: 100%; +} + +.markdown h1 { + color: #404040; + font-weight: 500; + line-height: 40px; + margin-bottom: 24px; +} + +.markdown h2, +.markdown h3, +.markdown h4, +.markdown h5, +.markdown h6 { + color: #404040; + margin: 1.6em 0 0.6em 0; + font-weight: 500; + clear: both; +} + +.markdown h1 { + font-size: 28px; +} + +.markdown h2 { + font-size: 22px; +} + +.markdown h3 { + font-size: 16px; +} + +.markdown h4 { + font-size: 14px; +} + +.markdown h5 { + font-size: 12px; +} + +.markdown h6 { + font-size: 12px; +} + +.markdown hr { + height: 1px; + border: 0; + background: #e9e9e9; + margin: 16px 0; + clear: both; +} + +.markdown p { + margin: 1em 0; +} + +.markdown>p, +.markdown>blockquote, +.markdown>.highlight, +.markdown>ol, +.markdown>ul { + width: 80%; +} + +.markdown ul>li { + list-style: circle; +} + +.markdown>ul li, +.markdown blockquote ul>li { + margin-left: 20px; + padding-left: 4px; +} + +.markdown>ul li p, +.markdown>ol li p { + margin: 0.6em 0; +} + +.markdown ol>li { + list-style: decimal; +} + +.markdown>ol li, +.markdown blockquote ol>li { + margin-left: 20px; + padding-left: 4px; +} + +.markdown code { + margin: 0 3px; + padding: 0 5px; + background: #eee; + border-radius: 3px; +} + +.markdown strong, +.markdown b { + font-weight: 600; +} + +.markdown>table { + border-collapse: collapse; + border-spacing: 0px; + empty-cells: show; + border: 1px solid #e9e9e9; + width: 95%; + margin-bottom: 24px; +} + +.markdown>table th { + white-space: nowrap; + color: #333; + font-weight: 600; +} + +.markdown>table th, +.markdown>table td { + border: 1px solid #e9e9e9; + padding: 8px 16px; + text-align: left; +} + +.markdown>table th { + background: #F7F7F7; +} + +.markdown blockquote { + font-size: 90%; + color: #999; + border-left: 4px solid #e9e9e9; + padding-left: 0.8em; + margin: 1em 0; +} + +.markdown blockquote p { + margin: 0; +} + +.markdown .anchor { + opacity: 0; + transition: opacity 0.3s ease; + margin-left: 8px; +} + +.markdown .waiting { + color: #ccc; +} + +.markdown h1:hover .anchor, +.markdown h2:hover .anchor, +.markdown h3:hover .anchor, +.markdown h4:hover .anchor, +.markdown h5:hover .anchor, +.markdown h6:hover .anchor { + opacity: 1; + display: inline-block; +} + +.markdown>br, +.markdown>p>br { + clear: both; +} + + +.hljs { + display: block; + background: white; + padding: 0.5em; + color: #333333; + overflow-x: auto; +} + +.hljs-comment, +.hljs-meta { + color: #969896; +} + +.hljs-string, +.hljs-variable, +.hljs-template-variable, +.hljs-strong, +.hljs-emphasis, +.hljs-quote { + color: #df5000; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-type { + color: #a71d5d; +} + +.hljs-literal, +.hljs-symbol, +.hljs-bullet, +.hljs-attribute { + color: #0086b3; +} + +.hljs-section, +.hljs-name { + color: #63a35c; +} + +.hljs-tag { + color: #333333; +} + +.hljs-title, +.hljs-attr, +.hljs-selector-id, +.hljs-selector-class, +.hljs-selector-attr, +.hljs-selector-pseudo { + color: #795da3; +} + +.hljs-addition { + color: #55a532; + background-color: #eaffea; +} + +.hljs-deletion { + color: #bd2c00; + background-color: #ffecec; +} + +.hljs-link { + text-decoration: underline; +} + +/* 代码高亮 */ +/* PrismJS 1.15.0 +https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ +code[class*="language-"], +pre[class*="language-"] { + color: black; + background: none; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, +pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, +code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*="language-"]::selection, +pre[class*="language-"] ::selection, +code[class*="language-"]::selection, +code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre)>code[class*="language-"], +pre[class*="language-"] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre)>code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #9a6e3a; + background: hsla(0, 0%, 100%, .5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function, +.token.class-name { + color: #DD4A68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} diff --git a/src/assets/font/demo_index.html b/src/assets/font/demo_index.html new file mode 100644 index 0000000..0b4b567 --- /dev/null +++ b/src/assets/font/demo_index.html @@ -0,0 +1,234 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

+
+
    +
  • Unicode
    • +
  • Font class
    • +
  • Symbol
    • +
+ + 查看项目 + +
+
+
+
    + +
  • + +
    传输设备
    +
    
    +
    • + +
  • + +
    告警
    +
    
    +
    • + +
+
+

Unicode 引用

+
+ +

Unicode 是字体在网页端最原始的应用方式，特点是：

+
    +
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • +
  • 默认情况下不支持多色，直接添加多色图标会自动去色。
    • +
+
+

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

+
+

Unicode 使用步骤如下：

+

第一步：拷贝项目下面生成的 @font-face

+
@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1761527493132') format('woff2'),
+       url('iconfont.woff?t=1761527493132') format('woff'),
+       url('iconfont.ttf?t=1761527493132') format('truetype');
+}
+
+

第二步：定义使用 iconfont 的样式

+
.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+

第三步：挑选相应图标并获取字体编码，应用于页面

+
+<span class="iconfont">&#x33;</span>
+
+
+

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    + 传输设备 +
    +
    .icon-chuanshushebei +
    +
    • + +
  • + +
    + 告警 +
    +
    .icon-gaojing +
    +
    • + +
+
+

font-class 引用

+
+ +

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

+

与 Unicode 使用方式相比，具有如下特点：

+
    +
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • +
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 fontclass 代码：

+
<link rel="stylesheet" href="./iconfont.css">
+
+

第二步：挑选相应图标并获取类名，应用于页面：

+
<span class="iconfont icon-xxx"></span>
+
+
+

" + iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    传输设备
    +
    #icon-chuanshushebei
    +
    • + +
  • + +
    告警
    +
    #icon-gaojing
    +
    • + +
+
+

Symbol 引用

+
+ +

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 + 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

+
    +
  • 支持多色图标了，不再受单色限制。
    • +
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
    • +
  • 兼容性较差，支持 IE9+，及现代浏览器。
    • +
  • 浏览器渲染 SVG 的性能一般，还不如 png。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 symbol 代码：

+
<script src="./iconfont.js"></script>
+
+

第二步：加入通用 CSS 代码（引入一次就行）：

+
<style>
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>
+
+

第三步：挑选相应图标并获取类名，应用于页面：

+
<svg class="icon" aria-hidden="true">
+  <use xlink:href="#icon-xxx"></use>
+</svg>
+
+
+
+ +
+
+ + + diff --git a/src/assets/font/iconfont.css b/src/assets/font/iconfont.css new file mode 100644 index 0000000..63a4a15 --- /dev/null +++ b/src/assets/font/iconfont.css @@ -0,0 +1,23 @@ +@font-face { + font-family: "iconfont"; /* Project id 4977098 */ + src: url('iconfont.woff2?t=1761527493132') format('woff2'), + url('iconfont.woff?t=1761527493132') format('woff'), + url('iconfont.ttf?t=1761527493132') format('truetype'); +} + +.iconfont { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-chuanshushebei:before { + content: "\e67a"; +} + +.icon-gaojing:before { + content: "\e60c"; +} + diff --git a/src/assets/font/iconfont.js b/src/assets/font/iconfont.js new file mode 100644 index 0000000..dbb87aa --- /dev/null +++ b/src/assets/font/iconfont.js @@ -0,0 +1 @@ +window._iconfont_svg_string_4977098='',(n=>{var e=(t=(t=document.getElementsByTagName("script"))[t.length-1]).getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var c,o,i,s,a,l=function(e,t){t.parentNode.insertBefore(e,t)};if(e&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(e){console&&console.log(e)}}c=function(){var e,t=document.createElement("div");t.innerHTML=n._iconfont_svg_string_4977098,(t=t.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",t=t,(e=document.body).firstChild?l(t,e.firstChild):e.appendChild(t))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(c,0):(o=function(){document.removeEventListener("DOMContentLoaded",o,!1),c()},document.addEventListener("DOMContentLoaded",o,!1)):document.attachEvent&&(i=c,s=n.document,a=!1,h(),s.onreadystatechange=function(){"complete"==s.readyState&&(s.onreadystatechange=null,d())})}function d(){a||(a=!0,i())}function h(){try{s.documentElement.doScroll("left")}catch(e){return void setTimeout(h,50)}d()}})(window); \ No newline at end of file diff --git a/src/assets/font/iconfont.json b/src/assets/font/iconfont.json new file mode 100644 index 0000000..678517b --- /dev/null +++ b/src/assets/font/iconfont.json @@ -0,0 +1,23 @@ +{ + "id": "4977098", + "name": "北京暂降平台", + "font_family": "iconfont", + "css_prefix_text": "icon-", + "description": "", + "glyphs": [ + { + "icon_id": "21053723", + "name": "传输设备", + "font_class": "chuanshushebei", + "unicode": "e67a", + "unicode_decimal": 59002 + }, + { + "icon_id": "36284864", + "name": "告警", + "font_class": "gaojing", + "unicode": "e60c", + "unicode_decimal": 58892 + } + ] +} diff --git a/src/assets/font/iconfont.ttf b/src/assets/font/iconfont.ttf new file mode 100644 index 0000000000000000000000000000000000000000..f6339f84e6c36b56ad83c26f466b3c2a6d66aff1 GIT binary patch literal 2304 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 NLxAH<#SwTce*+{hfiD06 literal 0 HcmV?d00001 diff --git a/src/assets/font/iconfont.woff2 b/src/assets/font/iconfont.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..14556a7f2a2d02493c5cc99651c8af2348386e8b GIT binary patch literal 1156 zcmV-~1bh2;Pew8T0RR9100e{p3jhEB00{s900cMy0RR9100000000000000000000 z0000SR0d!Gg9ZwPOoU?rHUcCA3=0SV1Rw>3X9q$X%Lm9Fl0=z+0?Gk^garWQKfYW2 zxk)LV1Pi`m%$h2&rbbt+%$nGrxO|$u$HBTfIl|LUOwv2KooB__M=I=F+AGv204{ew zRts!u!U>N_TX0RH0t`3`tpB;3-dzPA$Zr7H90MmFSRPP7V=vLHmnY~AV>gipc@795 z6jv4N*1fuQ#O7T|ainQLB|(%+^Sq^1D;2U-Ebw`TwwfCCCIOiR6LbDTQ}7siPqu}4VNX$TwC zmrCKWZJ`eT@BoH@QUI|-AmtaagW_OzBpJtZkD7CZoppc{@Dpn58b5Fs8>3XCX2>Cg zOq06XF@EJ);Ygeg$JMY| z(ghO~O;V_MNaWpmHuF}R8VY5|3^M={EKCW|3KZQE*dk?-LYh2TT4?iR z3-lZ^<(5?D9U{*_Y3`V^U5Lcask_Eo%l)lO#xerdn2c?KHpQdKm7xSfL+T&CD%9QF z5r7DiySiE{{H+^4yoJm_JRWWx3&jP05QBz0^B!mdR#VoF<=cg4xc4sg`g82f%;U_> zmt@hM=L+UDXMf|0_T%x|89?Y z7hisbl?`dcCPE!FB-`landDGIjqr+wY!$TyDqvnD+4lOb5?Ke;RVuAy{Vjdk=It@Y_N9M{uf)Xqkq!T5 ze9m8^AX;_m7pPOWM9yf1@up}r+8A1;;G>IIJx98`p{rE3(&z$o2xB4J55<}(iz}RI0&JaO0QbDkhN`lT%1%yKCOqP6xaHBX4Kwi^1ARaq_ zaXA5;#|2a)Jph}a51{k-4}@sooKMOdbgyOLj_?TG#zNojs=^={d9_|6Ye_pJFK~~B z$@4xaQM7nEc8UrbeGC{ritUUT!9cHJstk4I%}|n57&1&1@IZ||BS`BPE7q&%C5`Tb zWygX6?GSVXx_JTmI#4MXiciV!yM|a6$&S$wy*C<6ktNg)N+_y$1N2m^G%CB0#=|{g zb&Nn5u~RPwl?>FijYxuF6&O<7N`MYXL!S;oO
    +
  • + +
    传输设备
    +
    &#xe67a;
    +
    • +
  • 告警
    @@ -78,9 +84,9 @@ 
    @font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1752716651599') format('woff2'),
-       url('iconfont.woff?t=1752716651599') format('woff'),
-       url('iconfont.ttf?t=1752716651599') format('truetype');
+  src: url('iconfont.woff2?t=1761527493132') format('woff2'),
+       url('iconfont.woff?t=1761527493132') format('woff'),
+       url('iconfont.ttf?t=1761527493132') format('truetype');
 }

    第二步：定义使用 iconfont 的样式

    @@ -106,6 +112,15 @@
      +
    • + +
      + 传输设备 +
      +
      .icon-chuanshushebei +
      +
      • +
    • @@ -142,6 +157,14 @@
        +
      • + +
        传输设备
        +
        #icon-chuanshushebei
        +
        • +