feat: ✨封装 icon

xpyjs · May 12, 2023 · 39190a6 · 39190a6
1 parent d39a98b
commit 39190a6
Show file tree

Hide file tree

Showing 13 changed files with 821 additions and 33 deletions.
diff --git a/src/assets/iconfont/demo.css b/src/assets/iconfont/demo.css
diff --git a/src/assets/iconfont/demo_index.html b/src/assets/iconfont/demo_index.html
@@ -0,0 +1,211 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>iconfont Demo</title>
+  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
+  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.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 class="main">
+    <h1 class="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 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=4065195" 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">&#xe646;</span>
+                <div class="name">右箭头</div>
+                <div class="code-name">&amp;#xe646;</div>
+              </li>
+
+          </ul>
+          <div class="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 class="language-css"
+>@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1683895307749') format('woff2'),
+       url('iconfont.woff?t=1683895307749') format('woff'),
+       url('iconfont.ttf?t=1683895307749') format('truetype');
+}
+</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 icon-arrow-right"></span>
+            <div class="name">
+              右箭头
+            </div>
+            <div class="code-name">.icon-arrow-right
+            </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>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</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 icon-xxx"&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="#icon-arrow-right"></use>
+                </svg>
+                <div class="name">右箭头</div>
+                <div class="code-name">#icon-arrow-right</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>
diff --git a/src/assets/iconfont/iconfont.css b/src/assets/iconfont/iconfont.css
@@ -0,0 +1,19 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 4065195 */
+  src: url('iconfont.woff2?t=1683895307749') format('woff2'),
+       url('iconfont.woff?t=1683895307749') format('woff'),
+       url('iconfont.ttf?t=1683895307749') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-arrow-right:before {
+  content: "\e646";
+}
+
diff --git a/src/assets/iconfont/iconfont.js b/src/assets/iconfont/iconfont.js
diff --git a/src/assets/iconfont/iconfont.json b/src/assets/iconfont/iconfont.json
@@ -0,0 +1,16 @@
+{
+  "id": "4065195",
+  "name": "gantt",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "430540",
+      "name": "右箭头",
+      "font_class": "arrow-right",
+      "unicode": "e646",
+      "unicode_decimal": 58950
+    }
+  ]
+}
diff --git a/src/assets/iconfont/iconfont.ttf b/src/assets/iconfont/iconfont.ttf
diff --git a/src/assets/iconfont/iconfont.woff b/src/assets/iconfont/iconfont.woff
diff --git a/src/assets/iconfont/iconfont.woff2 b/src/assets/iconfont/iconfont.woff2
diff --git a/src/assets/svg/more.svg b/src/assets/svg/more.svg
diff --git a/src/assets/svg/operation.svg b/src/assets/svg/operation.svg
diff --git a/src/assets/svg/today.svg b/src/assets/svg/today.svg
diff --git a/src/components/column/selection.vue b/src/components/column/selection.vue
@@ -1,34 +1,18 @@
 <template>
   <div class="level-block" :style="{ width: `${data!.level * indent}px` }" />
 
-  <div
+  <Icon
     v-if="$styleBox.showExpand && !!data?.children?.length"
+    name="arrow-right"
     :class="['expand-icon', { 'expand-icon__expanded': data?.isExpand }]"
+    :style="{ width: `${rowHeight / 2}px`, height: `${rowHeight / 2}px` }"
     @click="
       () => {
         data?.setExpand(!data.isExpand);
         flattenData();
       }
     "
-  >
-    <!-- TODO: 图标统一处理 -->
-    <svg
-      t="1682094638676"
-      class="icon"
-      viewBox="0 0 1024 1024"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      p-id="1386"
-      :width="`${rowHeight / 2}px`"
-      :height="`${rowHeight / 2}px`"
-    >
-      <path
-        d="M384 210.773333l278.613333 278.613334a32 32 0 0 1 0 45.226666L384 813.226667 338.773333 768l256-256-256-256L384 210.773333z"
-        p-id="1387"
-        fill="#9f9f9f"
-      ></path>
-    </svg>
-  </div>
+  />
 
   <input v-if="showCheckbox" v-model="checked" type="checkbox" />
 </template>
@@ -38,6 +22,8 @@ import { PropType, ref } from 'vue';
 import useStyle from '@/composables/useStyle';
 import useData from '@/composables/useData';
 import RowItem from '@/models/data/row';
+import Icon from '../common/Icon.vue';
+
 const { rowHeight, $styleBox } = useStyle();
 const checked = ref(false);
 

diff --git a/src/components/common/Icon.vue b/src/components/common/Icon.vue
@@ -0,0 +1,29 @@
+<template>
+  <svg class="xg-icon" aria-hidden="true">
+    <use :xlink:href="icon"></use>
+  </svg>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import '@/assets/iconfont/iconfont.js';
+
+const props = defineProps({
+  name: {
+    type: String,
+    required: true
+  }
+});
+
+const icon = computed(() => `#icon-${props.name}`);
+</script>
+
+<style scoped lang="scss">
+.xg-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>