npm - plain-design - Versions diffs - 0.0.97 → 1.0.0-beta.10 - Mend

plain-design 0.0.97 → 1.0.0-beta.10

Files changed (1366) hide show

package/src/pages/libs/iconfont-fontcls/demo_index.html ADDED Viewed

@@ -0,0 +1,303 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>iconfont Demo</title>
+  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
+  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
+  <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>
+  <style>
+    .main .logo {
+      margin-top: 0;
+      height: auto;
+    }
+    .main .logo a {
+      display: flex;
+      align-items: center;
+    }
+    .main .logo .sub-title {
+      margin-left: 0.5em;
+      font-size: 22px;
+      color: #fff;
+      background: linear-gradient(-45deg, #3967FF, #B500FE);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  </style>
+</head>
+<body>
+  <div className="main">
+    <h1 className="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
+      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
+    </a></h1>
+    <div className="nav-tabs">
+      <ul id="tabs" className="dib-box">
+        <li className="dib active"><span>Unicode</span></li>
+        <li className="dib"><span>Font class</span></li>
+        <li className="dib"><span>Symbol</span></li>
+      </ul>
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1816939" target="_blank" className="nav-more">查看项目</a>
+    </div>
+    <div className="tab-container">
+      <div className="content unicode" style="display: block;">
+          <ul className="icon_lists dib-box">
+            <li className="dib">
+              <span className="icon pl-icon-font">&#xe759;</span>
+                <div className="name">plus-large</div>
+                <div className="code-name">&amp;#xe759;</div>
+              </li>
+            <li className="dib">
+              <span className="icon pl-icon-font">&#xe6fb;</span>
+                <div className="name">link</div>
+                <div className="code-name">&amp;#xe6fb;</div>
+              </li>
+            <li className="dib">
+              <span className="icon pl-icon-font">&#xe741;</span>
+                <div className="name">code</div>
+                <div className="code-name">&amp;#xe741;</div>
+              </li>
+            <li className="dib">
+              <span className="icon pl-icon-font">&#xe64a;</span>
+                <div className="name">github</div>
+                <div className="code-name">&amp;#xe64a;</div>
+              </li>
+            <li className="dib">
+              <span className="icon pl-icon-font">&#xe602;</span>
+                <div className="name">gitee</div>
+                <div className="code-name">&amp;#xe602;</div>
+              </li>
+          </ul>
+          <div className="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下：</p>
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
+<pre><code className="language-css"
+>@font-face {
+  font-family: 'pl-icon-font';
+  src: url('iconfont.woff2?t=1652858535816') format('woff2'),
+       url('iconfont.woff?t=1652858535816') format('woff'),
+       url('iconfont.ttf?t=1652858535816') format('truetype');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
+<pre><code className="language-css"
+>.pl-icon-font {
+  font-family: "pl-icon-font" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+<pre>
+<code className="language-html"
+>&lt;span className="pl-icon-font"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"pl-icon-font" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div className="content font-class">
+        <ul className="icon_lists dib-box">
+          <li className="dib">
+            <span className="icon pl-icon-font plicon-plus-lite"></span>
+            <div className="name">
+              plus-large
+            </div>
+            <div className="code-name">.plicon-plus-lite
+            </div>
+          </li>
+          <li className="dib">
+            <span className="icon pl-icon-font plicon-link"></span>
+            <div className="name">
+              link
+            </div>
+            <div className="code-name">.plicon-link
+            </div>
+          </li>
+          <li className="dib">
+            <span className="icon pl-icon-font plicon-code"></span>
+            <div className="name">
+              code
+            </div>
+            <div className="code-name">.plicon-code
+            </div>
+          </li>
+          <li className="dib">
+            <span className="icon pl-icon-font plicon-git"></span>
+            <div className="name">
+              github
+            </div>
+            <div className="code-name">.plicon-git
+            </div>
+          </li>
+          <li className="dib">
+            <span className="icon pl-icon-font plicon-gitee"></span>
+            <div className="name">
+              gitee
+            </div>
+            <div className="code-name">.plicon-gitee
+            </div>
+          </li>
+        </ul>
+        <div className="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
+        <ul>
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
+<pre><code className="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code className="language-html">&lt;span className="pl-icon-font plicon-xxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            pl-icon-font" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div className="content symbol">
+          <ul className="icon_lists dib-box">
+            <li className="dib">
+                <svg className="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#plicon-plus-lite"></use>
+                </svg>
+                <div className="name">plus-large</div>
+                <div className="code-name">#plicon-plus-lite</div>
+            </li>
+            <li className="dib">
+                <svg className="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#plicon-link"></use>
+                </svg>
+                <div className="name">link</div>
+                <div className="code-name">#plicon-link</div>
+            </li>
+            <li className="dib">
+                <svg className="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#plicon-code"></use>
+                </svg>
+                <div className="name">code</div>
+                <div className="code-name">#plicon-code</div>
+            </li>
+            <li className="dib">
+                <svg className="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#plicon-git"></use>
+                </svg>
+                <div className="name">github</div>
+                <div className="code-name">#plicon-git</div>
+            </li>
+            <li className="dib">
+                <svg className="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#plicon-gitee"></use>
+                </svg>
+                <div className="name">gitee</div>
+                <div className="code-name">#plicon-gitee</div>
+            </li>
+          </ul>
+          <div className="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 className="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
+<pre><code className="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 className="language-html">&lt;svg className="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>

package/src/pages/libs/iconfont-fontcls/iconfont.css ADDED Viewed

@@ -0,0 +1,35 @@
+@font-face {
+  font-family: "pl-icon-font"; /* Project id 1816939 */
+  src: url('iconfont.woff2?t=1652858535816') format('woff2'),
+       url('iconfont.woff?t=1652858535816') format('woff'),
+       url('iconfont.ttf?t=1652858535816') format('truetype');
+}
+.pl-icon-font {
+  font-family: "pl-icon-font" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.plicon-plus-lite:before {
+  content: "\e759";
+}
+.plicon-link:before {
+  content: "\e6fb";
+}
+.plicon-code:before {
+  content: "\e741";
+}
+.plicon-git:before {
+  content: "\e64a";
+}
+.plicon-gitee:before {
+  content: "\e602";
+}

package/src/pages/libs/iconfont-fontcls/iconfont.js ADDED Viewed

@@ -0,0 +1 @@

+ !function(t){var e,n,l,o,i,c='<svg><symbol id="plicon-plus-lite" viewBox="0 0 1024 1024"><path d="M490.667 85.333l42.667 0 0 853.333-42.667 0 0-853.333z" ></path><path d="M85.333 490.667l853.333 0 0 42.667-853.333 0 0-42.667z" ></path></symbol><symbol id="plicon-link" viewBox="0 0 1024 1024"><path d="M708.096 617.088l-46.016-44.992 91.008-91.008c37.312-39.36 58.176-82.304 62.528-129.024 4.288-46.656-8.832-86.656-39.552-120-33.28-30.656-73.28-43.776-120-39.488-46.656 4.352-89.6 25.152-128.96 62.528L436.096 346.112l-44.992-46.08 89.984-89.92c52.672-50.048 110.976-77.184 174.976-81.536 64-4.288 119.04 15.168 165.056 58.496 43.328 46.016 62.784 100.992 58.496 164.992-4.352 64-31.552 122.368-81.536 175.04l-89.984 89.984z m-91.008 91.008L527.104 798.08c-52.672 49.984-111.04 77.184-175.04 81.536-64 4.288-118.976-15.168-164.992-58.496-43.328-46.08-62.784-101.056-58.496-165.056 4.352-64 31.488-122.304 81.536-174.976l89.984-89.984 46.016 44.992-91.008 91.008c-37.376 39.296-58.24 82.304-62.528 128.96-4.288 46.72 8.832 86.72 39.488 120 33.344 30.72 73.344 43.84 120 39.552 46.72-4.352 89.664-25.216 129.024-62.528l91.008-91.008 44.992 46.016z m0-361.984l44.992 44.992-270.976 270.976-44.992-44.992 270.976-270.976z" ></path></symbol><symbol id="plicon-code" viewBox="0 0 1045 1024"><path d="M326.857143 799.428571l-28.571429 28.571429q-5.714286 5.714286-13.142857 5.714286t-13.142857-5.714286L5.714286 561.714286q-5.714286-5.714286-5.714286-13.142857t5.714286-13.142858l266.285714-266.285714q5.714286-5.714286 13.142857-5.714286t13.142857 5.714286l28.571429 28.571429q5.714286 5.714286 5.714286 13.142857t-5.714286 13.142857L102.285714 548.571429l224.571429 224.571428q5.714286 5.714286 5.714286 13.142857t-5.714286 13.142857z m337.714286-609.714285L451.428571 927.428571q-2.285714 7.428571-8.857142 11.142858T429.142857 940l-35.428571-9.714286q-7.428571-2.285714-11.142857-8.857143T381.142857 907.428571l213.142857-737.714285q2.285714-7.428571 8.857143-11.142857t13.428572-1.428572l35.428571 9.714286q7.428571 2.285714 11.142857 8.857143t1.428572 14z m375.428571 372l-266.285714 266.285714q-5.714286 5.714286-13.142857 5.714286t-13.142858-5.714286l-28.571428-28.571429q-5.714286-5.714286-5.714286-13.142857t5.714286-13.142857l224.571428-224.571428-224.571428-224.571429q-5.714286-5.714286-5.714286-13.142857t5.714286-13.142857l28.571428-28.571429q5.714286-5.714286 13.142858-5.714286t13.142857 5.714286l266.285714 266.285714q5.714286 5.714286 5.714286 13.142858t-5.714286 13.142857z" fill="" ></path></symbol><symbol id="plicon-git" viewBox="0 0 1024 1024"><path d="M0 520.886c0-69.368 13.51-135.697 40.498-199.02 26.987-63.323 63.322-117.826 109.006-163.51 45.65-45.65 100.154-81.985 163.51-109.006A502.289 502.289 0 0 1 512 8.92c69.335 0 135.663 13.477 198.986 40.497 63.356 26.988 117.86 63.323 163.51 109.007 45.684 45.65 82.02 100.154 109.006 163.51A502.289 502.289 0 0 1 1024 520.852c0 111.318-32.504 211.472-97.511 300.494-64.975 88.989-148.48 150.825-250.484 185.476-5.351 0-9.348-0.99-11.99-2.973-2.676-1.982-4.196-3.997-4.526-6.012a59.458 59.458 0 0 1-0.495-8.984 7.663 7.663 0 0 1-0.991-3.006v-128.99c0-40.63-14.336-75.314-43.008-103.986 76.667-13.345 134.011-41.819 171.999-85.487 37.987-43.669 57.013-96.52 57.013-158.522 0-58.005-18.663-108.346-56.022-150.99 13.345-42.678 11-87.668-6.97-135.003-18.697-1.322-39.011 1.85-61.01 9.513-22 7.663-38.318 14.831-49.02 21.47-10.637 6.673-20.316 13.016-28.97 19.027-38.68-10.669-81.854-16.02-129.486-16.02-47.7 0-90.509 5.351-128.529 16.02-7.333-5.35-15.855-11.164-25.5-17.507-9.68-6.342-26.493-14.005-50.507-22.99-23.982-9.018-45.65-12.85-65.008-11.495-18.663 47.996-20.645 93.646-5.979 136.984-36.665 42.678-54.998 92.986-54.998 150.99 0 62.002 18.663 114.689 55.99 157.994 37.326 43.339 94.67 72.01 171.998 86.016a142.303 142.303 0 0 0-39.969 70.029c-56.683 13.972-96.355 3.963-119.015-30.06-42.017-61.308-79.674-83.307-113.003-65.965-4.69 4.657-3.997 9.48 1.982 14.501 6.012 4.988 14.996 11.66 27.02 19.985 11.99 8.357 20.976 17.507 26.987 27.515 0.661 1.322 2.51 6.177 5.517 14.502a831.917 831.917 0 0 0 8.985 23.981c2.973 7.663 8.654 16.186 17.011 25.5 8.324 9.349 18.003 17.178 29.003 23.52 11 6.309 26.161 11 45.485 14.006 19.324 2.972 41.323 3.138 65.998 0.495v100.484c0 0.991-0.165 2.643-0.495 5.021-0.33 2.312-0.991 3.964-1.982 4.955-0.991 1.024-2.345 2.015-4.03 3.039a12.52 12.52 0 0 1-6.474 1.486c-2.676 0-6.012-0.33-10.009-0.99-101.343-35.345-183.825-97.182-247.51-185.51C31.842 731.037 0 631.577 0 520.92z" ></path></symbol><symbol id="plicon-gitee" viewBox="0 0 1024 1024"><path d="M512 1024C229.2224 1024 0 794.7776 0 512S229.2224 0 512 0s512 229.2224 512 512-229.2224 512-512 512z m259.1488-568.8832H480.4096a25.2928 25.2928 0 0 0-25.2928 25.2928l-0.0256 63.2064c0 13.952 11.3152 25.2928 25.2672 25.2928h177.024c13.9776 0 25.2928 11.3152 25.2928 25.2672v12.6464a75.8528 75.8528 0 0 1-75.8528 75.8528H366.592a25.2928 25.2928 0 0 1-25.2672-25.2928v-240.1792a75.8528 75.8528 0 0 1 75.8272-75.8528h353.9456a25.2928 25.2928 0 0 0 25.2672-25.2928l0.0768-63.2064a25.2928 25.2928 0 0 0-25.2672-25.2928H417.152a189.6192 189.6192 0 0 0-189.6192 189.6448v353.9456c0 13.9776 11.3152 25.2928 25.2928 25.2928h372.9408a170.6496 170.6496 0 0 0 170.6496-170.6496v-145.408a25.2928 25.2928 0 0 0-25.2928-25.2672z" ></path></symbol></svg>',a=(a=document.getElementsByTagName("script"))[a.length-1].getAttribute("data-injectcss"),d=function(t,e){e.parentNode.insertBefore(t,e)};if(a&&!t.__iconfont__svg__cssinject__){t.__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(t){console&&console.log(t)}}function s(){i||(i=!0,l())}function m(){try{o.documentElement.doScroll("left")}catch(t){return void setTimeout(m,50)}s()}e=function(){var t,e=document.createElement("div");e.innerHTML=c,c=null,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?d(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(e,0):(n=function(){document.removeEventListener("DOMContentLoaded",n,!1),e()},document.addEventListener("DOMContentLoaded",n,!1)):document.attachEvent&&(l=e,o=t.document,i=!1,m(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,s())})}(window);

package/src/pages/libs/iconfont-fontcls/iconfont.json ADDED Viewed

@@ -0,0 +1,44 @@
+{
+  "id": "1816939",
+  "name": "plain",
+  "font_family": "pl-icon-font",
+  "css_prefix_text": "plicon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "722169",
+      "name": "plus-large",
+      "font_class": "plus-lite",
+      "unicode": "e759",
+      "unicode_decimal": 59225
+    },
+    {
+      "icon_id": "11613900",
+      "name": "link",
+      "font_class": "link",
+      "unicode": "e6fb",
+      "unicode_decimal": 59131
+    },
+    {
+      "icon_id": "1663145",
+      "name": "code",
+      "font_class": "code",
+      "unicode": "e741",
+      "unicode_decimal": 59201
+    },
+    {
+      "icon_id": "7334992",
+      "name": "github",
+      "font_class": "git",
+      "unicode": "e64a",
+      "unicode_decimal": 58954
+    },
+    {
+      "icon_id": "10636151",
+      "name": "gitee",
+      "font_class": "gitee",
+      "unicode": "e602",
+      "unicode_decimal": 58882
+    }
+  ]
+}

package/src/pages/libs/iconfont-fontcls/iconfont.ttf ADDED Viewed

Binary file

package/src/pages/libs/iconfont-fontcls/iconfont.woff ADDED Viewed

Binary file

package/src/pages/libs/iconfont-fontcls/iconfont.woff2 ADDED Viewed

Binary file