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/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.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/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>
   );
 };