feat:react-native-vector-icons与 iconfont

package.json

@@ -7,7 +7,8 @@
     "ios": "react-native run-ios",
     "start": "react-native start",
     "test": "jest",
-    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+    "icon":"node ./src/script/iconScript.js"
   },
   "dependencies": {
     "@ant-design/react-native": "^4.0.7",

src/components/VtIcon/iconfont.json

+{
+    "tianjia": 58888,
+    "bianji": 58887,
+    "jian": 58969,
+    "kejian": 58970,
+    "jinggao": 58971,
+    "shanchu": 58972,
+    "jingyin": 58973,
+    "mima": 58974,
+    "shoucang": 58975,
+    "xiangji": 58976,
+    "sousuo": 58977,
+    "tupian": 58978,
+    "xiangqing": 58979,
+    "shezhi": 58980,
+    "shengyin": 58981,
+    "zuo": 58982,
+    "zhuye": 58983,
+    "yonghu": 58984,
+    "dizhi": 58985,
+    "you": 58986,
+    "xuanzhong": 58987,
+    "jiazai": 58988,
+    "jia": 58989,
+    "shuaxin": 58990,
+    "lajitong": 58991,
+    "xiaoxi": 58992,
+    "guanbi": 58993
+}
\ No newline at end of file

src/components/VtIcon/index.js

+/*
+ * @Author: zhuchuanyong
+ * @Date: 2021-01-27 15:49:03
+ * @LastEditors: zhuchuanyong
+ * @LastEditTime: 2021-01-27 15:59:40
+ * @FilePath: \src\components\VtIcon\index.js
+ */
+import {createIconSet} from 'react-native-vector-icons';
+import glyphMap from './iconfont.json';
+const Icon = createIconSet(glyphMap, 'iconfont', 'iconfont.ttf');
+export default Icon;

src/fonts/Iconfont/demo.css

+/* 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;
+}

src/fonts/Iconfont/demo_index.html

+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>IconFont Demo</title>
+  <link rel="shortcut icon" href="https://img.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1730924" target="_blank" class="nav-more">查看项目</a>
+      
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe608;</span>
+                <div class="name">tianjia</div>
+                <div class="code-name">&amp;#xe608;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe607;</span>
+                <div class="name">bianji</div>
+                <div class="code-name">&amp;#xe607;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe659;</span>
+                <div class="name">jian</div>
+                <div class="code-name">&amp;#xe659;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe65a;</span>
+                <div class="name">kejian</div>
+                <div class="code-name">&amp;#xe65a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe65b;</span>
+                <div class="name">jinggao</div>
+                <div class="code-name">&amp;#xe65b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe65c;</span>
+                <div class="name">shanchu</div>
+                <div class="code-name">&amp;#xe65c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe65d;</span>
+                <div class="name">jingyin</div>
+                <div class="code-name">&amp;#xe65d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe65e;</span>
+                <div class="name">mima</div>
+                <div class="code-name">&amp;#xe65e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe65f;</span>
+                <div class="name">shoucang</div>
+                <div class="code-name">&amp;#xe65f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe660;</span>
+                <div class="name">xiangji</div>
+                <div class="code-name">&amp;#xe660;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe661;</span>
+                <div class="name">sousuo</div>
+                <div class="code-name">&amp;#xe661;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe662;</span>
+                <div class="name">tupian</div>
+                <div class="code-name">&amp;#xe662;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe663;</span>
+                <div class="name">xiangqing</div>
+                <div class="code-name">&amp;#xe663;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe664;</span>
+                <div class="name">shezhi</div>
+                <div class="code-name">&amp;#xe664;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe665;</span>
+                <div class="name">shengyin</div>
+                <div class="code-name">&amp;#xe665;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe666;</span>
+                <div class="name">zuo</div>
+                <div class="code-name">&amp;#xe666;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe667;</span>
+                <div class="name">zhuye</div>
+                <div class="code-name">&amp;#xe667;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe668;</span>
+                <div class="name">yonghu</div>
+                <div class="code-name">&amp;#xe668;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe669;</span>
+                <div class="name">dizhi</div>
+                <div class="code-name">&amp;#xe669;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe66a;</span>
+                <div class="name">you</div>
+                <div class="code-name">&amp;#xe66a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe66b;</span>
+                <div class="name">xuanzhong</div>
+                <div class="code-name">&amp;#xe66b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe66c;</span>
+                <div class="name">jiazai</div>
+                <div class="code-name">&amp;#xe66c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe66d;</span>
+                <div class="name">jia</div>
+                <div class="code-name">&amp;#xe66d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe66e;</span>
+                <div class="name">shuaxin</div>
+                <div class="code-name">&amp;#xe66e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe66f;</span>
+                <div class="name">lajitong</div>
+                <div class="code-name">&amp;#xe66f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe670;</span>
+                <div class="name">xiaoxi</div>
+                <div class="code-name">&amp;#xe670;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe671;</span>
+                <div class="name">guanbi</div>
+                <div class="code-name">&amp;#xe671;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下：</p>
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
+<pre><code class="language-css"
+>@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.eot');
+  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
+      url('iconfont.woff2') format('woff2'),
+      url('iconfont.woff') format('woff'),
+      url('iconfont.ttf') format('truetype'),
+      url('iconfont.svg#iconfont') format('svg');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+<pre>
+<code class="language-html"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon iconfont icontianjia-28"></span>
+            <div class="name">
+              tianjia
+            </div>
+            <div class="code-name">.icontianjia-28
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconbianji-27"></span>
+            <div class="name">
+              bianji
+            </div>
+            <div class="code-name">.iconbianji-27
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconjian"></span>
+            <div class="name">
+              jian
+            </div>
+            <div class="code-name">.iconjian
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconkejian"></span>
+            <div class="name">
+              kejian
+            </div>
+            <div class="code-name">.iconkejian
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconjinggao"></span>
+            <div class="name">
+              jinggao
+            </div>
+            <div class="code-name">.iconjinggao
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconshanchu"></span>
+            <div class="name">
+              shanchu
+            </div>
+            <div class="code-name">.iconshanchu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconjingyin"></span>
+            <div class="name">
+              jingyin
+            </div>
+            <div class="code-name">.iconjingyin
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconmima"></span>
+            <div class="name">
+              mima
+            </div>
+            <div class="code-name">.iconmima
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconshoucang"></span>
+            <div class="name">
+              shoucang
+            </div>
+            <div class="code-name">.iconshoucang
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconxiangji"></span>
+            <div class="name">
+              xiangji
+            </div>
+            <div class="code-name">.iconxiangji
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconsousuo"></span>
+            <div class="name">
+              sousuo
+            </div>
+            <div class="code-name">.iconsousuo
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icontupian"></span>
+            <div class="name">
+              tupian
+            </div>
+            <div class="code-name">.icontupian
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconxiangqing"></span>
+            <div class="name">
+              xiangqing
+            </div>
+            <div class="code-name">.iconxiangqing
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconshezhi"></span>
+            <div class="name">
+              shezhi
+            </div>
+            <div class="code-name">.iconshezhi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconshengyin"></span>
+            <div class="name">
+              shengyin
+            </div>
+            <div class="code-name">.iconshengyin
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconzuo"></span>
+            <div class="name">
+              zuo
+            </div>
+            <div class="code-name">.iconzuo
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconzhuye"></span>
+            <div class="name">
+              zhuye
+            </div>
+            <div class="code-name">.iconzhuye
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconyonghu"></span>
+            <div class="name">
+              yonghu
+            </div>
+            <div class="code-name">.iconyonghu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icondizhi"></span>
+            <div class="name">
+              dizhi
+            </div>
+            <div class="code-name">.icondizhi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconyou"></span>
+            <div class="name">
+              you
+            </div>
+            <div class="code-name">.iconyou
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconxuanzhong"></span>
+            <div class="name">
+              xuanzhong
+            </div>
+            <div class="code-name">.iconxuanzhong
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconjiazai"></span>
+            <div class="name">
+              jiazai
+            </div>
+            <div class="code-name">.iconjiazai
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconjia"></span>
+            <div class="name">
+              jia
+            </div>
+            <div class="code-name">.iconjia
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconshuaxin"></span>
+            <div class="name">
+              shuaxin
+            </div>
+            <div class="code-name">.iconshuaxin
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconlajitong"></span>
+            <div class="name">
+              lajitong
+            </div>
+            <div class="code-name">.iconlajitong
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconxiaoxi"></span>
+            <div class="name">
+              xiaoxi
+            </div>
+            <div class="code-name">.iconxiaoxi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconguanbi"></span>
+            <div class="name">
+              guanbi
+            </div>
+            <div class="code-name">.iconguanbi
+            </div>
+          </li>
+          
+        </ul>
+        <div class="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
+        <ul>
+          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
+          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;span class="iconfont iconxxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div class="content symbol">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icontianjia-28"></use>
+                </svg>
+                <div class="name">tianjia</div>
+                <div class="code-name">#icontianjia-28</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconbianji-27"></use>
+                </svg>
+                <div class="name">bianji</div>
+                <div class="code-name">#iconbianji-27</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconjian"></use>
+                </svg>
+                <div class="name">jian</div>
+                <div class="code-name">#iconjian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconkejian"></use>
+                </svg>
+                <div class="name">kejian</div>
+                <div class="code-name">#iconkejian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconjinggao"></use>
+                </svg>
+                <div class="name">jinggao</div>
+                <div class="code-name">#iconjinggao</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconshanchu"></use>
+                </svg>
+                <div class="name">shanchu</div>
+                <div class="code-name">#iconshanchu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconjingyin"></use>
+                </svg>
+                <div class="name">jingyin</div>
+                <div class="code-name">#iconjingyin</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconmima"></use>
+                </svg>
+                <div class="name">mima</div>
+                <div class="code-name">#iconmima</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconshoucang"></use>
+                </svg>
+                <div class="name">shoucang</div>
+                <div class="code-name">#iconshoucang</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconxiangji"></use>
+                </svg>
+                <div class="name">xiangji</div>
+                <div class="code-name">#iconxiangji</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconsousuo"></use>
+                </svg>
+                <div class="name">sousuo</div>
+                <div class="code-name">#iconsousuo</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icontupian"></use>
+                </svg>
+                <div class="name">tupian</div>
+                <div class="code-name">#icontupian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconxiangqing"></use>
+                </svg>
+                <div class="name">xiangqing</div>
+                <div class="code-name">#iconxiangqing</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconshezhi"></use>
+                </svg>
+                <div class="name">shezhi</div>
+                <div class="code-name">#iconshezhi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconshengyin"></use>
+                </svg>
+                <div class="name">shengyin</div>
+                <div class="code-name">#iconshengyin</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconzuo"></use>
+                </svg>
+                <div class="name">zuo</div>
+                <div class="code-name">#iconzuo</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconzhuye"></use>
+                </svg>
+                <div class="name">zhuye</div>
+                <div class="code-name">#iconzhuye</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconyonghu"></use>
+                </svg>
+                <div class="name">yonghu</div>
+                <div class="code-name">#iconyonghu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icondizhi"></use>
+                </svg>
+                <div class="name">dizhi</div>
+                <div class="code-name">#icondizhi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconyou"></use>
+                </svg>
+                <div class="name">you</div>
+                <div class="code-name">#iconyou</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconxuanzhong"></use>
+                </svg>
+                <div class="name">xuanzhong</div>
+                <div class="code-name">#iconxuanzhong</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconjiazai"></use>
+                </svg>
+                <div class="name">jiazai</div>
+                <div class="code-name">#iconjiazai</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconjia"></use>
+                </svg>
+                <div class="name">jia</div>
+                <div class="code-name">#iconjia</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconshuaxin"></use>
+                </svg>
+                <div class="name">shuaxin</div>
+                <div class="code-name">#iconshuaxin</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconlajitong"></use>
+                </svg>
+                <div class="name">lajitong</div>
+                <div class="code-name">#iconlajitong</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconxiaoxi"></use>
+                </svg>
+                <div class="name">xiaoxi</div>
+                <div class="code-name">#iconxiaoxi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconguanbi"></use>
+                </svg>
+                <div class="name">guanbi</div>
+                <div class="code-name">#iconguanbi</div>
+            </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="symbol-">Symbol 引用</h2>
+          <hr>
+
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
+          <ul>
+            <li>支持多色图标了，不再受单色限制。</li>
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
+          </ul>
+          <p>使用步骤如下：</p>
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
+<pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</code></pre>
+          </div>
+      </div>
+
+    </div>
+  </div>
+  <script>
+  $(document).ready(function () {
+      $('.tab-container .content:first').show()
+
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+</html>

src/fonts/Iconfont/iconfont.css

+@font-face {font-family: "iconfont";
+  src: url('iconfont.eot?t=1611732187709'); /* IE9 */
+  src: url('iconfont.eot?t=1611732187709#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
+  url('iconfont.woff?t=1611732187709') format('woff'),
+  url('iconfont.ttf?t=1611732187709') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1611732187709#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icontianjia-28:before {
+  content: "\e608";
+}
+
+.iconbianji-27:before {
+  content: "\e607";
+}
+
+.iconjian:before {
+  content: "\e659";
+}
+
+.iconkejian:before {
+  content: "\e65a";
+}
+
+.iconjinggao:before {
+  content: "\e65b";
+}
+
+.iconshanchu:before {
+  content: "\e65c";
+}
+
+.iconjingyin:before {
+  content: "\e65d";
+}
+
+.iconmima:before {
+  content: "\e65e";
+}
+
+.iconshoucang:before {
+  content: "\e65f";
+}
+
+.iconxiangji:before {
+  content: "\e660";
+}
+
+.iconsousuo:before {
+  content: "\e661";
+}
+
+.icontupian:before {
+  content: "\e662";
+}
+
+.iconxiangqing:before {
+  content: "\e663";
+}
+
+.iconshezhi:before {
+  content: "\e664";
+}
+
+.iconshengyin:before {
+  content: "\e665";
+}
+
+.iconzuo:before {
+  content: "\e666";
+}
+
+.iconzhuye:before {
+  content: "\e667";
+}
+
+.iconyonghu:before {
+  content: "\e668";
+}
+
+.icondizhi:before {
+  content: "\e669";
+}
+
+.iconyou:before {
+  content: "\e66a";
+}
+
+.iconxuanzhong:before {
+  content: "\e66b";
+}
+
+.iconjiazai:before {
+  content: "\e66c";
+}
+
+.iconjia:before {
+  content: "\e66d";
+}
+
+.iconshuaxin:before {
+  content: "\e66e";
+}
+
+.iconlajitong:before {
+  content: "\e66f";
+}
+
+.iconxiaoxi:before {
+  content: "\e670";
+}
+
+.iconguanbi:before {
+  content: "\e671";
+}
+

src/fonts/Iconfont/iconfont.js

+!function(a){var t,h,l,o,i,d,e='<svg><symbol id="icontianjia-28" viewBox="0 0 1024 1024"><path d="M512 163.84c189.44 0 348.16 158.72 348.16 348.16s-158.72 348.16-348.16 348.16-348.16-158.72-348.16-348.16S322.56 163.84 512 163.84M512 102.4c-225.28 0-409.6 184.32-409.6 409.6s184.32 409.6 409.6 409.6 409.6-184.32 409.6-409.6-184.32-409.6-409.6-409.6z"  ></path><path d="M691.2 542.72h-358.4c-15.36 0-30.72-15.36-30.72-30.72s15.36-30.72 30.72-30.72h358.4c15.36 0 30.72 15.36 30.72 30.72s-15.36 30.72-30.72 30.72z"  ></path><path d="M512 721.92c-15.36 0-30.72-15.36-30.72-30.72v-358.4c0-15.36 15.36-30.72 30.72-30.72s30.72 15.36 30.72 30.72v358.4c0 15.36-15.36 30.72-30.72 30.72z"  ></path></symbol><symbol id="iconbianji-27" viewBox="0 0 1024 1024"><path d="M824.32 901.12H199.68c-40.96 0-76.8-35.84-76.8-76.8V199.68c0-40.96 35.84-76.8 76.8-76.8H512c15.36 0 30.72 15.36 30.72 30.72s-15.36 30.72-30.72 30.72H199.68c-10.24 0-15.36 10.24-15.36 15.36V819.2c0 10.24 5.12 15.36 15.36 15.36H819.2c10.24 0 15.36-10.24 15.36-15.36v-307.2c0-15.36 15.36-30.72 30.72-30.72s30.72 15.36 30.72 30.72v312.32c5.12 40.96-30.72 76.8-71.68 76.8z"  ></path><path d="M517.12 537.6c-10.24 0-15.36-5.12-20.48-10.24-10.24-10.24-10.24-30.72 0-40.96l353.28-353.28c10.24-10.24 30.72-10.24 40.96 0 10.24 10.24 10.24 30.72 0 40.96l-353.28 353.28c-5.12 10.24-15.36 10.24-20.48 10.24z"  ></path></symbol><symbol id="iconjian" viewBox="0 0 1024 1024"><path d="M762.88 542.72H261.12a30.72 30.72 0 0 1 0-61.44h501.76a30.72 30.72 0 0 1 0 61.44z"  ></path></symbol><symbol id="iconkejian" viewBox="0 0 1024 1024"><path d="M512 419.84A92.16 92.16 0 1 1 419.84 512 92.672 92.672 0 0 1 512 419.84M512 358.4a153.6 153.6 0 1 0 153.6 153.6 153.6 153.6 0 0 0-153.6-153.6z"  ></path><path d="M512 256c143.872 0 288.768 128 368.64 256-79.872 126.464-224.768 256-368.64 256s-288.768-128-368.64-256C223.232 386.048 368.128 256 512 256m0-61.44c-165.888 0-328.192 136.704-420.864 283.136a60.928 60.928 0 0 0 0 64.512c92.672 146.432 256 283.136 420.864 283.136s328.192-136.704 420.864-283.136a60.928 60.928 0 0 0 0-64.512c-92.672-146.432-256-283.136-420.864-283.136z"  ></path></symbol><symbol id="iconjinggao" viewBox="0 0 1024 1024"><path d="M512 163.84A348.16 348.16 0 1 1 163.84 512 348.672 348.672 0 0 1 512 163.84M512 102.4a409.6 409.6 0 1 0 409.6 409.6 409.6 409.6 0 0 0-409.6-409.6z"  ></path><path d="M512 606.72a30.72 30.72 0 0 1-30.72-30.72v-256a30.72 30.72 0 0 1 61.44 0v256a30.72 30.72 0 0 1-30.72 30.72z"  ></path><path d="M512 696.32m-38.4 0a38.4 38.4 0 1 0 76.8 0 38.4 38.4 0 1 0-76.8 0Z"  ></path></symbol><symbol id="iconshanchu" viewBox="0 0 1024 1024"><path d="M298.496 756.224a32.256 32.256 0 0 1-22.016-8.704 31.232 31.232 0 0 1 0-43.52l427.52-427.52a30.72 30.72 0 1 1 43.52 43.52L320 747.52a32.256 32.256 0 0 1-21.504 8.704z"  ></path><path d="M725.504 756.224a32.256 32.256 0 0 1-21.504-8.704L276.48 320a30.72 30.72 0 0 1 43.52-43.52l427.52 427.52a31.232 31.232 0 0 1 0 43.52 32.256 32.256 0 0 1-22.016 8.704z"  ></path></symbol><symbol id="iconjingyin" viewBox="0 0 1024 1024"><path d="M674.304 651.264a30.72 30.72 0 0 1-22.016-51.2L870.4 381.952a30.208 30.208 0 0 1 43.008 43.008l-217.088 217.088a30.208 30.208 0 0 1-22.016 9.216z"  ></path><path d="M891.392 651.264a29.696 29.696 0 0 1-21.504-9.216L652.288 424.96a30.72 30.72 0 1 1 43.52-43.008l217.088 217.088a30.72 30.72 0 0 1-21.504 51.2zM491.52 256v512l-190.976-127.488-15.36-10.752H163.84V394.24h121.344l15.36-10.752L491.52 256m0-61.952a61.44 61.44 0 0 0-34.304 10.752L266.24 332.8h-102.4A61.44 61.44 0 0 0 102.4 394.24v235.52a61.44 61.44 0 0 0 61.44 61.44h102.4L457.216 819.2a60.928 60.928 0 0 0 95.744-51.2V256a61.44 61.44 0 0 0-61.44-61.44z"  ></path></symbol><symbol id="iconmima" viewBox="0 0 1024 1024"><path d="M757.76 496.64v337.92H266.24V496.64h491.52m0-61.44H266.24A61.44 61.44 0 0 0 204.8 496.64v337.92a61.44 61.44 0 0 0 61.44 61.44h491.52a61.44 61.44 0 0 0 61.44-61.44V496.64a61.44 61.44 0 0 0-61.44-61.44z"  ></path><path d="M696.32 465.92h-61.44v-153.6a122.88 122.88 0 0 0-245.76 0v153.6H327.68v-153.6a184.32 184.32 0 0 1 368.64 0z"  ></path></symbol><symbol id="iconshoucang" viewBox="0 0 1024 1024"><path d="M512 163.84l98.304 200.192 14.336 28.672 31.744 4.608 220.672 32.256-159.744 153.6-23.04 22.528 5.632 31.744 37.888 220.16-197.12-102.4-28.672-15.36-28.672 15.36-196.608 102.4 37.376-220.16 5.632-31.744-22.528-19.968-159.744-153.6 220.672-32.256 31.744-4.608 14.336-28.672L512 163.84M512 102.4a59.392 59.392 0 0 0-54.784 34.304L358.4 336.896l-220.16 31.744A61.44 61.44 0 0 0 102.4 473.6l161.28 156.16-37.376 220.16A60.928 60.928 0 0 0 286.72 921.6a57.344 57.344 0 0 0 28.16-7.168l197.12-102.4 197.12 102.4a57.344 57.344 0 0 0 28.16 7.168 60.928 60.928 0 0 0 60.416-71.68l-37.376-220.16L921.6 473.6a61.44 61.44 0 0 0-34.304-102.4L665.6 336.896l-98.816-200.192A59.392 59.392 0 0 0 512 102.4z"  ></path></symbol><symbol id="iconxiangji" viewBox="0 0 1024 1024"><path d="M633.856 220.16L670.72 307.2l15.872 37.376h173.568v450.56H163.84V343.04h173.568L353.28 307.2l36.864-87.04h243.712m6.656-61.44h-256a51.2 51.2 0 0 0-48.128 32.768L296.96 281.6H163.84A61.44 61.44 0 0 0 102.4 343.04v450.56a61.44 61.44 0 0 0 61.44 61.44h696.32a61.44 61.44 0 0 0 61.44-61.44V343.04a61.44 61.44 0 0 0-61.44-61.44h-133.12l-38.4-90.112a51.2 51.2 0 0 0-48.128-32.768z"  ></path><path d="M512 455.68a92.16 92.16 0 1 1-92.16 92.16A92.672 92.672 0 0 1 512 455.68m0-61.44a153.6 153.6 0 1 0 153.6 153.6 153.6 153.6 0 0 0-153.6-153.6z"  ></path></symbol><symbol id="iconsousuo" viewBox="0 0 1024 1024"><path d="M486.4 215.04a271.36 271.36 0 1 1-271.36 271.36 271.872 271.872 0 0 1 271.36-271.36m0-61.44A332.8 332.8 0 1 0 819.2 486.4 332.8 332.8 0 0 0 486.4 153.6z"  ></path><path d="M839.68 870.4a29.696 29.696 0 0 1-21.504-9.216l-138.752-138.24a30.72 30.72 0 0 1 43.52-43.52l138.24 138.24a30.72 30.72 0 0 1 0 43.52 31.232 31.232 0 0 1-21.504 9.216z"  ></path></symbol><symbol id="icontupian" viewBox="0 0 1024 1024"><path d="M860.16 240.64v542.72H163.84V240.64h696.32m0-61.44H163.84A61.44 61.44 0 0 0 102.4 240.64v542.72a61.44 61.44 0 0 0 61.44 61.44h696.32a61.44 61.44 0 0 0 61.44-61.44V240.64a61.44 61.44 0 0 0-61.44-61.44z"  ></path><path d="M332.8 512a102.4 102.4 0 1 1 102.4-102.4 102.4 102.4 0 0 1-102.4 102.4z m0-143.36a40.96 40.96 0 1 0 40.96 40.96 40.96 40.96 0 0 0-40.96-40.96zM403.456 709.632a40.448 40.448 0 0 1-25.088-8.704 201.216 201.216 0 0 0-232.96-9.728l-33.792-51.2a263.168 263.168 0 0 1 283.648-2.56 363.008 363.008 0 0 1 515.072-138.752l-32.768 51.2A296.96 296.96 0 0 0 716.8 504.32a302.08 302.08 0 0 0-276.48 180.736 39.424 39.424 0 0 1-27.136 23.04z"  ></path></symbol><symbol id="iconxiangqing" viewBox="0 0 1024 1024"><path d="M512 163.84A348.16 348.16 0 1 1 163.84 512 348.672 348.672 0 0 1 512 163.84M512 102.4a409.6 409.6 0 1 0 409.6 409.6 409.6 409.6 0 0 0-409.6-409.6z"  ></path><path d="M555.008 333.824m-40.448 0a40.448 40.448 0 1 0 80.896 0 40.448 40.448 0 1 0-80.896 0Z"  ></path><path d="M565.76 460.8a444.928 444.928 0 0 1-10.752 57.344c-10.752 43.52-22.528 86.528-35.84 129.024a78.336 78.336 0 0 0-4.608 28.672 19.456 19.456 0 0 0 24.064 16.384 57.856 57.856 0 0 0 33.28-19.968c5.12-6.144 10.752-7.68 16.384-4.096a12.288 12.288 0 0 1 4.096 17.408 32.768 32.768 0 0 1-10.752 12.8 153.6 153.6 0 0 1-73.216 32.256 51.2 51.2 0 0 1-51.2-22.528 51.2 51.2 0 0 1-5.12-38.912c6.144-33.28 15.872-65.536 25.088-98.304 6.144-21.504 13.824-41.984 19.456-63.488a118.784 118.784 0 0 0 6.656-39.936 17.92 17.92 0 0 0-27.648-13.824c-11.776 5.632-19.968 23.04-33.28 25.088a9.728 9.728 0 0 1-11.776-9.728c0-8.192 8.192-14.848 13.824-19.456a138.24 138.24 0 0 1 51.2-28.16c26.624-11.776 71.68-2.048 70.144 39.424z"  ></path></symbol><symbol id="iconshezhi" viewBox="0 0 1024 1024"><path d="M683.52 215.04L855.04 512l-171.52 296.96h-343.04L168.96 512l171.52-296.96h343.04m0-61.44h-343.04a61.952 61.952 0 0 0-51.2 30.72L115.712 481.28a62.464 62.464 0 0 0 0 61.44l171.52 296.96a61.952 61.952 0 0 0 51.2 30.72h343.04a61.952 61.952 0 0 0 51.2-30.72l171.52-296.96a62.464 62.464 0 0 0 0-61.44l-167.424-296.96a61.952 61.952 0 0 0-51.2-30.72z"  ></path><path d="M512 419.84A92.16 92.16 0 1 1 419.84 512 92.672 92.672 0 0 1 512 419.84M512 358.4a153.6 153.6 0 1 0 153.6 153.6 153.6 153.6 0 0 0-153.6-153.6z"  ></path></symbol><symbol id="iconshengyin" viewBox="0 0 1024 1024"><path d="M788.992 819.2a30.208 30.208 0 0 1-43.008 0 28.16 28.16 0 0 1-8.704-21.504 30.72 30.72 0 0 1 9.216-21.504 358.4 358.4 0 0 0 0-522.24 30.72 30.72 0 0 1-9.216-21.504 28.16 28.16 0 0 1 8.704-21.504 30.208 30.208 0 0 1 43.008 0 416.256 416.256 0 0 1 0 609.28z"  ></path><path d="M686.592 695.808a31.744 31.744 0 0 1-43.52 0 29.696 29.696 0 0 1-8.192-22.016 28.672 28.672 0 0 1 9.728-20.992 188.928 188.928 0 0 0 0-279.552 28.672 28.672 0 0 1-9.728-20.992 29.696 29.696 0 0 1 8.192-22.016 31.744 31.744 0 0 1 43.52 0 248.32 248.32 0 0 1 0 367.616zM491.52 256v512l-190.976-127.488-15.36-10.752H163.84V394.24h121.344l15.36-10.752L491.52 256m0-61.952a61.44 61.44 0 0 0-34.304 10.752L266.24 332.8h-102.4A61.44 61.44 0 0 0 102.4 394.24v235.52a61.44 61.44 0 0 0 61.44 61.44h102.4L457.216 819.2a60.928 60.928 0 0 0 95.744-51.2V256a61.44 61.44 0 0 0-61.44-61.44z"  ></path></symbol><symbol id="iconzuo" viewBox="0 0 1024 1024"><path d="M634.88 788.992a30.208 30.208 0 0 1-21.504-9.216l-246.272-246.272a30.72 30.72 0 0 1 0-43.008L614.4 244.224a30.208 30.208 0 0 1 43.52 0 31.232 31.232 0 0 1 0 43.52L432.128 512l224.768 224.256a31.232 31.232 0 0 1 0 43.52 30.72 30.72 0 0 1-22.016 9.216z"  ></path></symbol><symbol id="iconzhuye" viewBox="0 0 1024 1024"><path d="M512 216.576l296.96 223.744v368.64h-184.32v-204.8H399.36v204.8H215.04V440.32L512 216.576M512 153.6a61.44 61.44 0 0 0-36.864 12.288l-296.96 225.28A61.952 61.952 0 0 0 153.6 440.32v368.64A61.44 61.44 0 0 0 215.04 870.4h184.32A61.44 61.44 0 0 0 460.8 808.96V665.6h102.4v143.36a61.44 61.44 0 0 0 61.44 61.44h184.32a61.44 61.44 0 0 0 61.44-61.44V440.32a61.952 61.952 0 0 0-24.576-51.2l-296.96-223.744A61.44 61.44 0 0 0 512 153.6z"  ></path></symbol><symbol id="iconyonghu" viewBox="0 0 1024 1024"><path d="M512 215.04A143.36 143.36 0 1 1 368.64 358.4 143.872 143.872 0 0 1 512 215.04M512 153.6a204.8 204.8 0 1 0 204.8 204.8 204.8 204.8 0 0 0-204.8-204.8z"  ></path><path d="M839.68 870.4a30.72 30.72 0 0 1-30.72-30.72A287.232 287.232 0 0 0 512 563.2a287.232 287.232 0 0 0-296.96 276.48 30.72 30.72 0 1 1-61.44 0 349.184 349.184 0 0 1 358.4-337.92 349.184 349.184 0 0 1 358.4 337.92 30.72 30.72 0 0 1-30.72 30.72z"  ></path></symbol><symbol id="icondizhi" viewBox="0 0 1024 1024"><path d="M512 343.04a92.16 92.16 0 1 1-92.16 92.16A92.672 92.672 0 0 1 512 343.04m0-61.44a153.6 153.6 0 1 0 153.6 153.6 153.6 153.6 0 0 0-153.6-153.6z"  ></path><path d="M512 163.84a271.872 271.872 0 0 1 271.36 271.36c0 159.232-207.36 351.232-271.36 406.528-64-55.296-271.36-247.296-271.36-406.528A271.872 271.872 0 0 1 512 163.84M512 102.4a332.8 332.8 0 0 0-332.8 332.8c0 180.224 204.8 376.32 292.352 453.12a62.464 62.464 0 0 0 80.896 0c88.576-76.8 292.352-273.92 292.352-453.12A332.8 332.8 0 0 0 512 102.4z"  ></path></symbol><symbol id="iconyou" viewBox="0 0 1024 1024"><path d="M440.32 788.992a30.72 30.72 0 0 1-22.016-9.216 31.232 31.232 0 0 1 0-43.52L643.072 512 418.304 287.744a31.232 31.232 0 0 1 0-43.52 30.208 30.208 0 0 1 43.52 0l246.272 246.272a30.72 30.72 0 0 1 0 43.008L460.8 779.776a30.208 30.208 0 0 1-20.48 9.216z"  ></path></symbol><symbol id="iconxuanzhong" viewBox="0 0 1024 1024"><path d="M412.672 747.008a30.208 30.208 0 0 1-22.016-8.704l-209.92-209.92a30.72 30.72 0 1 1 43.52-43.52l188.416 188.416 387.072-387.584a30.72 30.72 0 0 1 43.52 43.52l-409.6 409.6a29.696 29.696 0 0 1-20.992 8.192z"  ></path></symbol><symbol id="iconjiazai" viewBox="0 0 1024 1024"><path d="M481.28 317.44m0-30.72l0-153.6q0-30.72 30.72-30.72l0 0q30.72 0 30.72 30.72l0 153.6q0 30.72-30.72 30.72l0 0q-30.72 0-30.72-30.72Z"  ></path><path d="M352.786805 396.03543m-21.722321-21.72232l-108.611601-108.611602q-21.72232-21.72232 0-43.444641l0 0q21.72232-21.72232 43.44464 0l108.611602 108.611602q21.72232 21.72232 0 43.444641l0 0q-21.72232 21.72232-43.444641 0Z"  ></path><path d="M317.44 542.72m-30.72 0l-153.6 0q-30.72 0-30.72-30.72l0 0q0-30.72 30.72-30.72l153.6 0q30.72 0 30.72 30.72l0 0q0 30.72-30.72 30.72Z"  ></path><path d="M396.071634 671.270607m-21.722321 21.72232l-108.611601 108.611602q-21.72232 21.72232-43.444641 0l0 0q-21.72232-21.72232 0-43.444641l108.611602-108.611601q21.72232-21.72232 43.44464 0l0 0q21.72232 21.72232 0 43.44464Z"  ></path><path d="M542.72 706.56m0 30.72l0 153.6q0 30.72-30.72 30.72l0 0q-30.72 0-30.72-30.72l0-153.6q0-30.72 30.72-30.72l0 0q30.72 0 30.72 30.72Z"  ></path><path d="M671.198199 627.753559m21.722321 21.72232l108.611601 108.611601q21.72232 21.72232 0 43.444641l0 0q-21.72232 21.72232-43.444641 0l-108.611601-108.611601q-21.72232-21.72232 0-43.444641l0 0q21.72232-21.72232 43.444641 0Z"  ></path><path d="M706.56 481.28m30.72 0l153.6 0q30.72 0 30.72 30.72l0 0q0 30.72-30.72 30.72l-153.6 0q-30.72 0-30.72-30.72l0 0q0-30.72 30.72-30.72Z"  ></path><path d="M627.849747 352.93162m21.72232-21.72232l108.611602-108.611602q21.72232-21.72232 43.444641 0l0 0q21.72232 21.72232 0 43.444641l-108.611602 108.611601q-21.72232 21.72232-43.444641 0l0 0q-21.72232-21.72232 0-43.44464Z"  ></path></symbol><symbol id="iconjia" viewBox="0 0 1024 1024"><path d="M762.88 542.72H261.12a30.72 30.72 0 0 1 0-61.44h501.76a30.72 30.72 0 0 1 0 61.44z"  ></path><path d="M512 793.6a30.72 30.72 0 0 1-30.72-30.72V261.12a30.72 30.72 0 0 1 61.44 0v501.76a30.72 30.72 0 0 1-30.72 30.72z"  ></path></symbol><symbol id="iconshuaxin" viewBox="0 0 1024 1024"><path d="M536.064 921.6a409.6 409.6 0 1 1 289.792-699.392 30.72 30.72 0 0 1-43.52 43.52 348.16 348.16 0 1 0 0 492.544 352.768 352.768 0 0 0 57.344-75.264 30.72 30.72 0 0 1 53.76 29.696 409.6 409.6 0 0 1-358.4 208.896z"  ></path><path d="M843.776 317.44h-153.6a30.72 30.72 0 1 1 0-61.44h122.88V133.12a30.72 30.72 0 0 1 61.44 0v153.6a30.72 30.72 0 0 1-30.72 30.72z"  ></path></symbol><symbol id="iconlajitong" viewBox="0 0 1024 1024"><path d="M404.48 709.12m0-30.72l0-204.8q0-30.72 30.72-30.72l0 0q30.72 0 30.72 30.72l0 204.8q0 30.72-30.72 30.72l0 0q-30.72 0-30.72-30.72Z"  ></path><path d="M558.08 709.12m0-30.72l0-204.8q0-30.72 30.72-30.72l0 0q30.72 0 30.72 30.72l0 204.8q0 30.72-30.72 30.72l0 0q-30.72 0-30.72-30.72Z"  ></path><path d="M629.76 189.44V256H394.24V189.44h235.52m0-61.44H394.24a61.44 61.44 0 0 0-61.44 61.44v128h358.4V189.44a61.44 61.44 0 0 0-61.44-61.44z"  ></path><path d="M852.48 317.44H171.52a30.72 30.72 0 0 1 0-61.44h680.96a30.72 30.72 0 0 1 0 61.44z"  ></path><path d="M738.816 317.44l-28.672 517.12H313.856L285.184 317.44h453.632M803.84 256H220.16l32.768 582.144a60.928 60.928 0 0 0 60.928 57.856h396.288a60.928 60.928 0 0 0 60.928-57.856L803.84 256z"  ></path></symbol><symbol id="iconxiaoxi" viewBox="0 0 1024 1024"><path d="M834.56 240.64V716.8h-241.152l-18.432 25.088L512 826.368l-62.976-86.016-18.432-23.552H189.44V240.64h645.12m0-61.44H189.44a61.44 61.44 0 0 0-61.44 61.44V716.8a61.44 61.44 0 0 0 61.44 61.44h209.92L460.8 862.72a61.952 61.952 0 0 0 99.328 0l62.976-86.016h209.92A61.44 61.44 0 0 0 896 716.8V240.64a61.44 61.44 0 0 0-61.44-61.44z"  ></path><path d="M512 484.864m-43.52 0a43.52 43.52 0 1 0 87.04 0 43.52 43.52 0 1 0-87.04 0Z"  ></path><path d="M332.8 484.864m-43.52 0a43.52 43.52 0 1 0 87.04 0 43.52 43.52 0 1 0-87.04 0Z"  ></path><path d="M691.2 484.864m-43.52 0a43.52 43.52 0 1 0 87.04 0 43.52 43.52 0 1 0-87.04 0Z"  ></path></symbol><symbol id="iconguanbi" viewBox="0 0 1024 1024"><path d="M481.28 471.04m0-30.72l0-256q0-30.72 30.72-30.72l0 0q30.72 0 30.72 30.72l0 256q0 30.72-30.72 30.72l0 0q-30.72 0-30.72-30.72Z"  ></path><path d="M512 885.76A358.4 358.4 0 0 1 288.256 247.296a31.232 31.232 0 0 1 43.008 4.608 30.72 30.72 0 0 1-4.608 43.52 296.96 296.96 0 1 0 370.688 0 30.72 30.72 0 0 1-4.608-43.52 31.232 31.232 0 0 1 43.008-4.608A358.4 358.4 0 0 1 512 885.76z"  ></path></symbol></svg>',p=(p=document.getElementsByTagName("script"))[p.length-1].getAttribute("data-injectcss");if(p&&!a.__iconfont__svg__cssinject__){a.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(a){console&&console.log(a)}}function n(){i||(i=!0,l())}t=function(){var a,t,h,l;(l=document.createElement("div")).innerHTML=e,e=null,(h=l.getElementsByTagName("svg")[0])&&(h.setAttribute("aria-hidden","true"),h.style.position="absolute",h.style.width=0,h.style.height=0,h.style.overflow="hidden",a=h,(t=document.body).firstChild?(l=a,(h=t.firstChild).parentNode.insertBefore(l,h)):t.appendChild(a))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(t,0):(h=function(){document.removeEventListener("DOMContentLoaded",h,!1),t()},document.addEventListener("DOMContentLoaded",h,!1)):document.attachEvent&&(l=t,o=a.document,i=!1,(d=function(){try{o.documentElement.doScroll("left")}catch(a){return void setTimeout(d,50)}n()})(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,n())})}(window);
\ No newline at end of file

src/fonts/Iconfont/iconfont.json

+{
+  "id": "1730924",
+  "name": "VT  UI  移动端",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "19164952",
+      "name": "tianjia",
+      "font_class": "tianjia-28",
+      "unicode": "e608",
+      "unicode_decimal": 58888
+    },
+    {
+      "icon_id": "19164931",
+      "name": "bianji",
+      "font_class": "bianji-27",
+      "unicode": "e607",
+      "unicode_decimal": 58887
+    },
+    {
+      "icon_id": "15462419",
+      "name": "jian",
+      "font_class": "jian",
+      "unicode": "e659",
+      "unicode_decimal": 58969
+    },
+    {
+      "icon_id": "15462420",
+      "name": "kejian",
+      "font_class": "kejian",
+      "unicode": "e65a",
+      "unicode_decimal": 58970
+    },
+    {
+      "icon_id": "15462421",
+      "name": "jinggao",
+      "font_class": "jinggao",
+      "unicode": "e65b",
+      "unicode_decimal": 58971
+    },
+    {
+      "icon_id": "15462422",
+      "name": "shanchu",
+      "font_class": "shanchu",
+      "unicode": "e65c",
+      "unicode_decimal": 58972
+    },
+    {
+      "icon_id": "15462423",
+      "name": "jingyin",
+      "font_class": "jingyin",
+      "unicode": "e65d",
+      "unicode_decimal": 58973
+    },
+    {
+      "icon_id": "15462424",
+      "name": "mima",
+      "font_class": "mima",
+      "unicode": "e65e",
+      "unicode_decimal": 58974
+    },
+    {
+      "icon_id": "15462425",
+      "name": "shoucang",
+      "font_class": "shoucang",
+      "unicode": "e65f",
+      "unicode_decimal": 58975
+    },
+    {
+      "icon_id": "15462426",
+      "name": "xiangji",
+      "font_class": "xiangji",
+      "unicode": "e660",
+      "unicode_decimal": 58976
+    },
+    {
+      "icon_id": "15462427",
+      "name": "sousuo",
+      "font_class": "sousuo",
+      "unicode": "e661",
+      "unicode_decimal": 58977
+    },
+    {
+      "icon_id": "15462428",
+      "name": "tupian",
+      "font_class": "tupian",
+      "unicode": "e662",
+      "unicode_decimal": 58978
+    },
+    {
+      "icon_id": "15462429",
+      "name": "xiangqing",
+      "font_class": "xiangqing",
+      "unicode": "e663",
+      "unicode_decimal": 58979
+    },
+    {
+      "icon_id": "15462430",
+      "name": "shezhi",
+      "font_class": "shezhi",
+      "unicode": "e664",
+      "unicode_decimal": 58980
+    },
+    {
+      "icon_id": "15462431",
+      "name": "shengyin",
+      "font_class": "shengyin",
+      "unicode": "e665",
+      "unicode_decimal": 58981
+    },
+    {
+      "icon_id": "15462432",
+      "name": "zuo",
+      "font_class": "zuo",
+      "unicode": "e666",
+      "unicode_decimal": 58982
+    },
+    {
+      "icon_id": "15462433",
+      "name": "zhuye",
+      "font_class": "zhuye",
+      "unicode": "e667",
+      "unicode_decimal": 58983
+    },
+    {
+      "icon_id": "15462434",
+      "name": "yonghu",
+      "font_class": "yonghu",
+      "unicode": "e668",
+      "unicode_decimal": 58984
+    },
+    {
+      "icon_id": "15462435",
+      "name": "dizhi",
+      "font_class": "dizhi",
+      "unicode": "e669",
+      "unicode_decimal": 58985
+    },
+    {
+      "icon_id": "15462436",
+      "name": "you",
+      "font_class": "you",
+      "unicode": "e66a",
+      "unicode_decimal": 58986
+    },
+    {
+      "icon_id": "15462437",
+      "name": "xuanzhong",
+      "font_class": "xuanzhong",
+      "unicode": "e66b",
+      "unicode_decimal": 58987
+    },
+    {
+      "icon_id": "15462438",
+      "name": "jiazai",
+      "font_class": "jiazai",
+      "unicode": "e66c",
+      "unicode_decimal": 58988
+    },
+    {
+      "icon_id": "15462439",
+      "name": "jia",
+      "font_class": "jia",
+      "unicode": "e66d",
+      "unicode_decimal": 58989
+    },
+    {
+      "icon_id": "15462440",
+      "name": "shuaxin",
+      "font_class": "shuaxin",
+      "unicode": "e66e",
+      "unicode_decimal": 58990
+    },
+    {
+      "icon_id": "15462441",
+      "name": "lajitong",
+      "font_class": "lajitong",
+      "unicode": "e66f",
+      "unicode_decimal": 58991
+    },
+    {
+      "icon_id": "15462442",
+      "name": "xiaoxi",
+      "font_class": "xiaoxi",
+      "unicode": "e670",
+      "unicode_decimal": 58992
+    },
+    {
+      "icon_id": "15462443",
+      "name": "guanbi",
+      "font_class": "guanbi",
+      "unicode": "e671",
+      "unicode_decimal": 58993
+    }
+  ]
+}

src/fonts/Iconfont/iconfont.svg

+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<!--
+2013-9-30: Created.
+-->
+<svg>
+<metadata>
+Created by iconfont
+</metadata>
+<defs>
+
+<font id="iconfont" horiz-adv-x="1024" >
+  <font-face
+    font-family="iconfont"
+    font-weight="500"
+    font-stretch="normal"
+    units-per-em="1024"
+    ascent="896"
+    descent="-128"
+  />
+    <missing-glyph />
+    
+    <glyph glyph-name="tianjia-28" unicode="&#58888;" d="M512 732.16c189.44 0 348.16-158.72 348.16-348.16s-158.72-348.16-348.16-348.16-348.16 158.72-348.16 348.16S322.56 732.16 512 732.16M512 793.6c-225.28 0-409.6-184.32-409.6-409.6s184.32-409.6 409.6-409.6 409.6 184.32 409.6 409.6-184.32 409.6-409.6 409.6zM691.2 353.28h-358.4c-15.36 0-30.72 15.36-30.72 30.72s15.36 30.72 30.72 30.72h358.4c15.36 0 30.72-15.36 30.72-30.72s-15.36-30.72-30.72-30.72zM512 174.08c-15.36 0-30.72 15.36-30.72 30.72v358.4c0 15.36 15.36 30.72 30.72 30.72s30.72-15.36 30.72-30.72v-358.4c0-15.36-15.36-30.72-30.72-30.72z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="bianji-27" unicode="&#58887;" d="M824.32-5.12H199.68c-40.96 0-76.8 35.84-76.8 76.8V696.32c0 40.96 35.84 76.8 76.8 76.8H512c15.36 0 30.72-15.36 30.72-30.72s-15.36-30.72-30.72-30.72H199.68c-10.24 0-15.36-10.24-15.36-15.36V76.8c0-10.24 5.12-15.36 15.36-15.36H819.2c10.24 0 15.36 10.24 15.36 15.36v307.2c0 15.36 15.36 30.72 30.72 30.72s30.72-15.36 30.72-30.72v-312.32c5.12-40.96-30.72-76.8-71.68-76.8zM517.12 358.4c-10.24 0-15.36 5.12-20.48 10.24-10.24 10.24-10.24 30.72 0 40.96l353.28 353.28c10.24 10.24 30.72 10.24 40.96 0 10.24-10.24 10.24-30.72 0-40.96l-353.28-353.28c-5.12-10.24-15.36-10.24-20.48-10.24z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="jian" unicode="&#58969;" d="M762.88 353.28H261.12a30.72 30.72 0 0 0 0 61.44h501.76a30.72 30.72 0 0 0 0-61.44z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="kejian" unicode="&#58970;" d="M512 476.16A92.16 92.16 0 1 0 419.84 384 92.672 92.672 0 0 0 512 476.16M512 537.6a153.6 153.6 0 1 1 153.6-153.6 153.6 153.6 0 0 1-153.6 153.6zM512 640c143.872 0 288.768-128 368.64-256-79.872-126.464-224.768-256-368.64-256s-288.768 128-368.64 256C223.232 509.952 368.128 640 512 640m0 61.44c-165.888 0-328.192-136.704-420.864-283.136a60.928 60.928 0 0 1 0-64.512c92.672-146.432 256-283.136 420.864-283.136s328.192 136.704 420.864 283.136a60.928 60.928 0 0 1 0 64.512c-92.672 146.432-256 283.136-420.864 283.136z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="jinggao" unicode="&#58971;" d="M512 732.16A348.16 348.16 0 1 0 163.84 384 348.672 348.672 0 0 0 512 732.16M512 793.6a409.6 409.6 0 1 1 409.6-409.6 409.6 409.6 0 0 1-409.6 409.6zM512 289.28a30.72 30.72 0 0 0-30.72 30.72v256a30.72 30.72 0 0 0 61.44 0v-256a30.72 30.72 0 0 0-30.72-30.72zM512 199.68m-38.4 0a38.4 38.4 0 1 1 76.8 0 38.4 38.4 0 1 1-76.8 0Z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="shanchu" unicode="&#58972;" d="M298.496 139.776a32.256 32.256 0 0 0-22.016 8.704 31.232 31.232 0 0 0 0 43.52l427.52 427.52a30.72 30.72 0 1 0 43.52-43.52L320 148.48a32.256 32.256 0 0 0-21.504-8.704zM725.504 139.776a32.256 32.256 0 0 0-21.504 8.704L276.48 576a30.72 30.72 0 0 0 43.52 43.52l427.52-427.52a31.232 31.232 0 0 0 0-43.52 32.256 32.256 0 0 0-22.016-8.704z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="jingyin" unicode="&#58973;" d="M674.304 244.736a30.72 30.72 0 0 0-22.016 51.2L870.4 514.048a30.208 30.208 0 0 0 43.008-43.008l-217.088-217.088a30.208 30.208 0 0 0-22.016-9.216zM891.392 244.736a29.696 29.696 0 0 0-21.504 9.216L652.288 471.04a30.72 30.72 0 1 0 43.52 43.008l217.088-217.088a30.72 30.72 0 0 0-21.504-51.2zM491.52 640v-512l-190.976 127.488-15.36 10.752H163.84V501.76h121.344l15.36 10.752L491.52 640m0 61.952a61.44 61.44 0 0 1-34.304-10.752L266.24 563.2h-102.4A61.44 61.44 0 0 1 102.4 501.76v-235.52a61.44 61.44 0 0 1 61.44-61.44h102.4L457.216 76.8a60.928 60.928 0 0 1 95.744 51.2V640a61.44 61.44 0 0 1-61.44 61.44z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="mima" unicode="&#58974;" d="M757.76 399.36v-337.92H266.24V399.36h491.52m0 61.44H266.24A61.44 61.44 0 0 1 204.8 399.36v-337.92a61.44 61.44 0 0 1 61.44-61.44h491.52a61.44 61.44 0 0 1 61.44 61.44V399.36a61.44 61.44 0 0 1-61.44 61.44zM696.32 430.08h-61.44v153.6a122.88 122.88 0 0 1-245.76 0v-153.6H327.68v153.6a184.32 184.32 0 0 0 368.64 0z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="shoucang" unicode="&#58975;" d="M512 732.16l98.304-200.192 14.336-28.672 31.744-4.608 220.672-32.256-159.744-153.6-23.04-22.528 5.632-31.744 37.888-220.16-197.12 102.4-28.672 15.36-28.672-15.36-196.608-102.4 37.376 220.16 5.632 31.744-22.528 19.968-159.744 153.6 220.672 32.256 31.744 4.608 14.336 28.672L512 732.16M512 793.6a59.392 59.392 0 0 1-54.784-34.304L358.4 559.104l-220.16-31.744A61.44 61.44 0 0 1 102.4 422.4l161.28-156.16-37.376-220.16A60.928 60.928 0 0 1 286.72-25.6a57.344 57.344 0 0 1 28.16 7.168l197.12 102.4 197.12-102.4a57.344 57.344 0 0 1 28.16-7.168 60.928 60.928 0 0 1 60.416 71.68l-37.376 220.16L921.6 422.4a61.44 61.44 0 0 1-34.304 102.4L665.6 559.104l-98.816 200.192A59.392 59.392 0 0 1 512 793.6z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="xiangji" unicode="&#58976;" d="M633.856 675.84L670.72 588.8l15.872-37.376h173.568v-450.56H163.84V552.96h173.568L353.28 588.8l36.864 87.04h243.712m6.656 61.44h-256a51.2 51.2 0 0 1-48.128-32.768L296.96 614.4H163.84A61.44 61.44 0 0 1 102.4 552.96v-450.56a61.44 61.44 0 0 1 61.44-61.44h696.32a61.44 61.44 0 0 1 61.44 61.44V552.96a61.44 61.44 0 0 1-61.44 61.44h-133.12l-38.4 90.112a51.2 51.2 0 0 1-48.128 32.768zM512 440.32a92.16 92.16 0 1 0-92.16-92.16A92.672 92.672 0 0 0 512 440.32m0 61.44a153.6 153.6 0 1 1 153.6-153.6 153.6 153.6 0 0 1-153.6 153.6z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="sousuo" unicode="&#58977;" d="M486.4 680.96a271.36 271.36 0 1 0-271.36-271.36 271.872 271.872 0 0 0 271.36 271.36m0 61.44A332.8 332.8 0 1 1 819.2 409.6 332.8 332.8 0 0 1 486.4 742.4zM839.68 25.6a29.696 29.696 0 0 0-21.504 9.216l-138.752 138.24a30.72 30.72 0 0 0 43.52 43.52l138.24-138.24a30.72 30.72 0 0 0 0-43.52 31.232 31.232 0 0 0-21.504-9.216z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="tupian" unicode="&#58978;" d="M860.16 655.36v-542.72H163.84V655.36h696.32m0 61.44H163.84A61.44 61.44 0 0 1 102.4 655.36v-542.72a61.44 61.44 0 0 1 61.44-61.44h696.32a61.44 61.44 0 0 1 61.44 61.44V655.36a61.44 61.44 0 0 1-61.44 61.44zM332.8 384a102.4 102.4 0 1 0 102.4 102.4 102.4 102.4 0 0 0-102.4-102.4z m0 143.36a40.96 40.96 0 1 1 40.96-40.96 40.96 40.96 0 0 1-40.96 40.96zM403.456 186.368a40.448 40.448 0 0 0-25.088 8.704 201.216 201.216 0 0 1-232.96 9.728l-33.792 51.2a263.168 263.168 0 0 0 283.648 2.56 363.008 363.008 0 0 0 515.072 138.752l-32.768-51.2A296.96 296.96 0 0 1 716.8 391.68a302.08 302.08 0 0 1-276.48-180.736 39.424 39.424 0 0 0-27.136-23.04z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="xiangqing" unicode="&#58979;" d="M512 732.16A348.16 348.16 0 1 0 163.84 384 348.672 348.672 0 0 0 512 732.16M512 793.6a409.6 409.6 0 1 1 409.6-409.6 409.6 409.6 0 0 1-409.6 409.6zM555.008 562.176m-40.448 0a40.448 40.448 0 1 1 80.896 0 40.448 40.448 0 1 1-80.896 0ZM565.76 435.2a444.928 444.928 0 0 0-10.752-57.344c-10.752-43.52-22.528-86.528-35.84-129.024a78.336 78.336 0 0 1-4.608-28.672 19.456 19.456 0 0 1 24.064-16.384 57.856 57.856 0 0 1 33.28 19.968c5.12 6.144 10.752 7.68 16.384 4.096a12.288 12.288 0 0 0 4.096-17.408 32.768 32.768 0 0 0-10.752-12.8 153.6 153.6 0 0 0-73.216-32.256 51.2 51.2 0 0 0-51.2 22.528 51.2 51.2 0 0 0-5.12 38.912c6.144 33.28 15.872 65.536 25.088 98.304 6.144 21.504 13.824 41.984 19.456 63.488a118.784 118.784 0 0 1 6.656 39.936 17.92 17.92 0 0 1-27.648 13.824c-11.776-5.632-19.968-23.04-33.28-25.088a9.728 9.728 0 0 0-11.776 9.728c0 8.192 8.192 14.848 13.824 19.456a138.24 138.24 0 0 0 51.2 28.16c26.624 11.776 71.68 2.048 70.144-39.424z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="shezhi" unicode="&#58980;" d="M683.52 680.96L855.04 384l-171.52-296.96h-343.04L168.96 384l171.52 296.96h343.04m0 61.44h-343.04a61.952 61.952 0 0 1-51.2-30.72L115.712 414.72a62.464 62.464 0 0 1 0-61.44l171.52-296.96a61.952 61.952 0 0 1 51.2-30.72h343.04a61.952 61.952 0 0 1 51.2 30.72l171.52 296.96a62.464 62.464 0 0 1 0 61.44l-167.424 296.96a61.952 61.952 0 0 1-51.2 30.72zM512 476.16A92.16 92.16 0 1 0 419.84 384 92.672 92.672 0 0 0 512 476.16M512 537.6a153.6 153.6 0 1 1 153.6-153.6 153.6 153.6 0 0 1-153.6 153.6z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="shengyin" unicode="&#58981;" d="M788.992 76.8a30.208 30.208 0 0 0-43.008 0 28.16 28.16 0 0 0-8.704 21.504 30.72 30.72 0 0 0 9.216 21.504 358.4 358.4 0 0 1 0 522.24 30.72 30.72 0 0 0-9.216 21.504 28.16 28.16 0 0 0 8.704 21.504 30.208 30.208 0 0 0 43.008 0 416.256 416.256 0 0 0 0-609.28zM686.592 200.192a31.744 31.744 0 0 0-43.52 0 29.696 29.696 0 0 0-8.192 22.016 28.672 28.672 0 0 0 9.728 20.992 188.928 188.928 0 0 1 0 279.552 28.672 28.672 0 0 0-9.728 20.992 29.696 29.696 0 0 0 8.192 22.016 31.744 31.744 0 0 0 43.52 0 248.32 248.32 0 0 0 0-367.616zM491.52 640v-512l-190.976 127.488-15.36 10.752H163.84V501.76h121.344l15.36 10.752L491.52 640m0 61.952a61.44 61.44 0 0 1-34.304-10.752L266.24 563.2h-102.4A61.44 61.44 0 0 1 102.4 501.76v-235.52a61.44 61.44 0 0 1 61.44-61.44h102.4L457.216 76.8a60.928 60.928 0 0 1 95.744 51.2V640a61.44 61.44 0 0 1-61.44 61.44z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="zuo" unicode="&#58982;" d="M634.88 107.008a30.208 30.208 0 0 0-21.504 9.216l-246.272 246.272a30.72 30.72 0 0 0 0 43.008L614.4 651.776a30.208 30.208 0 0 0 43.52 0 31.232 31.232 0 0 0 0-43.52L432.128 384l224.768-224.256a31.232 31.232 0 0 0 0-43.52 30.72 30.72 0 0 0-22.016-9.216z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="zhuye" unicode="&#58983;" d="M512 679.424l296.96-223.744v-368.64h-184.32v204.8H399.36v-204.8H215.04V455.68L512 679.424M512 742.4a61.44 61.44 0 0 1-36.864-12.288l-296.96-225.28A61.952 61.952 0 0 1 153.6 455.68v-368.64A61.44 61.44 0 0 1 215.04 25.6h184.32A61.44 61.44 0 0 1 460.8 87.04V230.4h102.4v-143.36a61.44 61.44 0 0 1 61.44-61.44h184.32a61.44 61.44 0 0 1 61.44 61.44V455.68a61.952 61.952 0 0 1-24.576 51.2l-296.96 223.744A61.44 61.44 0 0 1 512 742.4z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="yonghu" unicode="&#58984;" d="M512 680.96A143.36 143.36 0 1 0 368.64 537.6 143.872 143.872 0 0 0 512 680.96M512 742.4a204.8 204.8 0 1 1 204.8-204.8 204.8 204.8 0 0 1-204.8 204.8zM839.68 25.6a30.72 30.72 0 0 0-30.72 30.72A287.232 287.232 0 0 1 512 332.8a287.232 287.232 0 0 1-296.96-276.48 30.72 30.72 0 1 0-61.44 0 349.184 349.184 0 0 0 358.4 337.92 349.184 349.184 0 0 0 358.4-337.92 30.72 30.72 0 0 0-30.72-30.72z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="dizhi" unicode="&#58985;" d="M512 552.96a92.16 92.16 0 1 0-92.16-92.16A92.672 92.672 0 0 0 512 552.96m0 61.44a153.6 153.6 0 1 1 153.6-153.6 153.6 153.6 0 0 1-153.6 153.6zM512 732.16a271.872 271.872 0 0 0 271.36-271.36c0-159.232-207.36-351.232-271.36-406.528-64 55.296-271.36 247.296-271.36 406.528A271.872 271.872 0 0 0 512 732.16M512 793.6a332.8 332.8 0 0 1-332.8-332.8c0-180.224 204.8-376.32 292.352-453.12a62.464 62.464 0 0 1 80.896 0c88.576 76.8 292.352 273.92 292.352 453.12A332.8 332.8 0 0 1 512 793.6z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="you" unicode="&#58986;" d="M440.32 107.008a30.72 30.72 0 0 0-22.016 9.216 31.232 31.232 0 0 0 0 43.52L643.072 384 418.304 608.256a31.232 31.232 0 0 0 0 43.52 30.208 30.208 0 0 0 43.52 0l246.272-246.272a30.72 30.72 0 0 0 0-43.008L460.8 116.224a30.208 30.208 0 0 0-20.48-9.216z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="xuanzhong" unicode="&#58987;" d="M412.672 148.992a30.208 30.208 0 0 0-22.016 8.704l-209.92 209.92a30.72 30.72 0 1 0 43.52 43.52l188.416-188.416 387.072 387.584a30.72 30.72 0 0 0 43.52-43.52l-409.6-409.6a29.696 29.696 0 0 0-20.992-8.192z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="jiazai" unicode="&#58988;" d="M481.28 578.56m0 30.72l0 153.6q0 30.72 30.72 30.72l0 0q30.72 0 30.72-30.72l0-153.6q0-30.72-30.72-30.72l0 0q-30.72 0-30.72 30.72ZM352.786805 499.96457m-21.722321 21.72232l-108.611601 108.611602q-21.72232 21.72232 0 43.444641l0 0q21.72232 21.72232 43.44464 0l108.611602-108.611602q21.72232-21.72232 0-43.444641l0 0q-21.72232-21.72232-43.444641 0ZM317.44 353.28m-30.72 0l-153.6 0q-30.72 0-30.72 30.72l0 0q0 30.72 30.72 30.72l153.6 0q30.72 0 30.72-30.72l0 0q0-30.72-30.72-30.72ZM396.071634 224.729393m-21.722321-21.72232l-108.611601-108.611602q-21.72232-21.72232-43.444641 0l0 0q-21.72232 21.72232 0 43.444641l108.611602 108.611601q21.72232 21.72232 43.44464 0l0 0q21.72232-21.72232 0-43.44464ZM542.72 189.44m0-30.72l0-153.6q0-30.72-30.72-30.72l0 0q-30.72 0-30.72 30.72l0 153.6q0 30.72 30.72 30.72l0 0q30.72 0 30.72-30.72ZM671.198199 268.246441m21.722321-21.72232l108.611601-108.611601q21.72232-21.72232 0-43.444641l0 0q-21.72232-21.72232-43.444641 0l-108.611601 108.611601q-21.72232 21.72232 0 43.444641l0 0q21.72232 21.72232 43.444641 0ZM706.56 414.72m30.72 0l153.6 0q30.72 0 30.72-30.72l0 0q0-30.72-30.72-30.72l-153.6 0q-30.72 0-30.72 30.72l0 0q0 30.72 30.72 30.72ZM627.849747 543.06838m21.72232 21.72232l108.611602 108.611602q21.72232 21.72232 43.444641 0l0 0q21.72232-21.72232 0-43.444641l-108.611602-108.611601q-21.72232-21.72232-43.444641 0l0 0q-21.72232 21.72232 0 43.44464Z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="jia" unicode="&#58989;" d="M762.88 353.28H261.12a30.72 30.72 0 0 0 0 61.44h501.76a30.72 30.72 0 0 0 0-61.44zM512 102.4a30.72 30.72 0 0 0-30.72 30.72V634.88a30.72 30.72 0 0 0 61.44 0v-501.76a30.72 30.72 0 0 0-30.72-30.72z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="shuaxin" unicode="&#58990;" d="M536.064-25.6a409.6 409.6 0 1 0 289.792 699.392 30.72 30.72 0 0 0-43.52-43.52 348.16 348.16 0 1 1 0-492.544 352.768 352.768 0 0 1 57.344 75.264 30.72 30.72 0 0 0 53.76-29.696 409.6 409.6 0 0 0-358.4-208.896zM843.776 578.56h-153.6a30.72 30.72 0 1 0 0 61.44h122.88V762.88a30.72 30.72 0 0 0 61.44 0v-153.6a30.72 30.72 0 0 0-30.72-30.72z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="lajitong" unicode="&#58991;" d="M404.48 186.88m0 30.72l0 204.8q0 30.72 30.72 30.72l0 0q30.72 0 30.72-30.72l0-204.8q0-30.72-30.72-30.72l0 0q-30.72 0-30.72 30.72ZM558.08 186.88m0 30.72l0 204.8q0 30.72 30.72 30.72l0 0q30.72 0 30.72-30.72l0-204.8q0-30.72-30.72-30.72l0 0q-30.72 0-30.72 30.72ZM629.76 706.56V640H394.24V706.56h235.52m0 61.44H394.24a61.44 61.44 0 0 1-61.44-61.44v-128h358.4V706.56a61.44 61.44 0 0 1-61.44 61.44zM852.48 578.56H171.52a30.72 30.72 0 0 0 0 61.44h680.96a30.72 30.72 0 0 0 0-61.44zM738.816 578.56l-28.672-517.12H313.856L285.184 578.56h453.632M803.84 640H220.16l32.768-582.144a60.928 60.928 0 0 1 60.928-57.856h396.288a60.928 60.928 0 0 1 60.928 57.856L803.84 640z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="xiaoxi" unicode="&#58992;" d="M834.56 655.36V179.2h-241.152l-18.432-25.088L512 69.632l-62.976 86.016-18.432 23.552H189.44V655.36h645.12m0 61.44H189.44a61.44 61.44 0 0 1-61.44-61.44V179.2a61.44 61.44 0 0 1 61.44-61.44h209.92L460.8 33.28a61.952 61.952 0 0 1 99.328 0l62.976 86.016h209.92A61.44 61.44 0 0 1 896 179.2V655.36a61.44 61.44 0 0 1-61.44 61.44zM512 411.136m-43.52 0a43.52 43.52 0 1 1 87.04 0 43.52 43.52 0 1 1-87.04 0ZM332.8 411.136m-43.52 0a43.52 43.52 0 1 1 87.04 0 43.52 43.52 0 1 1-87.04 0ZM691.2 411.136m-43.52 0a43.52 43.52 0 1 1 87.04 0 43.52 43.52 0 1 1-87.04 0Z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="guanbi" unicode="&#58993;" d="M481.28 424.96m0 30.72l0 256q0 30.72 30.72 30.72l0 0q30.72 0 30.72-30.72l0-256q0-30.72-30.72-30.72l0 0q-30.72 0-30.72 30.72ZM512 10.24A358.4 358.4 0 0 0 288.256 648.704a31.232 31.232 0 0 0 43.008-4.608 30.72 30.72 0 0 0-4.608-43.52 296.96 296.96 0 1 1 370.688 0 30.72 30.72 0 0 0-4.608 43.52 31.232 31.232 0 0 0 43.008 4.608A358.4 358.4 0 0 0 512 10.24z"  horiz-adv-x="1024" />
+
+    
+
+
+  </font>
+</defs></svg>

src/script/iconScript.js

+/*
+ * @Author: zhuchuanyong
+ * @Date: 2021-01-27 16:08:23
+ * @LastEditors: zhuchuanyong
+ * @LastEditTime: 2021-01-27 18:08:49
+ * @FilePath: \src\script\iconScript.js
+ */
+const fs = require('fs');
+const path = require('path');
+const rootPath = path.resolve('.');
+// 组件地址
+const iconComDirectory = '/src/components/VtIcon';
+// 字体文件地址
+const iconFileDirectory = '/src/fonts/Iconfont';
+
+let IconFontJsonPath = path.join(rootPath + iconFileDirectory, 'iconfont.json');
+
+let iconComPath = path.join(rootPath + iconComDirectory, 'iconfont.json');
+
+// 读取icontjson
+const fileJson = JSON.parse(fs.readFileSync(IconFontJsonPath, 'utf-8'));
+
+// 处理数据
+let res = {};
+fileJson.glyphs.forEach((item) => {
+  res = Object.assign(res, {[item.name]: item.unicode_decimal});
+});
+
+// 写入数据
+fs.writeFileSync(iconComPath, JSON.stringify(res, null, 4));

src/views/IconPage.js

@@ -2,7 +2,7 @@
  * @Author: zhuchuanyong
  * @Date: 2021-01-27 13:51:34
  * @LastEditors: zhuchuanyong
- * @LastEditTime: 2021-01-27 14:55:07
+ * @LastEditTime: 2021-01-27 17:49:19
  * @FilePath: \src\views\iconpage.js
  */
 import React from 'react';
@@ -10,6 +10,7 @@ import {View, Text} from 'react-native';
 import {Card, WhiteSpace, WingBlank, Flex} from '@ant-design/react-native';
 import AntIcon from 'react-native-vector-icons/AntDesign';
 import Icon from 'react-native-vector-icons/FontAwesome';
+import VtIcon from '../../src/components/VtIcon';
 const IconPage = () => {
   return (
     <View>
@@ -51,6 +52,24 @@ const IconPage = () => {
           extra="<<老司机带带我>>"
         />
       </Card>
+
+      <Card>
+        <Card.Header
+          title="iconfont 自定义 图标"
+          thumbStyle={{width: 30, height: 30}}
+        />
+        <Card.Body>
+          <Flex justify="around">
+            <VtIcon name="shezhi" size={30} color="#63e6be" />
+            <VtIcon name="tianjia" size={30} color="#63e6be" />
+            <VtIcon name="sousuo" size={30} color="#63e6be" />
+          </Flex>
+        </Card.Body>
+        <Card.Footer
+          content="阿里里，阿里里，阿里阿里里"
+          extra="<<老司机带带我>>"
+        />
+      </Card>
     </View>
   );
 };