diff --git a/miniprogram/app.less b/miniprogram/app.less index 1c07159..41b11b4 100644 --- a/miniprogram/app.less +++ b/miniprogram/app.less @@ -1,261 +1 @@ -@font-face { - font-family: "j-icon"; - /* Project id 4489595 */ - src: url('./assets/font/iconfont.ttf?t=12') format('truetype'); -} - -.j-icon { - font-family: "j-icon" !important; - font-size: 16px; - font-style: normal; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.j-icon-translate2:before { - content: "\e600"; -} - -.j-icon-translate:before { - content: "\e73c"; -} - -.j-icon-error:before { - content: "\e73b"; -} - -.j-icon-more:before { - content: "\e73a"; -} - -.j-icon-scan:before { - content: "\e738"; -} - -.j-icon-fire:before { - content: "\e739"; -} - -.j-icon-arrow-down-circle:before { - content: "\e731"; -} - -.j-icon-map:before { - content: "\e732"; -} - -.j-icon-map-fill:before { - content: "\e733"; -} - -.j-icon-help-circle:before { - content: "\e72f"; -} - -.j-icon-warn-circle:before { - content: "\e730"; -} - -.j-icon-backspace:before { - content: "\e72d"; -} - -.j-icon-backspace-fill:before { - content: "\e72c"; -} - -.j-icon-eye-close:before { - content: "\e72e"; -} - -.j-icon-upload:before { - content: "\e722"; -} - -.j-icon-eye-disable:before { - content: "\e726"; -} - -.j-icon-record:before { - content: "\e725"; -} - -.j-icon-icon-test3:before { - content: "\e724"; -} - -.j-icon-icon-test5:before { - content: "\e723"; -} - -.j-icon-icon-test9:before { - content: "\e721"; -} - -.j-icon-editor-fill:before { - content: "\e72b"; -} - -.j-icon-share:before { - content: "\e729"; -} - -.j-icon-share-fill:before { - content: "\e728"; -} - -.j-icon-editor:before { - content: "\e72a"; -} - -.j-icon-wechat:before { - content: "\e727"; -} - -.j-icon-telephone:before { - content: "\e71c"; -} - -.j-icon-user:before { - content: "\e71a"; -} - -.j-icon-add:before { - content: "\e700"; -} - -.j-icon-add-circle:before { - content: "\e710"; -} - -.j-icon-arrow-up-circle:before { - content: "\e720"; -} - -.j-icon-arrow-right-circle:before { - content: "\e71f"; -} - -.j-icon-arrow-down:before { - content: "\e702"; -} - -.j-icon-dustbin:before { - content: "\e71d"; -} - -.j-icon-arrow-right:before { - content: "\e703"; -} - -.j-icon-eye:before { - content: "\e719"; -} - -.j-icon-bottom:before { - content: "\e707"; -} - -.j-icon-arrow-left-circle:before { - content: "\e71e"; -} - -.j-icon-attachment:before { - content: "\e714"; -} - -.j-icon-code:before { - content: "\e717"; -} - -.j-icon-close:before { - content: "\e704"; -} - -.j-icon-complete:before { - content: "\e718"; -} - -.j-icon-download:before { - content: "\e716"; -} - -.j-icon-minus:before { - content: "\e701"; -} - -.j-icon-picture:before { - content: "\e712"; -} - -.j-icon-search:before { - content: "\e711"; -} - -.j-icon-select:before { - content: "\e705"; -} - -.j-icon-success:before { - content: "\e706"; -} - -.j-icon-add-bold:before { - content: "\e708"; -} - -.j-icon-arrow-left-bold:before { - content: "\e70f"; -} - -.j-icon-arrow-up-bold:before { - content: "\e70e"; -} - -.j-icon-close-bold:before { - content: "\e70d"; -} - -.j-icon-arrow-down-bold:before { - content: "\e70c"; -} - -.j-icon-minus-bold:before { - content: "\e709"; -} - -.j-icon-arrow-right-bold:before { - content: "\e70b"; -} - -.j-icon-select-bold:before { - content: "\e70a"; -} - -.j-icon-arrow-up-fill:before { - content: "\e737"; -} - -.j-icon-arrow-down-fill:before { - content: "\e736"; -} - -.j-icon-arrow-left-fill:before { - content: "\e735"; -} - -.j-icon-arrow-right-fill:before { - content: "\e734"; -} - -.j-icon-user-fill:before { - content: "\e71b"; -} - -.j-icon-success-filling:before { - content: "\e713"; -} - -.j-icon-top-filling:before { - content: "\e715"; -} \ No newline at end of file +@import './assets/fonts/iconfont.less'; diff --git a/miniprogram/assets/font/demo_index.html b/miniprogram/assets/font/demo_index.html deleted file mode 100644 index 2f58da8..0000000 --- a/miniprogram/assets/font/demo_index.html +++ /dev/null @@ -1,1614 +0,0 @@ - - - - - iconfont Demo - - - - - - - - - - - - - -
-

- - -

-
- - - 查看项目 - -
-
-
-
    - -
  • - -
    translate2
    -
    
    -
    • - -
  • - -
    translate
    -
    
    -
    • - -
  • - -
    error
    -
    
    -
    • - -
  • - -
    more
    -
    
    -
    • - -
  • - -
    scan
    -
    
    -
    • - -
  • - -
    fire
    -
    
    -
    • - -
  • - -
    arrow-down-circle
    -
    
    -
    • - -
  • - -
    map
    -
    
    -
    • - -
  • - -
    map-fill
    -
    
    -
    • - -
  • - -
    help-circle
    -
    
    -
    • - -
  • - -
    warn-circle
    -
    
    -
    • - -
  • - -
    backspace
    -
    
    -
    • - -
  • - -
    backspace-fill
    -
    
    -
    • - -
  • - -
    eye-close
    -
    
    -
    • - -
  • - -
    upload
    -
    
    -
    • - -
  • - -
    eye-disable
    -
    
    -
    • - -
  • - -
    record
    -
    
    -
    • - -
  • - -
    time
    -
    
    -
    • - -
  • - -
    setting
    -
    
    -
    • - -
  • - -
    email
    -
    
    -
    • - -
  • - -
    editor-fill
    -
    
    -
    • - -
  • - -
    share
    -
    
    -
    • - -
  • - -
    share-fill
    -
    
    -
    • - -
  • - -
    editor
    -
    
    -
    • - -
  • - -
    wechat
    -
    
    -
    • - -
  • - -
    telephone
    -
    
    -
    • - -
  • - -
    user
    -
    
    -
    • - -
  • - -
    add
    -
    
    -
    • - -
  • - -
    add-circle
    -
    
    -
    • - -
  • - -
    arrow-up-circle
    -
    
    -
    • - -
  • - -
    arrow-right-circle
    -
    
    -
    • - -
  • - -
    arrow-down
    -
    
    -
    • - -
  • - -
    dustbin
    -
    
    -
    • - -
  • - -
    arrow-right
    -
    
    -
    • - -
  • - -
    eye
    -
    
    -
    • - -
  • - -
    bottom
    -
    
    -
    • - -
  • - -
    arrow-left-circle
    -
    
    -
    • - -
  • - -
    attachment
    -
    
    -
    • - -
  • - -
    code
    -
    
    -
    • - -
  • - -
    close
    -
    
    -
    • - -
  • - -
    complete
    -
    
    -
    • - -
  • - -
    download
    -
    
    -
    • - -
  • - -
    minus
    -
    
    -
    • - -
  • - -
    picture
    -
    
    -
    • - -
  • - -
    search
    -
    
    -
    • - -
  • - -
    select
    -
    
    -
    • - -
  • - -
    success
    -
    
    -
    • - -
  • - -
    add-bold
    -
    
    -
    • - -
  • - -
    arrow-left-bold
    -
    
    -
    • - -
  • - -
    arrow-up-bold
    -
    
    -
    • - -
  • - -
    close-bold
    -
    
    -
    • - -
  • - -
    arrow-down-bold
    -
    
    -
    • - -
  • - -
    minus-bold
    -
    
    -
    • - -
  • - -
    arrow-right-bold
    -
    
    -
    • - -
  • - -
    select-bold
    -
    
    -
    • - -
  • - -
    arrow-up-fill
    -
    
    -
    • - -
  • - -
    arrow-down-fill
    -
    
    -
    • - -
  • - -
    arrow-left-fill
    -
    
    -
    • - -
  • - -
    arrow-right-fill
    -
    
    -
    • - -
  • - -
    user-fill
    -
    
    -
    • - -
  • - -
    success-fill
    -
    
    -
    • - -
  • - -
    top-filling
    -
    
    -
    • - -
-
-

Unicode 引用

-
- -

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

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

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

-
-

Unicode 使用步骤如下：

-

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

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

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

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

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

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

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

-
-
-
-
-
    - -
  • - -
    - translate2 -
    -
    .icon-fanyi -
    -
    • - -
  • - -
    - translate -
    -
    .icon-fanyi_translate -
    -
    • - -
  • - -
    - error -
    -
    .icon-error -
    -
    • - -
  • - -
    - more -
    -
    .icon-more -
    -
    • - -
  • - -
    - scan -
    -
    .icon-scan -
    -
    • - -
  • - -
    - fire -
    -
    .icon-fire -
    -
    • - -
  • - -
    - arrow-down-circle -
    -
    .icon-arrow-down-circle -
    -
    • - -
  • - -
    - map -
    -
    .icon-map -
    -
    • - -
  • - -
    - map-fill -
    -
    .icon-map-fill -
    -
    • - -
  • - -
    - help-circle -
    -
    .icon-help-circle -
    -
    • - -
  • - -
    - warn-circle -
    -
    .icon-warn-circle -
    -
    • - -
  • - -
    - backspace -
    -
    .icon-backspace -
    -
    • - -
  • - -
    - backspace-fill -
    -
    .icon-backspace-fill -
    -
    • - -
  • - -
    - eye-close -
    -
    .icon-eye-close -
    -
    • - -
  • - -
    - upload -
    -
    .icon-upload -
    -
    • - -
  • - -
    - eye-disable -
    -
    .icon-eye-disable -
    -
    • - -
  • - -
    - record -
    -
    .icon-record -
    -
    • - -
  • - -
    - time -
    -
    .icon-icon-test3 -
    -
    • - -
  • - -
    - setting -
    -
    .icon-icon-test5 -
    -
    • - -
  • - -
    - email -
    -
    .icon-icon-test9 -
    -
    • - -
  • - -
    - editor-fill -
    -
    .icon-editor-fill -
    -
    • - -
  • - -
    - share -
    -
    .icon-share -
    -
    • - -
  • - -
    - share-fill -
    -
    .icon-share-fill -
    -
    • - -
  • - -
    - editor -
    -
    .icon-editor -
    -
    • - -
  • - -
    - wechat -
    -
    .icon-wechat -
    -
    • - -
  • - -
    - telephone -
    -
    .icon-telephone -
    -
    • - -
  • - -
    - user -
    -
    .icon-user -
    -
    • - -
  • - -
    - add -
    -
    .icon-add -
    -
    • - -
  • - -
    - add-circle -
    -
    .icon-add-circle -
    -
    • - -
  • - -
    - arrow-up-circle -
    -
    .icon-arrow-up-circle -
    -
    • - -
  • - -
    - arrow-right-circle -
    -
    .icon-arrow-right-circle -
    -
    • - -
  • - -
    - arrow-down -
    -
    .icon-arrow-down -
    -
    • - -
  • - -
    - dustbin -
    -
    .icon-ashbin -
    -
    • - -
  • - -
    - arrow-right -
    -
    .icon-arrow-right -
    -
    • - -
  • - -
    - eye -
    -
    .icon-eye -
    -
    • - -
  • - -
    - bottom -
    -
    .icon-bottom -
    -
    • - -
  • - -
    - arrow-left-circle -
    -
    .icon-arrow-left-circle -
    -
    • - -
  • - -
    - attachment -
    -
    .icon-attachment -
    -
    • - -
  • - -
    - code -
    -
    .icon-code -
    -
    • - -
  • - -
    - close -
    -
    .icon-close -
    -
    • - -
  • - -
    - complete -
    -
    .icon-complete -
    -
    • - -
  • - -
    - download -
    -
    .icon-download -
    -
    • - -
  • - -
    - minus -
    -
    .icon-minus -
    -
    • - -
  • - -
    - picture -
    -
    .icon-picture -
    -
    • - -
  • - -
    - search -
    -
    .icon-search -
    -
    • - -
  • - -
    - select -
    -
    .icon-select -
    -
    • - -
  • - -
    - success -
    -
    .icon-success -
    -
    • - -
  • - -
    - add-bold -
    -
    .icon-add-bold -
    -
    • - -
  • - -
    - arrow-left-bold -
    -
    .icon-arrow-left-bold -
    -
    • - -
  • - -
    - arrow-up-bold -
    -
    .icon-arrow-up-bold -
    -
    • - -
  • - -
    - close-bold -
    -
    .icon-close-bold -
    -
    • - -
  • - -
    - arrow-down-bold -
    -
    .icon-arrow-down-bold -
    -
    • - -
  • - -
    - minus-bold -
    -
    .icon-minus-bold -
    -
    • - -
  • - -
    - arrow-right-bold -
    -
    .icon-arrow-right-bold -
    -
    • - -
  • - -
    - select-bold -
    -
    .icon-select-bold -
    -
    • - -
  • - -
    - arrow-up-fill -
    -
    .icon-arrow-up-fill -
    -
    • - -
  • - -
    - arrow-down-fill -
    -
    .icon-arrow-down-fill -
    -
    • - -
  • - -
    - arrow-left-fill -
    -
    .icon-arrow-left-fill -
    -
    • - -
  • - -
    - arrow-right-fill -
    -
    .icon-arrow-right-fill -
    -
    • - -
  • - -
    - user-fill -
    -
    .icon-user-fill -
    -
    • - -
  • - -
    - success-fill -
    -
    .icon-success-filling -
    -
    • - -
  • - -
    - top-filling -
    -
    .icon-top-filling -
    -
    • - -
-
-

font-class 引用

-
- -

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

-

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

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

使用步骤如下：

-

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

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

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

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

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

-
-
-
-
-
    - -
  • - -
    translate2
    -
    #icon-fanyi
    -
    • - -
  • - -
    translate
    -
    #icon-fanyi_translate
    -
    • - -
  • - -
    error
    -
    #icon-error
    -
    • - -
  • - -
    more
    -
    #icon-more
    -
    • - -
  • - -
    scan
    -
    #icon-scan
    -
    • - -
  • - -
    fire
    -
    #icon-fire
    -
    • - -
  • - -
    arrow-down-circle
    -
    #icon-arrow-down-circle
    -
    • - -
  • - -
    map
    -
    #icon-map
    -
    • - -
  • - -
    map-fill
    -
    #icon-map-fill
    -
    • - -
  • - -
    help-circle
    -
    #icon-help-circle
    -
    • - -
  • - -
    warn-circle
    -
    #icon-warn-circle
    -
    • - -
  • - -
    backspace
    -
    #icon-backspace
    -
    • - -
  • - -
    backspace-fill
    -
    #icon-backspace-fill
    -
    • - -
  • - -
    eye-close
    -
    #icon-eye-close
    -
    • - -
  • - -
    upload
    -
    #icon-upload
    -
    • - -
  • - -
    eye-disable
    -
    #icon-eye-disable
    -
    • - -
  • - -
    record
    -
    #icon-record
    -
    • - -
  • - -
    time
    -
    #icon-icon-test3
    -
    • - -
  • - -
    setting
    -
    #icon-icon-test5
    -
    • - -
  • - -
    email
    -
    #icon-icon-test9
    -
    • - -
  • - -
    editor-fill
    -
    #icon-editor-fill
    -
    • - -
  • - -
    share
    -
    #icon-share
    -
    • - -
  • - -
    share-fill
    -
    #icon-share-fill
    -
    • - -
  • - -
    editor
    -
    #icon-editor
    -
    • - -
  • - -
    wechat
    -
    #icon-wechat
    -
    • - -
  • - -
    telephone
    -
    #icon-telephone
    -
    • - -
  • - -
    user
    -
    #icon-user
    -
    • - -
  • - -
    add
    -
    #icon-add
    -
    • - -
  • - -
    add-circle
    -
    #icon-add-circle
    -
    • - -
  • - -
    arrow-up-circle
    -
    #icon-arrow-up-circle
    -
    • - -
  • - -
    arrow-right-circle
    -
    #icon-arrow-right-circle
    -
    • - -
  • - -
    arrow-down
    -
    #icon-arrow-down
    -
    • - -
  • - -
    dustbin
    -
    #icon-ashbin
    -
    • - -
  • - -
    arrow-right
    -
    #icon-arrow-right
    -
    • - -
  • - -
    eye
    -
    #icon-eye
    -
    • - -
  • - -
    bottom
    -
    #icon-bottom
    -
    • - -
  • - -
    arrow-left-circle
    -
    #icon-arrow-left-circle
    -
    • - -
  • - -
    attachment
    -
    #icon-attachment
    -
    • - -
  • - -
    code
    -
    #icon-code
    -
    • - -
  • - -
    close
    -
    #icon-close
    -
    • - -
  • - -
    complete
    -
    #icon-complete
    -
    • - -
  • - -
    download
    -
    #icon-download
    -
    • - -
  • - -
    minus
    -
    #icon-minus
    -
    • - -
  • - -
    picture
    -
    #icon-picture
    -
    • - -
  • - -
    search
    -
    #icon-search
    -
    • - -
  • - -
    select
    -
    #icon-select
    -
    • - -
  • - -
    success
    -
    #icon-success
    -
    • - -
  • - -
    add-bold
    -
    #icon-add-bold
    -
    • - -
  • - -
    arrow-left-bold
    -
    #icon-arrow-left-bold
    -
    • - -
  • - -
    arrow-up-bold
    -
    #icon-arrow-up-bold
    -
    • - -
  • - -
    close-bold
    -
    #icon-close-bold
    -
    • - -
  • - -
    arrow-down-bold
    -
    #icon-arrow-down-bold
    -
    • - -
  • - -
    minus-bold
    -
    #icon-minus-bold
    -
    • - -
  • - -
    arrow-right-bold
    -
    #icon-arrow-right-bold
    -
    • - -
  • - -
    select-bold
    -
    #icon-select-bold
    -
    • - -
  • - -
    arrow-up-fill
    -
    #icon-arrow-up-fill
    -
    • - -
  • - -
    arrow-down-fill
    -
    #icon-arrow-down-fill
    -
    • - -
  • - -
    arrow-left-fill
    -
    #icon-arrow-left-fill
    -
    • - -
  • - -
    arrow-right-fill
    -
    #icon-arrow-right-fill
    -
    • - -
  • - -
    user-fill
    -
    #icon-user-fill
    -
    • - -
  • - -
    success-fill
    -
    #icon-success-filling
    -
    • - -
  • - -
    top-filling
    -
    #icon-top-filling
    -
    • - -
-
-

Symbol 引用

-
- -

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

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

使用步骤如下：

-

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

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

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

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

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

-
<svg class="icon" aria-hidden="true">
-  <use xlink:href="#icon-xxx"></use>
-</svg>
-
-
-
- -
-
- - - diff --git a/miniprogram/assets/font/iconfont.css b/miniprogram/assets/font/iconfont.css deleted file mode 100644 index 00ca125..0000000 --- a/miniprogram/assets/font/iconfont.css +++ /dev/null @@ -1,263 +0,0 @@ -@font-face { - font-family: "iconfont"; /* Project id 4489595 */ - src: url('iconfont.woff2?t=1749113785534') format('woff2'), - url('iconfont.woff?t=1749113785534') format('woff'), - url('iconfont.ttf?t=1749113785534') format('truetype'); -} - -.iconfont { - font-family: "iconfont" !important; - font-size: 16px; - font-style: normal; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.icon-fanyi:before { - content: "\e600"; -} - -.icon-fanyi_translate:before { - content: "\e73c"; -} - -.icon-error:before { - content: "\e73b"; -} - -.icon-more:before { - content: "\e73a"; -} - -.icon-scan:before { - content: "\e738"; -} - -.icon-fire:before { - content: "\e739"; -} - -.icon-arrow-down-circle:before { - content: "\e731"; -} - -.icon-map:before { - content: "\e732"; -} - -.icon-map-fill:before { - content: "\e733"; -} - -.icon-help-circle:before { - content: "\e72f"; -} - -.icon-warn-circle:before { - content: "\e730"; -} - -.icon-backspace:before { - content: "\e72d"; -} - -.icon-backspace-fill:before { - content: "\e72c"; -} - -.icon-eye-close:before { - content: "\e72e"; -} - -.icon-upload:before { - content: "\e722"; -} - -.icon-eye-disable:before { - content: "\e726"; -} - -.icon-record:before { - content: "\e725"; -} - -.icon-icon-test3:before { - content: "\e724"; -} - -.icon-icon-test5:before { - content: "\e723"; -} - -.icon-icon-test9:before { - content: "\e721"; -} - -.icon-editor-fill:before { - content: "\e72b"; -} - -.icon-share:before { - content: "\e729"; -} - -.icon-share-fill:before { - content: "\e728"; -} - -.icon-editor:before { - content: "\e72a"; -} - -.icon-wechat:before { - content: "\e727"; -} - -.icon-telephone:before { - content: "\e71c"; -} - -.icon-user:before { - content: "\e71a"; -} - -.icon-add:before { - content: "\e700"; -} - -.icon-add-circle:before { - content: "\e710"; -} - -.icon-arrow-up-circle:before { - content: "\e720"; -} - -.icon-arrow-right-circle:before { - content: "\e71f"; -} - -.icon-arrow-down:before { - content: "\e702"; -} - -.icon-ashbin:before { - content: "\e71d"; -} - -.icon-arrow-right:before { - content: "\e703"; -} - -.icon-eye:before { - content: "\e719"; -} - -.icon-bottom:before { - content: "\e707"; -} - -.icon-arrow-left-circle:before { - content: "\e71e"; -} - -.icon-attachment:before { - content: "\e714"; -} - -.icon-code:before { - content: "\e717"; -} - -.icon-close:before { - content: "\e704"; -} - -.icon-complete:before { - content: "\e718"; -} - -.icon-download:before { - content: "\e716"; -} - -.icon-minus:before { - content: "\e701"; -} - -.icon-picture:before { - content: "\e712"; -} - -.icon-search:before { - content: "\e711"; -} - -.icon-select:before { - content: "\e705"; -} - -.icon-success:before { - content: "\e706"; -} - -.icon-add-bold:before { - content: "\e708"; -} - -.icon-arrow-left-bold:before { - content: "\e70f"; -} - -.icon-arrow-up-bold:before { - content: "\e70e"; -} - -.icon-close-bold:before { - content: "\e70d"; -} - -.icon-arrow-down-bold:before { - content: "\e70c"; -} - -.icon-minus-bold:before { - content: "\e709"; -} - -.icon-arrow-right-bold:before { - content: "\e70b"; -} - -.icon-select-bold:before { - content: "\e70a"; -} - -.icon-arrow-up-fill:before { - content: "\e737"; -} - -.icon-arrow-down-fill:before { - content: "\e736"; -} - -.icon-arrow-left-fill:before { - content: "\e735"; -} - -.icon-arrow-right-fill:before { - content: "\e734"; -} - -.icon-user-fill:before { - content: "\e71b"; -} - -.icon-success-filling:before { - content: "\e713"; -} - -.icon-top-filling:before { - content: "\e715"; -} - diff --git a/miniprogram/assets/font/iconfont.js b/miniprogram/assets/font/iconfont.js deleted file mode 100644 index 611e8f7..0000000 --- a/miniprogram/assets/font/iconfont.js +++ /dev/null @@ -1 +0,0 @@ -window._iconfont_svg_string_4489595='',(a=>{var c=(l=(l=document.getElementsByTagName("script"))[l.length-1]).getAttribute("data-injectcss"),l=l.getAttribute("data-disable-injectsvg");if(!l){var o,t,i,s,h,e=function(c,l){l.parentNode.insertBefore(c,l)};if(c&&!a.__iconfont__svg__cssinject__){a.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(c){console&&console.log(c)}}o=function(){var c,l=document.createElement("div");l.innerHTML=a._iconfont_svg_string_4489595,(l=l.getElementsByTagName("svg")[0])&&(l.setAttribute("aria-hidden","true"),l.style.position="absolute",l.style.width=0,l.style.height=0,l.style.overflow="hidden",l=l,(c=document.body).firstChild?e(l,c.firstChild):c.appendChild(l))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(o,0):(t=function(){document.removeEventListener("DOMContentLoaded",t,!1),o()},document.addEventListener("DOMContentLoaded",t,!1)):document.attachEvent&&(i=o,s=a.document,h=!1,m(),s.onreadystatechange=function(){"complete"==s.readyState&&(s.onreadystatechange=null,d())})}function d(){h||(h=!0,i())}function m(){try{s.documentElement.doScroll("left")}catch(c){return void setTimeout(m,50)}d()}})(window); \ No newline at end of file diff --git a/miniprogram/assets/font/iconfont.json b/miniprogram/assets/font/iconfont.json deleted file mode 100644 index 507643d..0000000 --- a/miniprogram/assets/font/iconfont.json +++ /dev/null @@ -1,443 +0,0 @@ -{ - "id": "4489595", - "name": "SVG2字体", - "font_family": "iconfont", - "css_prefix_text": "icon-", - "description": "", - "glyphs": [ - { - "icon_id": "22779598", - "name": "translate2", - "font_class": "fanyi", - "unicode": "e600", - "unicode_decimal": 58880 - }, - { - "icon_id": "36857448", - "name": "translate", - "font_class": "fanyi_translate", - "unicode": "e73c", - "unicode_decimal": 59196 - }, - { - "icon_id": "15838473", - "name": "error", - "font_class": "error", - "unicode": "e73b", - "unicode_decimal": 59195 - }, - { - "icon_id": "15838508", - "name": "more", - "font_class": "more", - "unicode": "e73a", - "unicode_decimal": 59194 - }, - { - "icon_id": "11372685", - "name": "scan", - "font_class": "scan", - "unicode": "e738", - "unicode_decimal": 59192 - }, - { - "icon_id": "11372790", - "name": "fire", - "font_class": "fire", - "unicode": "e739", - "unicode_decimal": 59193 - }, - { - "icon_id": "15838459", - "name": "arrow-down-circle", - "font_class": "arrow-down-circle", - "unicode": "e731", - "unicode_decimal": 59185 - }, - { - "icon_id": "15838499", - "name": "map", - "font_class": "map", - "unicode": "e732", - "unicode_decimal": 59186 - }, - { - "icon_id": "15838614", - "name": "map-fill", - "font_class": "map-fill", - "unicode": "e733", - "unicode_decimal": 59187 - }, - { - "icon_id": "39727400", - "name": "help-circle", - "font_class": "help-circle", - "unicode": "e72f", - "unicode_decimal": 59183 - }, - { - "icon_id": "39727412", - "name": "warn-circle", - "font_class": "warn-circle", - "unicode": "e730", - "unicode_decimal": 59184 - }, - { - "icon_id": "39768554", - "name": "backspace", - "font_class": "backspace", - "unicode": "e72d", - "unicode_decimal": 59181 - }, - { - "icon_id": "39768569", - "name": "backspace-fill", - "font_class": "backspace-fill", - "unicode": "e72c", - "unicode_decimal": 59180 - }, - { - "icon_id": "29306576", - "name": "eye-close", - "font_class": "eye-close", - "unicode": "e72e", - "unicode_decimal": 59182 - }, - { - "icon_id": "15838548", - "name": "upload", - "font_class": "upload", - "unicode": "e722", - "unicode_decimal": 59170 - }, - { - "icon_id": "8776676", - "name": "eye-disable", - "font_class": "eye-disable", - "unicode": "e726", - "unicode_decimal": 59174 - }, - { - "icon_id": "8776711", - "name": "record", - "font_class": "record", - "unicode": "e725", - "unicode_decimal": 59173 - }, - { - "icon_id": "8776715", - "name": "time", - "font_class": "icon-test3", - "unicode": "e724", - "unicode_decimal": 59172 - }, - { - "icon_id": "8776873", - "name": "setting", - "font_class": "icon-test5", - "unicode": "e723", - "unicode_decimal": 59171 - }, - { - "icon_id": "8777166", - "name": "email", - "font_class": "icon-test9", - "unicode": "e721", - "unicode_decimal": 59169 - }, - { - "icon_id": "11372791", - "name": "editor-fill", - "font_class": "editor-fill", - "unicode": "e72b", - "unicode_decimal": 59179 - }, - { - "icon_id": "39768492", - "name": "share", - "font_class": "share", - "unicode": "e729", - "unicode_decimal": 59177 - }, - { - "icon_id": "39768493", - "name": "share-fill", - "font_class": "share-fill", - "unicode": "e728", - "unicode_decimal": 59176 - }, - { - "icon_id": "11372647", - "name": "editor", - "font_class": "editor", - "unicode": "e72a", - "unicode_decimal": 59178 - }, - { - "icon_id": "39768549", - "name": "wechat", - "font_class": "wechat", - "unicode": "e727", - "unicode_decimal": 59175 - }, - { - "icon_id": "15838544", - "name": "telephone", - "font_class": "telephone", - "unicode": "e71c", - "unicode_decimal": 59164 - }, - { - "icon_id": "15838547", - "name": "user", - "font_class": "user", - "unicode": "e71a", - "unicode_decimal": 59162 - }, - { - "icon_id": "15838424", - "name": "add", - "font_class": "add", - "unicode": "e700", - "unicode_decimal": 59136 - }, - { - "icon_id": "15838425", - "name": "add-circle", - "font_class": "add-circle", - "unicode": "e710", - "unicode_decimal": 59152 - }, - { - "icon_id": "15838427", - "name": "arrow-up-circle", - "font_class": "arrow-up-circle", - "unicode": "e720", - "unicode_decimal": 59168 - }, - { - "icon_id": "15838428", - "name": "arrow-right-circle", - "font_class": "arrow-right-circle", - "unicode": "e71f", - "unicode_decimal": 59167 - }, - { - "icon_id": "15838429", - "name": "arrow-down", - "font_class": "arrow-down", - "unicode": "e702", - "unicode_decimal": 59138 - }, - { - "icon_id": "15838430", - "name": "dustbin", - "font_class": "ashbin", - "unicode": "e71d", - "unicode_decimal": 59165 - }, - { - "icon_id": "15838431", - "name": "arrow-right", - "font_class": "arrow-right", - "unicode": "e703", - "unicode_decimal": 59139 - }, - { - "icon_id": "15838432", - "name": "eye", - "font_class": "eye", - "unicode": "e719", - "unicode_decimal": 59161 - }, - { - "icon_id": "15838433", - "name": "bottom", - "font_class": "bottom", - "unicode": "e707", - "unicode_decimal": 59143 - }, - { - "icon_id": "15838437", - "name": "arrow-left-circle", - "font_class": "arrow-left-circle", - "unicode": "e71e", - "unicode_decimal": 59166 - }, - { - "icon_id": "15838442", - "name": "attachment", - "font_class": "attachment", - "unicode": "e714", - "unicode_decimal": 59156 - }, - { - "icon_id": "15838443", - "name": "code", - "font_class": "code", - "unicode": "e717", - "unicode_decimal": 59159 - }, - { - "icon_id": "15838444", - "name": "close", - "font_class": "close", - "unicode": "e704", - "unicode_decimal": 59140 - }, - { - "icon_id": "15838450", - "name": "complete", - "font_class": "complete", - "unicode": "e718", - "unicode_decimal": 59160 - }, - { - "icon_id": "15838464", - "name": "download", - "font_class": "download", - "unicode": "e716", - "unicode_decimal": 59158 - }, - { - "icon_id": "15838514", - "name": "minus", - "font_class": "minus", - "unicode": "e701", - "unicode_decimal": 59137 - }, - { - "icon_id": "15838521", - "name": "picture", - "font_class": "picture", - "unicode": "e712", - "unicode_decimal": 59154 - }, - { - "icon_id": "15838525", - "name": "search", - "font_class": "search", - "unicode": "e711", - "unicode_decimal": 59153 - }, - { - "icon_id": "15838530", - "name": "select", - "font_class": "select", - "unicode": "e705", - "unicode_decimal": 59141 - }, - { - "icon_id": "15838532", - "name": "success", - "font_class": "success", - "unicode": "e706", - "unicode_decimal": 59142 - }, - { - "icon_id": "15838560", - "name": "add-bold", - "font_class": "add-bold", - "unicode": "e708", - "unicode_decimal": 59144 - }, - { - "icon_id": "15838561", - "name": "arrow-left-bold", - "font_class": "arrow-left-bold", - "unicode": "e70f", - "unicode_decimal": 59151 - }, - { - "icon_id": "15838562", - "name": "arrow-up-bold", - "font_class": "arrow-up-bold", - "unicode": "e70e", - "unicode_decimal": 59150 - }, - { - "icon_id": "15838563", - "name": "close-bold", - "font_class": "close-bold", - "unicode": "e70d", - "unicode_decimal": 59149 - }, - { - "icon_id": "15838564", - "name": "arrow-down-bold", - "font_class": "arrow-down-bold", - "unicode": "e70c", - "unicode_decimal": 59148 - }, - { - "icon_id": "15838565", - "name": "minus-bold", - "font_class": "minus-bold", - "unicode": "e709", - "unicode_decimal": 59145 - }, - { - "icon_id": "15838566", - "name": "arrow-right-bold", - "font_class": "arrow-right-bold", - "unicode": "e70b", - "unicode_decimal": 59147 - }, - { - "icon_id": "15838567", - "name": "select-bold", - "font_class": "select-bold", - "unicode": "e70a", - "unicode_decimal": 59146 - }, - { - "icon_id": "15838581", - "name": "arrow-up-fill", - "font_class": "arrow-up-fill", - "unicode": "e737", - "unicode_decimal": 59191 - }, - { - "icon_id": "15838582", - "name": "arrow-down-fill", - "font_class": "arrow-down-fill", - "unicode": "e736", - "unicode_decimal": 59190 - }, - { - "icon_id": "15838583", - "name": "arrow-left-fill", - "font_class": "arrow-left-fill", - "unicode": "e735", - "unicode_decimal": 59189 - }, - { - "icon_id": "15838584", - "name": "arrow-right-fill", - "font_class": "arrow-right-fill", - "unicode": "e734", - "unicode_decimal": 59188 - }, - { - "icon_id": "15838606", - "name": "user-fill", - "font_class": "user-fill", - "unicode": "e71b", - "unicode_decimal": 59163 - }, - { - "icon_id": "15838611", - "name": "success-fill", - "font_class": "success-filling", - "unicode": "e713", - "unicode_decimal": 59155 - }, - { - "icon_id": "15838618", - "name": "top-filling", - "font_class": "top-filling", - "unicode": "e715", - "unicode_decimal": 59157 - } - ] -} diff --git a/miniprogram/assets/font/iconfont.ttf b/miniprogram/assets/font/iconfont.ttf deleted file mode 100644 index 7769bca..0000000 Binary files a/miniprogram/assets/font/iconfont.ttf and /dev/null differ diff --git a/miniprogram/assets/font/iconfont.woff b/miniprogram/assets/font/iconfont.woff deleted file mode 100644 index ca55e7a..0000000 Binary files a/miniprogram/assets/font/iconfont.woff and /dev/null differ diff --git a/miniprogram/assets/font/iconfont.woff2 b/miniprogram/assets/font/iconfont.woff2 deleted file mode 100644 index a9f608a..0000000 Binary files a/miniprogram/assets/font/iconfont.woff2 and /dev/null differ diff --git a/miniprogram/assets/fontV1/demo.css b/miniprogram/assets/fontV1/demo.css deleted file mode 100644 index a67054a..0000000 --- a/miniprogram/assets/fontV1/demo.css +++ /dev/null @@ -1,539 +0,0 @@ -/* Logo 字体 */ -@font-face { - font-family: "iconfont logo"; - src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); - src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), - url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), - url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), - url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); -} - -.logo { - font-family: "iconfont logo"; - font-size: 160px; - font-style: normal; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -/* tabs */ -.nav-tabs { - position: relative; -} - -.nav-tabs .nav-more { - position: absolute; - right: 0; - bottom: 0; - height: 42px; - line-height: 42px; - color: #666; -} - -#tabs { - border-bottom: 1px solid #eee; -} - -#tabs li { - cursor: pointer; - width: 100px; - height: 40px; - line-height: 40px; - text-align: center; - font-size: 16px; - border-bottom: 2px solid transparent; - position: relative; - z-index: 1; - margin-bottom: -1px; - color: #666; -} - - -#tabs .active { - border-bottom-color: #f00; - color: #222; -} - -.tab-container .content { - display: none; -} - -/* 页面布局 */ -.main { - padding: 30px 100px; - width: 960px; - margin: 0 auto; -} - -.main .logo { - color: #333; - text-align: left; - margin-bottom: 30px; - line-height: 1; - height: 110px; - margin-top: -50px; - overflow: hidden; - *zoom: 1; -} - -.main .logo a { - font-size: 160px; - color: #333; -} - -.helps { - margin-top: 40px; -} - -.helps pre { - padding: 20px; - margin: 10px 0; - border: solid 1px #e7e1cd; - background-color: #fffdef; - overflow: auto; -} - -.icon_lists { - width: 100% !important; - overflow: hidden; - *zoom: 1; -} - -.icon_lists li { - width: 100px; - margin-bottom: 10px; - margin-right: 20px; - text-align: center; - list-style: none !important; - cursor: default; -} - -.icon_lists li .code-name { - line-height: 1.2; -} - -.icon_lists .icon { - display: block; - height: 100px; - line-height: 100px; - font-size: 42px; - margin: 10px auto; - color: #333; - -webkit-transition: font-size 0.25s linear, width 0.25s linear; - -moz-transition: font-size 0.25s linear, width 0.25s linear; - transition: font-size 0.25s linear, width 0.25s linear; -} - -.icon_lists .icon:hover { - font-size: 100px; -} - -.icon_lists .svg-icon { - /* 通过设置 font-size 来改变图标大小 */ - width: 1em; - /* 图标和文字相邻时，垂直对齐 */ - vertical-align: -0.15em; - /* 通过设置 color 来改变 SVG 的颜色/fill */ - fill: currentColor; - /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 - normalize.css 中也包含这行 */ - overflow: hidden; -} - -.icon_lists li .name, -.icon_lists li .code-name { - color: #666; -} - -/* markdown 样式 */ -.markdown { - color: #666; - font-size: 14px; - line-height: 1.8; -} - -.highlight { - line-height: 1.5; -} - -.markdown img { - vertical-align: middle; - max-width: 100%; -} - -.markdown h1 { - color: #404040; - font-weight: 500; - line-height: 40px; - margin-bottom: 24px; -} - -.markdown h2, -.markdown h3, -.markdown h4, -.markdown h5, -.markdown h6 { - color: #404040; - margin: 1.6em 0 0.6em 0; - font-weight: 500; - clear: both; -} - -.markdown h1 { - font-size: 28px; -} - -.markdown h2 { - font-size: 22px; -} - -.markdown h3 { - font-size: 16px; -} - -.markdown h4 { - font-size: 14px; -} - -.markdown h5 { - font-size: 12px; -} - -.markdown h6 { - font-size: 12px; -} - -.markdown hr { - height: 1px; - border: 0; - background: #e9e9e9; - margin: 16px 0; - clear: both; -} - -.markdown p { - margin: 1em 0; -} - -.markdown>p, -.markdown>blockquote, -.markdown>.highlight, -.markdown>ol, -.markdown>ul { - width: 80%; -} - -.markdown ul>li { - list-style: circle; -} - -.markdown>ul li, -.markdown blockquote ul>li { - margin-left: 20px; - padding-left: 4px; -} - -.markdown>ul li p, -.markdown>ol li p { - margin: 0.6em 0; -} - -.markdown ol>li { - list-style: decimal; -} - -.markdown>ol li, -.markdown blockquote ol>li { - margin-left: 20px; - padding-left: 4px; -} - -.markdown code { - margin: 0 3px; - padding: 0 5px; - background: #eee; - border-radius: 3px; -} - -.markdown strong, -.markdown b { - font-weight: 600; -} - -.markdown>table { - border-collapse: collapse; - border-spacing: 0px; - empty-cells: show; - border: 1px solid #e9e9e9; - width: 95%; - margin-bottom: 24px; -} - -.markdown>table th { - white-space: nowrap; - color: #333; - font-weight: 600; -} - -.markdown>table th, -.markdown>table td { - border: 1px solid #e9e9e9; - padding: 8px 16px; - text-align: left; -} - -.markdown>table th { - background: #F7F7F7; -} - -.markdown blockquote { - font-size: 90%; - color: #999; - border-left: 4px solid #e9e9e9; - padding-left: 0.8em; - margin: 1em 0; -} - -.markdown blockquote p { - margin: 0; -} - -.markdown .anchor { - opacity: 0; - transition: opacity 0.3s ease; - margin-left: 8px; -} - -.markdown .waiting { - color: #ccc; -} - -.markdown h1:hover .anchor, -.markdown h2:hover .anchor, -.markdown h3:hover .anchor, -.markdown h4:hover .anchor, -.markdown h5:hover .anchor, -.markdown h6:hover .anchor { - opacity: 1; - display: inline-block; -} - -.markdown>br, -.markdown>p>br { - clear: both; -} - - -.hljs { - display: block; - background: white; - padding: 0.5em; - color: #333333; - overflow-x: auto; -} - -.hljs-comment, -.hljs-meta { - color: #969896; -} - -.hljs-string, -.hljs-variable, -.hljs-template-variable, -.hljs-strong, -.hljs-emphasis, -.hljs-quote { - color: #df5000; -} - -.hljs-keyword, -.hljs-selector-tag, -.hljs-type { - color: #a71d5d; -} - -.hljs-literal, -.hljs-symbol, -.hljs-bullet, -.hljs-attribute { - color: #0086b3; -} - -.hljs-section, -.hljs-name { - color: #63a35c; -} - -.hljs-tag { - color: #333333; -} - -.hljs-title, -.hljs-attr, -.hljs-selector-id, -.hljs-selector-class, -.hljs-selector-attr, -.hljs-selector-pseudo { - color: #795da3; -} - -.hljs-addition { - color: #55a532; - background-color: #eaffea; -} - -.hljs-deletion { - color: #bd2c00; - background-color: #ffecec; -} - -.hljs-link { - text-decoration: underline; -} - -/* 代码高亮 */ -/* PrismJS 1.15.0 -https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ -/** - * prism.js default theme for JavaScript, CSS and HTML - * Based on dabblet (http://dabblet.com) - * @author Lea Verou - */ -code[class*="language-"], -pre[class*="language-"] { - color: black; - background: none; - text-shadow: 0 1px white; - font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - word-wrap: normal; - line-height: 1.5; - - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; - - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; -} - -pre[class*="language-"]::-moz-selection, -pre[class*="language-"] ::-moz-selection, -code[class*="language-"]::-moz-selection, -code[class*="language-"] ::-moz-selection { - text-shadow: none; - background: #b3d4fc; -} - -pre[class*="language-"]::selection, -pre[class*="language-"] ::selection, -code[class*="language-"]::selection, -code[class*="language-"] ::selection { - text-shadow: none; - background: #b3d4fc; -} - -@media print { - - code[class*="language-"], - pre[class*="language-"] { - text-shadow: none; - } -} - -/* Code blocks */ -pre[class*="language-"] { - padding: 1em; - margin: .5em 0; - overflow: auto; -} - -:not(pre)>code[class*="language-"], -pre[class*="language-"] { - background: #f5f2f0; -} - -/* Inline code */ -:not(pre)>code[class*="language-"] { - padding: .1em; - border-radius: .3em; - white-space: normal; -} - -.token.comment, -.token.prolog, -.token.doctype, -.token.cdata { - color: slategray; -} - -.token.punctuation { - color: #999; -} - -.namespace { - opacity: .7; -} - -.token.property, -.token.tag, -.token.boolean, -.token.number, -.token.constant, -.token.symbol, -.token.deleted { - color: #905; -} - -.token.selector, -.token.attr-name, -.token.string, -.token.char, -.token.builtin, -.token.inserted { - color: #690; -} - -.token.operator, -.token.entity, -.token.url, -.language-css .token.string, -.style .token.string { - color: #9a6e3a; - background: hsla(0, 0%, 100%, .5); -} - -.token.atrule, -.token.attr-value, -.token.keyword { - color: #07a; -} - -.token.function, -.token.class-name { - color: #DD4A68; -} - -.token.regex, -.token.important, -.token.variable { - color: #e90; -} - -.token.important, -.token.bold { - font-weight: bold; -} - -.token.italic { - font-style: italic; -} - -.token.entity { - cursor: help; -} diff --git a/miniprogram/assets/fontV1/demo_index.html b/miniprogram/assets/fontV1/demo_index.html deleted file mode 100644 index f484757..0000000 --- a/miniprogram/assets/fontV1/demo_index.html +++ /dev/null @@ -1,1568 +0,0 @@ - - - - - iconfont Demo - - - - - - - - - - - - - -
-

- - -

-
- - - 查看项目 - -
-
-
-
    - -
  • - -
    error
    -
    &#xe73b;
    -
    • - -
  • - -
    more
    -
    &#xe73a;
    -
    • - -
  • - -
    scan
    -
    &#xe738;
    -
    • - -
  • - -
    fire
    -
    &#xe739;
    -
    • - -
  • - -
    arrow-down-circle
    -
    &#xe731;
    -
    • - -
  • - -
    map
    -
    &#xe732;
    -
    • - -
  • - -
    map-fill
    -
    &#xe733;
    -
    • - -
  • - -
    help-circle
    -
    &#xe72f;
    -
    • - -
  • - -
    warn-circle
    -
    &#xe730;
    -
    • - -
  • - -
    backspace
    -
    &#xe72d;
    -
    • - -
  • - -
    backspace-fill
    -
    &#xe72c;
    -
    • - -
  • - -
    eye-close
    -
    &#xe72e;
    -
    • - -
  • - -
    upload
    -
    &#xe722;
    -
    • - -
  • - -
    eye-disable
    -
    &#xe726;
    -
    • - -
  • - -
    record
    -
    &#xe725;
    -
    • - -
  • - -
    time
    -
    &#xe724;
    -
    • - -
  • - -
    setting
    -
    &#xe723;
    -
    • - -
  • - -
    email
    -
    &#xe721;
    -
    • - -
  • - -
    editor-fill
    -
    &#xe72b;
    -
    • - -
  • - -
    share
    -
    &#xe729;
    -
    • - -
  • - -
    share-fill
    -
    &#xe728;
    -
    • - -
  • - -
    editor
    -
    &#xe72a;
    -
    • - -
  • - -
    wechat
    -
    &#xe727;
    -
    • - -
  • - -
    telephone
    -
    &#xe71c;
    -
    • - -
  • - -
    user
    -
    &#xe71a;
    -
    • - -
  • - -
    add
    -
    &#xe700;
    -
    • - -
  • - -
    add-circle
    -
    &#xe710;
    -
    • - -
  • - -
    arrow-up-circle
    -
    &#xe720;
    -
    • - -
  • - -
    arrow-right-circle
    -
    &#xe71f;
    -
    • - -
  • - -
    arrow-down
    -
    &#xe702;
    -
    • - -
  • - -
    dustbin
    -
    &#xe71d;
    -
    • - -
  • - -
    arrow-right
    -
    &#xe703;
    -
    • - -
  • - -
    eye
    -
    &#xe719;
    -
    • - -
  • - -
    bottom
    -
    &#xe707;
    -
    • - -
  • - -
    arrow-left-circle
    -
    &#xe71e;
    -
    • - -
  • - -
    attachment
    -
    &#xe714;
    -
    • - -
  • - -
    code
    -
    &#xe717;
    -
    • - -
  • - -
    close
    -
    &#xe704;
    -
    • - -
  • - -
    complete
    -
    &#xe718;
    -
    • - -
  • - -
    download
    -
    &#xe716;
    -
    • - -
  • - -
    minus
    -
    &#xe701;
    -
    • - -
  • - -
    picture
    -
    &#xe712;
    -
    • - -
  • - -
    search
    -
    &#xe711;
    -
    • - -
  • - -
    select
    -
    &#xe705;
    -
    • - -
  • - -
    success
    -
    &#xe706;
    -
    • - -
  • - -
    add-bold
    -
    &#xe708;
    -
    • - -
  • - -
    arrow-left-bold
    -
    &#xe70f;
    -
    • - -
  • - -
    arrow-up-bold
    -
    &#xe70e;
    -
    • - -
  • - -
    close-bold
    -
    &#xe70d;
    -
    • - -
  • - -
    arrow-down-bold
    -
    &#xe70c;
    -
    • - -
  • - -
    minus-bold
    -
    &#xe709;
    -
    • - -
  • - -
    arrow-right-bold
    -
    &#xe70b;
    -
    • - -
  • - -
    select-bold
    -
    &#xe70a;
    -
    • - -
  • - -
    arrow-up-fill
    -
    &#xe737;
    -
    • - -
  • - -
    arrow-down-fill
    -
    &#xe736;
    -
    • - -
  • - -
    arrow-left-fill
    -
    &#xe735;
    -
    • - -
  • - -
    arrow-right-fill
    -
    &#xe734;
    -
    • - -
  • - -
    user-fill
    -
    &#xe71b;
    -
    • - -
  • - -
    success-fill
    -
    &#xe713;
    -
    • - -
  • - -
    top-filling
    -
    &#xe715;
    -
    • - -
-
-

Unicode 引用

-
- -

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

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

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

-
-

Unicode 使用步骤如下：

-

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

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

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

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

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

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

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

-
-
-
-
-
    - -
  • - -
    - error -
    -
    .icon-error -
    -
    • - -
  • - -
    - more -
    -
    .icon-more -
    -
    • - -
  • - -
    - scan -
    -
    .icon-scan -
    -
    • - -
  • - -
    - fire -
    -
    .icon-fire -
    -
    • - -
  • - -
    - arrow-down-circle -
    -
    .icon-arrow-down-circle -
    -
    • - -
  • - -
    - map -
    -
    .icon-map -
    -
    • - -
  • - -
    - map-fill -
    -
    .icon-map-fill -
    -
    • - -
  • - -
    - help-circle -
    -
    .icon-help-circle -
    -
    • - -
  • - -
    - warn-circle -
    -
    .icon-warn-circle -
    -
    • - -
  • - -
    - backspace -
    -
    .icon-backspace -
    -
    • - -
  • - -
    - backspace-fill -
    -
    .icon-backspace-fill -
    -
    • - -
  • - -
    - eye-close -
    -
    .icon-eye-close -
    -
    • - -
  • - -
    - upload -
    -
    .icon-upload -
    -
    • - -
  • - -
    - eye-disable -
    -
    .icon-eye-disable -
    -
    • - -
  • - -
    - record -
    -
    .icon-record -
    -
    • - -
  • - -
    - time -
    -
    .icon-icon-test3 -
    -
    • - -
  • - -
    - setting -
    -
    .icon-icon-test5 -
    -
    • - -
  • - -
    - email -
    -
    .icon-icon-test9 -
    -
    • - -
  • - -
    - editor-fill -
    -
    .icon-editor-fill -
    -
    • - -
  • - -
    - share -
    -
    .icon-share -
    -
    • - -
  • - -
    - share-fill -
    -
    .icon-share-fill -
    -
    • - -
  • - -
    - editor -
    -
    .icon-editor -
    -
    • - -
  • - -
    - wechat -
    -
    .icon-wechat -
    -
    • - -
  • - -
    - telephone -
    -
    .icon-telephone -
    -
    • - -
  • - -
    - user -
    -
    .icon-user -
    -
    • - -
  • - -
    - add -
    -
    .icon-add -
    -
    • - -
  • - -
    - add-circle -
    -
    .icon-add-circle -
    -
    • - -
  • - -
    - arrow-up-circle -
    -
    .icon-arrow-up-circle -
    -
    • - -
  • - -
    - arrow-right-circle -
    -
    .icon-arrow-right-circle -
    -
    • - -
  • - -
    - arrow-down -
    -
    .icon-arrow-down -
    -
    • - -
  • - -
    - dustbin -
    -
    .icon-ashbin -
    -
    • - -
  • - -
    - arrow-right -
    -
    .icon-arrow-right -
    -
    • - -
  • - -
    - eye -
    -
    .icon-eye -
    -
    • - -
  • - -
    - bottom -
    -
    .icon-bottom -
    -
    • - -
  • - -
    - arrow-left-circle -
    -
    .icon-arrow-left-circle -
    -
    • - -
  • - -
    - attachment -
    -
    .icon-attachment -
    -
    • - -
  • - -
    - code -
    -
    .icon-code -
    -
    • - -
  • - -
    - close -
    -
    .icon-close -
    -
    • - -
  • - -
    - complete -
    -
    .icon-complete -
    -
    • - -
  • - -
    - download -
    -
    .icon-download -
    -
    • - -
  • - -
    - minus -
    -
    .icon-minus -
    -
    • - -
  • - -
    - picture -
    -
    .icon-picture -
    -
    • - -
  • - -
    - search -
    -
    .icon-search -
    -
    • - -
  • - -
    - select -
    -
    .icon-select -
    -
    • - -
  • - -
    - success -
    -
    .icon-success -
    -
    • - -
  • - -
    - add-bold -
    -
    .icon-add-bold -
    -
    • - -
  • - -
    - arrow-left-bold -
    -
    .icon-arrow-left-bold -
    -
    • - -
  • - -
    - arrow-up-bold -
    -
    .icon-arrow-up-bold -
    -
    • - -
  • - -
    - close-bold -
    -
    .icon-close-bold -
    -
    • - -
  • - -
    - arrow-down-bold -
    -
    .icon-arrow-down-bold -
    -
    • - -
  • - -
    - minus-bold -
    -
    .icon-minus-bold -
    -
    • - -
  • - -
    - arrow-right-bold -
    -
    .icon-arrow-right-bold -
    -
    • - -
  • - -
    - select-bold -
    -
    .icon-select-bold -
    -
    • - -
  • - -
    - arrow-up-fill -
    -
    .icon-arrow-up-fill -
    -
    • - -
  • - -
    - arrow-down-fill -
    -
    .icon-arrow-down-fill -
    -
    • - -
  • - -
    - arrow-left-fill -
    -
    .icon-arrow-left-fill -
    -
    • - -
  • - -
    - arrow-right-fill -
    -
    .icon-arrow-right-fill -
    -
    • - -
  • - -
    - user-fill -
    -
    .icon-user-fill -
    -
    • - -
  • - -
    - success-fill -
    -
    .icon-success-filling -
    -
    • - -
  • - -
    - top-filling -
    -
    .icon-top-filling -
    -
    • - -
-
-

font-class 引用

-
- -

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

-

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

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

使用步骤如下：

-

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

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

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

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

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

-
-
-
-
-
    - -
  • - -
    error
    -
    #icon-error
    -
    • - -
  • - -
    more
    -
    #icon-more
    -
    • - -
  • - -
    scan
    -
    #icon-scan
    -
    • - -
  • - -
    fire
    -
    #icon-fire
    -
    • - -
  • - -
    arrow-down-circle
    -
    #icon-arrow-down-circle
    -
    • - -
  • - -
    map
    -
    #icon-map
    -
    • - -
  • - -
    map-fill
    -
    #icon-map-fill
    -
    • - -
  • - -
    help-circle
    -
    #icon-help-circle
    -
    • - -
  • - -
    warn-circle
    -
    #icon-warn-circle
    -
    • - -
  • - -
    backspace
    -
    #icon-backspace
    -
    • - -
  • - -
    backspace-fill
    -
    #icon-backspace-fill
    -
    • - -
  • - -
    eye-close
    -
    #icon-eye-close
    -
    • - -
  • - -
    upload
    -
    #icon-upload
    -
    • - -
  • - -
    eye-disable
    -
    #icon-eye-disable
    -
    • - -
  • - -
    record
    -
    #icon-record
    -
    • - -
  • - -
    time
    -
    #icon-icon-test3
    -
    • - -
  • - -
    setting
    -
    #icon-icon-test5
    -
    • - -
  • - -
    email
    -
    #icon-icon-test9
    -
    • - -
  • - -
    editor-fill
    -
    #icon-editor-fill
    -
    • - -
  • - -
    share
    -
    #icon-share
    -
    • - -
  • - -
    share-fill
    -
    #icon-share-fill
    -
    • - -
  • - -
    editor
    -
    #icon-editor
    -
    • - -
  • - -
    wechat
    -
    #icon-wechat
    -
    • - -
  • - -
    telephone
    -
    #icon-telephone
    -
    • - -
  • - -
    user
    -
    #icon-user
    -
    • - -
  • - -
    add
    -
    #icon-add
    -
    • - -
  • - -
    add-circle
    -
    #icon-add-circle
    -
    • - -
  • - -
    arrow-up-circle
    -
    #icon-arrow-up-circle
    -
    • - -
  • - -
    arrow-right-circle
    -
    #icon-arrow-right-circle
    -
    • - -
  • - -
    arrow-down
    -
    #icon-arrow-down
    -
    • - -
  • - -
    dustbin
    -
    #icon-ashbin
    -
    • - -
  • - -
    arrow-right
    -
    #icon-arrow-right
    -
    • - -
  • - -
    eye
    -
    #icon-eye
    -
    • - -
  • - -
    bottom
    -
    #icon-bottom
    -
    • - -
  • - -
    arrow-left-circle
    -
    #icon-arrow-left-circle
    -
    • - -
  • - -
    attachment
    -
    #icon-attachment
    -
    • - -
  • - -
    code
    -
    #icon-code
    -
    • - -
  • - -
    close
    -
    #icon-close
    -
    • - -
  • - -
    complete
    -
    #icon-complete
    -
    • - -
  • - -
    download
    -
    #icon-download
    -
    • - -
  • - -
    minus
    -
    #icon-minus
    -
    • - -
  • - -
    picture
    -
    #icon-picture
    -
    • - -
  • - -
    search
    -
    #icon-search
    -
    • - -
  • - -
    select
    -
    #icon-select
    -
    • - -
  • - -
    success
    -
    #icon-success
    -
    • - -
  • - -
    add-bold
    -
    #icon-add-bold
    -
    • - -
  • - -
    arrow-left-bold
    -
    #icon-arrow-left-bold
    -
    • - -
  • - -
    arrow-up-bold
    -
    #icon-arrow-up-bold
    -
    • - -
  • - -
    close-bold
    -
    #icon-close-bold
    -
    • - -
  • - -
    arrow-down-bold
    -
    #icon-arrow-down-bold
    -
    • - -
  • - -
    minus-bold
    -
    #icon-minus-bold
    -
    • - -
  • - -
    arrow-right-bold
    -
    #icon-arrow-right-bold
    -
    • - -
  • - -
    select-bold
    -
    #icon-select-bold
    -
    • - -
  • - -
    arrow-up-fill
    -
    #icon-arrow-up-fill
    -
    • - -
  • - -
    arrow-down-fill
    -
    #icon-arrow-down-fill
    -
    • - -
  • - -
    arrow-left-fill
    -
    #icon-arrow-left-fill
    -
    • - -
  • - -
    arrow-right-fill
    -
    #icon-arrow-right-fill
    -
    • - -
  • - -
    user-fill
    -
    #icon-user-fill
    -
    • - -
  • - -
    success-fill
    -
    #icon-success-filling
    -
    • - -
  • - -
    top-filling
    -
    #icon-top-filling
    -
    • - -
-
-

Symbol 引用

-
- -

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

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

使用步骤如下：

-

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

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

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

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

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

-
<svg class="icon" aria-hidden="true">
-  <use xlink:href="#icon-xxx"></use>
-</svg>
-
-
-
- -
-
- - - diff --git a/miniprogram/assets/fontV1/iconfont.css b/miniprogram/assets/fontV1/iconfont.css deleted file mode 100644 index 85e5a6c..0000000 --- a/miniprogram/assets/fontV1/iconfont.css +++ /dev/null @@ -1,255 +0,0 @@ -@font-face { - font-family: "iconfont"; /* Project id 4489595 */ - src: url('iconfont.woff2?t=1715597123285') format('woff2'), - url('iconfont.woff?t=1715597123285') format('woff'), - url('iconfont.ttf?t=1715597123285') format('truetype'); -} - -.iconfont { - font-family: "iconfont" !important; - font-size: 16px; - font-style: normal; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.icon-error:before { - content: "\e73b"; -} - -.icon-more:before { - content: "\e73a"; -} - -.icon-scan:before { - content: "\e738"; -} - -.icon-fire:before { - content: "\e739"; -} - -.icon-arrow-down-circle:before { - content: "\e731"; -} - -.icon-map:before { - content: "\e732"; -} - -.icon-map-fill:before { - content: "\e733"; -} - -.icon-help-circle:before { - content: "\e72f"; -} - -.icon-warn-circle:before { - content: "\e730"; -} - -.icon-backspace:before { - content: "\e72d"; -} - -.icon-backspace-fill:before { - content: "\e72c"; -} - -.icon-eye-close:before { - content: "\e72e"; -} - -.icon-upload:before { - content: "\e722"; -} - -.icon-eye-disable:before { - content: "\e726"; -} - -.icon-record:before { - content: "\e725"; -} - -.icon-icon-test3:before { - content: "\e724"; -} - -.icon-icon-test5:before { - content: "\e723"; -} - -.icon-icon-test9:before { - content: "\e721"; -} - -.icon-editor-fill:before { - content: "\e72b"; -} - -.icon-share:before { - content: "\e729"; -} - -.icon-share-fill:before { - content: "\e728"; -} - -.icon-editor:before { - content: "\e72a"; -} - -.icon-wechat:before { - content: "\e727"; -} - -.icon-telephone:before { - content: "\e71c"; -} - -.icon-user:before { - content: "\e71a"; -} - -.icon-add:before { - content: "\e700"; -} - -.icon-add-circle:before { - content: "\e710"; -} - -.icon-arrow-up-circle:before { - content: "\e720"; -} - -.icon-arrow-right-circle:before { - content: "\e71f"; -} - -.icon-arrow-down:before { - content: "\e702"; -} - -.icon-ashbin:before { - content: "\e71d"; -} - -.icon-arrow-right:before { - content: "\e703"; -} - -.icon-eye:before { - content: "\e719"; -} - -.icon-bottom:before { - content: "\e707"; -} - -.icon-arrow-left-circle:before { - content: "\e71e"; -} - -.icon-attachment:before { - content: "\e714"; -} - -.icon-code:before { - content: "\e717"; -} - -.icon-close:before { - content: "\e704"; -} - -.icon-complete:before { - content: "\e718"; -} - -.icon-download:before { - content: "\e716"; -} - -.icon-minus:before { - content: "\e701"; -} - -.icon-picture:before { - content: "\e712"; -} - -.icon-search:before { - content: "\e711"; -} - -.icon-select:before { - content: "\e705"; -} - -.icon-success:before { - content: "\e706"; -} - -.icon-add-bold:before { - content: "\e708"; -} - -.icon-arrow-left-bold:before { - content: "\e70f"; -} - -.icon-arrow-up-bold:before { - content: "\e70e"; -} - -.icon-close-bold:before { - content: "\e70d"; -} - -.icon-arrow-down-bold:before { - content: "\e70c"; -} - -.icon-minus-bold:before { - content: "\e709"; -} - -.icon-arrow-right-bold:before { - content: "\e70b"; -} - -.icon-select-bold:before { - content: "\e70a"; -} - -.icon-arrow-up-fill:before { - content: "\e737"; -} - -.icon-arrow-down-fill:before { - content: "\e736"; -} - -.icon-arrow-left-fill:before { - content: "\e735"; -} - -.icon-arrow-right-fill:before { - content: "\e734"; -} - -.icon-user-fill:before { - content: "\e71b"; -} - -.icon-success-filling:before { - content: "\e713"; -} - -.icon-top-filling:before { - content: "\e715"; -} - diff --git a/miniprogram/assets/fontV1/iconfont.js b/miniprogram/assets/fontV1/iconfont.js deleted file mode 100644 index 8ca1e13..0000000 --- a/miniprogram/assets/fontV1/iconfont.js +++ /dev/null @@ -1 +0,0 @@ -window._iconfont_svg_string_4489595='',function(a){var c=(c=document.getElementsByTagName("script"))[c.length-1],l=c.getAttribute("data-injectcss"),c=c.getAttribute("data-disable-injectsvg");if(!c){var o,t,i,s,h,e=function(c,l){l.parentNode.insertBefore(c,l)};if(l&&!a.__iconfont__svg__cssinject__){a.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(c){console&&console.log(c)}}o=function(){var c,l=document.createElement("div");l.innerHTML=a._iconfont_svg_string_4489595,(l=l.getElementsByTagName("svg")[0])&&(l.setAttribute("aria-hidden","true"),l.style.position="absolute",l.style.width=0,l.style.height=0,l.style.overflow="hidden",l=l,(c=document.body).firstChild?e(l,c.firstChild):c.appendChild(l))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(o,0):(t=function(){document.removeEventListener("DOMContentLoaded",t,!1),o()},document.addEventListener("DOMContentLoaded",t,!1)):document.attachEvent&&(i=o,s=a.document,h=!1,m(),s.onreadystatechange=function(){"complete"==s.readyState&&(s.onreadystatechange=null,d())})}function d(){h||(h=!0,i())}function m(){try{s.documentElement.doScroll("left")}catch(c){return void setTimeout(m,50)}d()}}(window); \ No newline at end of file diff --git a/miniprogram/assets/fontV1/iconfont.json b/miniprogram/assets/fontV1/iconfont.json deleted file mode 100644 index ee07ba5..0000000 --- a/miniprogram/assets/fontV1/iconfont.json +++ /dev/null @@ -1,429 +0,0 @@ -{ - "id": "4489595", - "name": "SVG2字体", - "font_family": "iconfont", - "css_prefix_text": "icon-", - "description": "", - "glyphs": [ - { - "icon_id": "15838473", - "name": "error", - "font_class": "error", - "unicode": "e73b", - "unicode_decimal": 59195 - }, - { - "icon_id": "15838508", - "name": "more", - "font_class": "more", - "unicode": "e73a", - "unicode_decimal": 59194 - }, - { - "icon_id": "11372685", - "name": "scan", - "font_class": "scan", - "unicode": "e738", - "unicode_decimal": 59192 - }, - { - "icon_id": "11372790", - "name": "fire", - "font_class": "fire", - "unicode": "e739", - "unicode_decimal": 59193 - }, - { - "icon_id": "15838459", - "name": "arrow-down-circle", - "font_class": "arrow-down-circle", - "unicode": "e731", - "unicode_decimal": 59185 - }, - { - "icon_id": "15838499", - "name": "map", - "font_class": "map", - "unicode": "e732", - "unicode_decimal": 59186 - }, - { - "icon_id": "15838614", - "name": "map-fill", - "font_class": "map-fill", - "unicode": "e733", - "unicode_decimal": 59187 - }, - { - "icon_id": "39727400", - "name": "help-circle", - "font_class": "help-circle", - "unicode": "e72f", - "unicode_decimal": 59183 - }, - { - "icon_id": "39727412", - "name": "warn-circle", - "font_class": "warn-circle", - "unicode": "e730", - "unicode_decimal": 59184 - }, - { - "icon_id": "39768554", - "name": "backspace", - "font_class": "backspace", - "unicode": "e72d", - "unicode_decimal": 59181 - }, - { - "icon_id": "39768569", - "name": "backspace-fill", - "font_class": "backspace-fill", - "unicode": "e72c", - "unicode_decimal": 59180 - }, - { - "icon_id": "29306576", - "name": "eye-close", - "font_class": "eye-close", - "unicode": "e72e", - "unicode_decimal": 59182 - }, - { - "icon_id": "15838548", - "name": "upload", - "font_class": "upload", - "unicode": "e722", - "unicode_decimal": 59170 - }, - { - "icon_id": "8776676", - "name": "eye-disable", - "font_class": "eye-disable", - "unicode": "e726", - "unicode_decimal": 59174 - }, - { - "icon_id": "8776711", - "name": "record", - "font_class": "record", - "unicode": "e725", - "unicode_decimal": 59173 - }, - { - "icon_id": "8776715", - "name": "time", - "font_class": "icon-test3", - "unicode": "e724", - "unicode_decimal": 59172 - }, - { - "icon_id": "8776873", - "name": "setting", - "font_class": "icon-test5", - "unicode": "e723", - "unicode_decimal": 59171 - }, - { - "icon_id": "8777166", - "name": "email", - "font_class": "icon-test9", - "unicode": "e721", - "unicode_decimal": 59169 - }, - { - "icon_id": "11372791", - "name": "editor-fill", - "font_class": "editor-fill", - "unicode": "e72b", - "unicode_decimal": 59179 - }, - { - "icon_id": "39768492", - "name": "share", - "font_class": "share", - "unicode": "e729", - "unicode_decimal": 59177 - }, - { - "icon_id": "39768493", - "name": "share-fill", - "font_class": "share-fill", - "unicode": "e728", - "unicode_decimal": 59176 - }, - { - "icon_id": "11372647", - "name": "editor", - "font_class": "editor", - "unicode": "e72a", - "unicode_decimal": 59178 - }, - { - "icon_id": "39768549", - "name": "wechat", - "font_class": "wechat", - "unicode": "e727", - "unicode_decimal": 59175 - }, - { - "icon_id": "15838544", - "name": "telephone", - "font_class": "telephone", - "unicode": "e71c", - "unicode_decimal": 59164 - }, - { - "icon_id": "15838547", - "name": "user", - "font_class": "user", - "unicode": "e71a", - "unicode_decimal": 59162 - }, - { - "icon_id": "15838424", - "name": "add", - "font_class": "add", - "unicode": "e700", - "unicode_decimal": 59136 - }, - { - "icon_id": "15838425", - "name": "add-circle", - "font_class": "add-circle", - "unicode": "e710", - "unicode_decimal": 59152 - }, - { - "icon_id": "15838427", - "name": "arrow-up-circle", - "font_class": "arrow-up-circle", - "unicode": "e720", - "unicode_decimal": 59168 - }, - { - "icon_id": "15838428", - "name": "arrow-right-circle", - "font_class": "arrow-right-circle", - "unicode": "e71f", - "unicode_decimal": 59167 - }, - { - "icon_id": "15838429", - "name": "arrow-down", - "font_class": "arrow-down", - "unicode": "e702", - "unicode_decimal": 59138 - }, - { - "icon_id": "15838430", - "name": "dustbin", - "font_class": "ashbin", - "unicode": "e71d", - "unicode_decimal": 59165 - }, - { - "icon_id": "15838431", - "name": "arrow-right", - "font_class": "arrow-right", - "unicode": "e703", - "unicode_decimal": 59139 - }, - { - "icon_id": "15838432", - "name": "eye", - "font_class": "eye", - "unicode": "e719", - "unicode_decimal": 59161 - }, - { - "icon_id": "15838433", - "name": "bottom", - "font_class": "bottom", - "unicode": "e707", - "unicode_decimal": 59143 - }, - { - "icon_id": "15838437", - "name": "arrow-left-circle", - "font_class": "arrow-left-circle", - "unicode": "e71e", - "unicode_decimal": 59166 - }, - { - "icon_id": "15838442", - "name": "attachment", - "font_class": "attachment", - "unicode": "e714", - "unicode_decimal": 59156 - }, - { - "icon_id": "15838443", - "name": "code", - "font_class": "code", - "unicode": "e717", - "unicode_decimal": 59159 - }, - { - "icon_id": "15838444", - "name": "close", - "font_class": "close", - "unicode": "e704", - "unicode_decimal": 59140 - }, - { - "icon_id": "15838450", - "name": "complete", - "font_class": "complete", - "unicode": "e718", - "unicode_decimal": 59160 - }, - { - "icon_id": "15838464", - "name": "download", - "font_class": "download", - "unicode": "e716", - "unicode_decimal": 59158 - }, - { - "icon_id": "15838514", - "name": "minus", - "font_class": "minus", - "unicode": "e701", - "unicode_decimal": 59137 - }, - { - "icon_id": "15838521", - "name": "picture", - "font_class": "picture", - "unicode": "e712", - "unicode_decimal": 59154 - }, - { - "icon_id": "15838525", - "name": "search", - "font_class": "search", - "unicode": "e711", - "unicode_decimal": 59153 - }, - { - "icon_id": "15838530", - "name": "select", - "font_class": "select", - "unicode": "e705", - "unicode_decimal": 59141 - }, - { - "icon_id": "15838532", - "name": "success", - "font_class": "success", - "unicode": "e706", - "unicode_decimal": 59142 - }, - { - "icon_id": "15838560", - "name": "add-bold", - "font_class": "add-bold", - "unicode": "e708", - "unicode_decimal": 59144 - }, - { - "icon_id": "15838561", - "name": "arrow-left-bold", - "font_class": "arrow-left-bold", - "unicode": "e70f", - "unicode_decimal": 59151 - }, - { - "icon_id": "15838562", - "name": "arrow-up-bold", - "font_class": "arrow-up-bold", - "unicode": "e70e", - "unicode_decimal": 59150 - }, - { - "icon_id": "15838563", - "name": "close-bold", - "font_class": "close-bold", - "unicode": "e70d", - "unicode_decimal": 59149 - }, - { - "icon_id": "15838564", - "name": "arrow-down-bold", - "font_class": "arrow-down-bold", - "unicode": "e70c", - "unicode_decimal": 59148 - }, - { - "icon_id": "15838565", - "name": "minus-bold", - "font_class": "minus-bold", - "unicode": "e709", - "unicode_decimal": 59145 - }, - { - "icon_id": "15838566", - "name": "arrow-right-bold", - "font_class": "arrow-right-bold", - "unicode": "e70b", - "unicode_decimal": 59147 - }, - { - "icon_id": "15838567", - "name": "select-bold", - "font_class": "select-bold", - "unicode": "e70a", - "unicode_decimal": 59146 - }, - { - "icon_id": "15838581", - "name": "arrow-up-fill", - "font_class": "arrow-up-fill", - "unicode": "e737", - "unicode_decimal": 59191 - }, - { - "icon_id": "15838582", - "name": "arrow-down-fill", - "font_class": "arrow-down-fill", - "unicode": "e736", - "unicode_decimal": 59190 - }, - { - "icon_id": "15838583", - "name": "arrow-left-fill", - "font_class": "arrow-left-fill", - "unicode": "e735", - "unicode_decimal": 59189 - }, - { - "icon_id": "15838584", - "name": "arrow-right-fill", - "font_class": "arrow-right-fill", - "unicode": "e734", - "unicode_decimal": 59188 - }, - { - "icon_id": "15838606", - "name": "user-fill", - "font_class": "user-fill", - "unicode": "e71b", - "unicode_decimal": 59163 - }, - { - "icon_id": "15838611", - "name": "success-fill", - "font_class": "success-filling", - "unicode": "e713", - "unicode_decimal": 59155 - }, - { - "icon_id": "15838618", - "name": "top-filling", - "font_class": "top-filling", - "unicode": "e715", - "unicode_decimal": 59157 - } - ] -} diff --git a/miniprogram/assets/fontV1/iconfont.less b/miniprogram/assets/fontV1/iconfont.less deleted file mode 100644 index 1dd341c..0000000 --- a/miniprogram/assets/fontV1/iconfont.less +++ /dev/null @@ -1,257 +0,0 @@ -/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */ -/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */ -@font-face { - font-family: "j-icon"; - /* Project id 4489595 */ - src: url('iconfont.woff2?t=1715597123285') format('woff2'), - url('iconfont.woff?t=1715597123285') format('woff'), - url('iconfont.ttf?t=1715597123285') format('truetype'); -} - -.j-icon { - font-family: 'j-icon' !important; - font-size: 16px; - font-style: normal; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.j-icon-error:before { - content: '\e73b'; -} - -.j-icon-more:before { - content: '\e73a'; -} - -.j-icon-scan:before { - content: '\e738'; -} - -.j-icon-fire:before { - content: '\e739'; -} - -.j-icon-arrow-down-circle:before { - content: '\e731'; -} - -.j-icon-map:before { - content: '\e732'; -} - -.j-icon-map-fill:before { - content: '\e733'; -} - -.j-icon-help-circle:before { - content: '\e72f'; -} - -.j-icon-warn-circle:before { - content: '\e730'; -} - -.j-icon-backspace:before { - content: '\e72d'; -} - -.j-icon-backspace-fill:before { - content: '\e72c'; -} - -.j-icon-eye-close:before { - content: '\e72e'; -} - -.j-icon-upload:before { - content: '\e722'; -} - -.j-icon-eye-disable:before { - content: '\e726'; -} - -.j-icon-record:before { - content: '\e725'; -} - -.j-icon-icon-test3:before { - content: '\e724'; -} - -.j-icon-icon-test5:before { - content: '\e723'; -} - -.j-icon-icon-test9:before { - content: '\e721'; -} - -.j-icon-editor-fill:before { - content: '\e72b'; -} - -.j-icon-share:before { - content: '\e729'; -} - -.j-icon-share-fill:before { - content: '\e728'; -} - -.j-icon-editor:before { - content: '\e72a'; -} - -.j-icon-wechat:before { - content: '\e727'; -} - -.j-icon-telephone:before { - content: '\e71c'; -} - -.j-icon-user:before { - content: '\e71a'; -} - -.j-icon-add:before { - content: '\e700'; -} - -.j-icon-add-circle:before { - content: '\e710'; -} - -.j-icon-arrow-up-circle:before { - content: '\e720'; -} - -.j-icon-arrow-right-circle:before { - content: '\e71f'; -} - -.j-icon-arrow-down:before { - content: '\e702'; -} - -.j-icon-ashbin:before { - content: '\e71d'; -} - -.j-icon-arrow-right:before { - content: '\e703'; -} - -.j-icon-eye:before { - content: '\e719'; -} - -.j-icon-bottom:before { - content: '\e707'; -} - -.j-icon-arrow-left-circle:before { - content: '\e71e'; -} - -.j-icon-attachment:before { - content: '\e714'; -} - -.j-icon-code:before { - content: '\e717'; -} - -.j-icon-close:before { - content: '\e704'; -} - -.j-icon-complete:before { - content: '\e718'; -} - -.j-icon-download:before { - content: '\e716'; -} - -.j-icon-minus:before { - content: '\e701'; -} - -.j-icon-picture:before { - content: '\e712'; -} - -.j-icon-search:before { - content: '\e711'; -} - -.j-icon-select:before { - content: '\e705'; -} - -.j-icon-success:before { - content: '\e706'; -} - -.j-icon-add-bold:before { - content: '\e708'; -} - -.j-icon-arrow-left-bold:before { - content: '\e70f'; -} - -.j-icon-arrow-up-bold:before { - content: '\e70e'; -} - -.j-icon-close-bold:before { - content: '\e70d'; -} - -.j-icon-arrow-down-bold:before { - content: '\e70c'; -} - -.j-icon-minus-bold:before { - content: '\e709'; -} - -.j-icon-arrow-right-bold:before { - content: '\e70b'; -} - -.j-icon-select-bold:before { - content: '\e70a'; -} - -.j-icon-arrow-up-fill:before { - content: '\e737'; -} - -.j-icon-arrow-down-fill:before { - content: '\e736'; -} - -.j-icon-arrow-left-fill:before { - content: '\e735'; -} - -.j-icon-arrow-right-fill:before { - content: '\e734'; -} - -.j-icon-user-fill:before { - content: '\e71b'; -} - -.j-icon-success-filling:before { - content: '\e713'; -} - -.j-icon-top-filling:before { - content: '\e715'; -} \ No newline at end of file diff --git a/miniprogram/assets/fontV1/iconfont.ttf b/miniprogram/assets/fontV1/iconfont.ttf deleted file mode 100644 index ec3b6de..0000000 Binary files a/miniprogram/assets/fontV1/iconfont.ttf and /dev/null differ diff --git a/miniprogram/assets/fontV1/iconfont.woff b/miniprogram/assets/fontV1/iconfont.woff deleted file mode 100644 index fbd56fc..0000000 Binary files a/miniprogram/assets/fontV1/iconfont.woff and /dev/null differ diff --git a/miniprogram/assets/fontV1/iconfont.woff2 b/miniprogram/assets/fontV1/iconfont.woff2 deleted file mode 100644 index add8128..0000000 Binary files a/miniprogram/assets/fontV1/iconfont.woff2 and /dev/null differ diff --git a/miniprogram/assets/font/demo.css b/miniprogram/assets/fonts/demo.css similarity index 100% rename from miniprogram/assets/font/demo.css rename to miniprogram/assets/fonts/demo.css diff --git a/miniprogram/assets/fonts/demo_index.html b/miniprogram/assets/fonts/demo_index.html new file mode 100644 index 0000000..41d5d2e --- /dev/null +++ b/miniprogram/assets/fonts/demo_index.html @@ -0,0 +1,395 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

+
+ + + 查看项目 + +
+
+
+
    + +
  • + +
    创作
    +
    &#xe72a;
    +
    • + +
  • + +
    close
    +
    &#xe704;
    +
    • + +
  • + +
    download
    +
    &#xe716;
    +
    • + +
  • + +
    error
    +
    &#xe73b;
    +
    • + +
  • + +
    close-bold
    +
    &#xe70d;
    +
    • + +
  • + +
    翻译_translate
    +
    &#xe73c;
    +
    • + +
  • + +
    icon-kfckfc
    +
    &#xe729;
    +
    • + +
  • + +
    Solid_Communication_Share-box
    +
    &#xe728;
    +
    • + +
  • + +
    icon-kfckfc
    +
    &#xe727;
    +
    • + +
+
+

Unicode 引用

+
+ +

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

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

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

+
+

Unicode 使用步骤如下：

+

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

+
@font-face {
+  font-family: 'iconfont';
+  src: 
+       url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
+       url('iconfont.ttf?t=1749287800675') format('truetype');
+}
+
+

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

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

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

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

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

+
+
+
+
+
    + +
  • + +
    + 创作 +
    +
    .icon-editor +
    +
    • + +
  • + +
    + close +
    +
    .icon-close +
    +
    • + +
  • + +
    + download +
    +
    .icon-download +
    +
    • + +
  • + +
    + error +
    +
    .icon-error +
    +
    • + +
  • + +
    + close-bold +
    +
    .icon-close-bold +
    +
    • + +
  • + +
    + 翻译_translate +
    +
    .icon-translate +
    +
    • + +
  • + +
    + icon-kfckfc +
    +
    .icon-share +
    +
    • + +
  • + +
    + Solid_Communication_Share-box +
    +
    .icon-share-fill +
    +
    • + +
  • + +
    + icon-kfckfc +
    +
    .icon-wechat +
    +
    • + +
+
+

font-class 引用

+
+ +

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

+

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

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

使用步骤如下：

+

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

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

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

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

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

+
+
+
+
+
    + +
  • + +
    创作
    +
    #icon-editor
    +
    • + +
  • + +
    close
    +
    #icon-close
    +
    • + +
  • + +
    download
    +
    #icon-download
    +
    • + +
  • + +
    error
    +
    #icon-error
    +
    • + +
  • + +
    close-bold
    +
    #icon-close-bold
    +
    • + +
  • + +
    翻译_translate
    +
    #icon-translate
    +
    • + +
  • + +
    icon-kfckfc
    +
    #icon-share
    +
    • + +
  • + +
    Solid_Communication_Share-box
    +
    #icon-share-fill
    +
    • + +
  • + +
    icon-kfckfc
    +
    #icon-wechat
    +
    • + +
+
+

Symbol 引用

+
+ +

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

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

使用步骤如下：

+

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

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

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

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

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

+
<svg class="icon" aria-hidden="true">
+  <use xlink:href="#icon-xxx"></use>
+</svg>
+
+
+
+ +
+
+ + + diff --git a/miniprogram/assets/fonts/iconfont.js b/miniprogram/assets/fonts/iconfont.js new file mode 100644 index 0000000..59dd424 --- /dev/null +++ b/miniprogram/assets/fonts/iconfont.js @@ -0,0 +1 @@ +window._iconfont_svg_string_4942823='',(e=>{var c=(t=(t=document.getElementsByTagName("script"))[t.length-1]).getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var l,o,a,i,n,s=function(c,t){t.parentNode.insertBefore(c,t)};if(c&&!e.__iconfont__svg__cssinject__){e.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(c){console&&console.log(c)}}l=function(){var c,t=document.createElement("div");t.innerHTML=e._iconfont_svg_string_4942823,(t=t.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",t=t,(c=document.body).firstChild?s(t,c.firstChild):c.appendChild(t))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(l,0):(o=function(){document.removeEventListener("DOMContentLoaded",o,!1),l()},document.addEventListener("DOMContentLoaded",o,!1)):document.attachEvent&&(a=l,i=e.document,n=!1,m(),i.onreadystatechange=function(){"complete"==i.readyState&&(i.onreadystatechange=null,d())})}function d(){n||(n=!0,a())}function m(){try{i.documentElement.doScroll("left")}catch(c){return void setTimeout(m,50)}d()}})(window); \ No newline at end of file diff --git a/miniprogram/assets/fonts/iconfont.json b/miniprogram/assets/fonts/iconfont.json new file mode 100644 index 0000000..b6c1bb6 --- /dev/null +++ b/miniprogram/assets/fonts/iconfont.json @@ -0,0 +1,72 @@ +{ + "id": "4942823", + "name": "涂鸦丫", + "font_family": "iconfont", + "css_prefix_text": "icon-", + "description": "", + "glyphs": [ + { + "icon_id": "11372647", + "name": "创作", + "font_class": "editor", + "unicode": "e72a", + "unicode_decimal": 59178 + }, + { + "icon_id": "15838444", + "name": "close", + "font_class": "close", + "unicode": "e704", + "unicode_decimal": 59140 + }, + { + "icon_id": "15838464", + "name": "download", + "font_class": "download", + "unicode": "e716", + "unicode_decimal": 59158 + }, + { + "icon_id": "15838473", + "name": "error", + "font_class": "error", + "unicode": "e73b", + "unicode_decimal": 59195 + }, + { + "icon_id": "15838563", + "name": "close-bold", + "font_class": "close-bold", + "unicode": "e70d", + "unicode_decimal": 59149 + }, + { + "icon_id": "36857448", + "name": "翻译_translate", + "font_class": "translate", + "unicode": "e73c", + "unicode_decimal": 59196 + }, + { + "icon_id": "39768492", + "name": "icon-kfckfc", + "font_class": "share", + "unicode": "e729", + "unicode_decimal": 59177 + }, + { + "icon_id": "39768493", + "name": "Solid_Communication_Share-box", + "font_class": "share-fill", + "unicode": "e728", + "unicode_decimal": 59176 + }, + { + "icon_id": "39768549", + "name": "icon-kfckfc", + "font_class": "wechat", + "unicode": "e727", + "unicode_decimal": 59175 + } + ] +} diff --git a/miniprogram/assets/fonts/iconfont.less b/miniprogram/assets/fonts/iconfont.less new file mode 100644 index 0000000..438522c --- /dev/null +++ b/miniprogram/assets/fonts/iconfont.less @@ -0,0 +1,51 @@ +@font-face { + font-family: 'j-icon'; /* Project id 4942823 */ + src: + url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAqcAAsAAAAAD4gAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAARAAAAGA9GUoMY21hcAAAAYgAAACPAAACAIUHyUJnbHlmAAACGAAABk8AAAhwTuOnYWhlYWQAAAhoAAAALwAAADYr8qvtaGhlYQAACJgAAAAcAAAAJAfeA4tobXR4AAAItAAAAA8AAAAoKAAAAGxvY2EAAAjEAAAAFgAAABYJxAdobWF4cAAACNwAAAAdAAAAIAEbAJpuYW1lAAAI/AAAAUAAAAJnEKM8sHBvc3QAAAo8AAAAYAAAAIKElINgeJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGFhYJzAwMrAwNTJdIaBgaEfQjO+ZjBi5ACKMrAyM2AFAWmuKQwHnrM8t2Fu+N/AwMB8hwFIMjCiKGICAGnHDKJ4nO2R0Q3CMAxEX5pQKGp/+OgKLRUbtFMwD+KLXW+MYscVU+DoRTrHVqQ74ARk42EUSB8SXm/rptrPXGu/8DTdc6GhqGjQqEXbvsOhJq2ufpVsOs7NVGN/ZTrbP9tLobWBln/19X4dqnM3A3MMDYHnpDHwvDQFdX4OzFl0D8xjtASeo9bAM9YW0H4B0B8kegB4nIWVTWwbxxWA583szP5wl0tyl7PijyhxSS1lUaTkFUVKFSkJiGMpkowUqCUjjeygbkujKtDCQNDkkAZyDcTowYBRn4wWQi5N0PZUJOi5hx7aNDm0iA0kRgID8c1wezDaQ1GzfbOyWgQoUHKw+968+XnzvTdviUbIvx6wt1mdpMgEmSYxIVOx9EWtGkad7gIEFRA6CBdEtAbdHqyCTNQeyg096HU7cxCF7NDxPOcpUU/6O1dmMnL01WrrTrYomnYZ3peD/q9HP8vppW+WPLhsV78euq6bmZ30ih42+rkb9AdqhlXTSrnbjXF4D5f4yein2eAVKXz4xi+qL4duC6cQIPhjO/RDUiLEhG4nCnUTPRB+YILwZdwzQcbdToO2wLP8gjV6PHpsFXwLvNEjK1cxwQPPrOQsOEQ79o8eQ97yitbokRrnoX302PQKFm5Dkc3f2Nv076RMOsglFONwTGYAuK/S5EI17iqNy3gt8caFrLLls43EKUVG8Kd7XOBBZyfoLydmvdG+UTHuqU2OvGL+yCx65gPPOeRC8ITjYaXVqqDUM827yngEv1fdo6Uj0yuaeHz06wP2G9YlPjlFzhICoS503EwGeP4uxqQRNSIWqmdH6bGy+GqMpxxMPJsAXeFag0DhmsOAdih5bXh5BX+Xh385EV779oXz8cJCfP7CByfCrFWwhlfQMWs4VESHQ8XzYGixxS9NTYR/3vvS3ESgtqWm4lmuDK1CzhgOjVzB+tYVs0yexXeP3vu/8e2DYxdCZ/Rk9MQJCzagpHTAf6IfHr9HT/73uGfxfYi5H5LvkasY3wZrq9TGhEZyitsaLMTdxU4TFKA2pGECaugJBh2HqUFRrROlIUjIB0IBrqEqF5Io9FSnXAEXkybvo6jWOzYuSj+a6gXsaO4Nbaygbzr11vRyw+5M5wPopf3wQ8Ykk0WbyY/Svp+G3dbZbLXkZgTksdN2/fJk1KpNFpkjhBgzNXC///zs6tz8KZEtzmmWbo/p0UeRsmQpHf118wXnAKRlGNa7TsbLjxedzoXTW9TLFHRDX7dtETjruQn3Nm4Sl6ddx9alw8en6qfr42WZddGc42CsLVWrBT/b/y41qJVlesp56aWsJsY0qr35zjvkOC/vsj8yiXXkZfIDJNqGxd4qXYE1WKUIYAKkj5VETyNMpIwNOaZhSvXootHGzOytYiYGMaLqIl49TXURVGggcRkk2okU46lVDEQF8jLI4zgMQ14t0IQwDXAu5VD64vWdWY2B7QfWjUueEN6lG5bM28AYFc//sBbxPPyDGaLf/OTTmQEvFvlg5uZtrgNFL+7cam62VV97s/ngQXOjLSxq8fwYH03P3zo3abtUO9gRYueAUcg528uXVz9nudR3zl3bPjud8iwQF35UNnyzdH1PgJWzG7NNSK32z1jm+lc2Z/q8UOD9mc/uN/s8w3VeExag0NpoPvyiudHSikUN5f1LnHPp8/ODZVujWXsQs+0DwzjYZvFpJ7d4kTzL3bvst8zBCrCPpP0KqHxVZBCzHxyrSXVuqMxV2GsISOdJRZAKGVXMqWKObHGGikUtSmKBmmKOi8C6kdU5i+rXNzOgMSZKzlsXPU3zLr6lZ10TGGXdrTe3KXW5V+TISrQ3FLj/QLx1RyRk+e2bJ7A//aTZF8ZItzWN8TPr6yk2N98QwjGMvcOSSPPStT0N9LTZKC2+8MbWjs4zRSRyaf+/iL54iDKSA0vUkGOG95v3PzvBu4l89KSO/Ir+iSySVbJBXiGvk2vkJiFeB4+1EKvziZrQkyJZC/HQyRUdV9kn8fR5vNO1sKELrPU4oherSqSu/onAO8g1TMpuBdfr4fUe4Aey24iT2WgYx9TEghDiuA4aAl+oT2osUaiFbbwRFdidmf7xi2tXd33KWU4KVlpZO3dmubt+KkotGXo4xTQBbK75NUfOBIU/ZIJgUso/Z6ScDAK4Xw9fvfFqtY6v56KpM46s5/JPe3OznepE6pRuVMOldmthodU2/LKP7ed+2soZmut7Nnx8dmX5ueZOzHTgvBfWy8X9TnOnbDi1DKUWYJhlQO2AZ9NLtfb8boDbnbRHg3h+ebF9+nV8WZ6WdVqVMPo4yG81w0FgpGWKUhO13a18cDXtebh1Ou2lPN/VjCxG5N/hQVtJAHicY2BkYGAAYuZQK794fpuvDNwsDCDwJHPzDwT9/xQLA7MZkMvBwAQSBQAZtwqRAHicY2BkYGBu+N/AEMPCAAJAkpEBFXABAEcQAnN4nGNhYGBgIQIDAAOYACkAAAAAAABYAI4A2gFIAX4CJgLcA2wEOAAAeJxjYGRgYOBi6GNgZwABJjCPC0j+B/MZABfXAbYAAAB4nIWRPW7CQBCFn8GQBJQoSqQ0aVYpKBLJ/JRIqVCgp6AHs+ZHttdaL0jUOU2OkBPkCOloc4pIedhDA0W82tlv3r6ZHckA7rCHh/K75y7ZwyWzkiu4wKNwlfqTsE9+Fq6hiZ5wnfqrcAMveBNusmPGDp5/xayFd2EPt/gQruAGn8JV6l/CPvlbuIYH/AjXqf8KNzDxroWbaHnhwOqp03M126lVaNLIpO54jvViE0/tqTzRNl+ZVHWDzlEa6VTbY5t8u+g5F6nImkQNeavj2KjMmrUOXbB0Luu325HoQWgSDGChMYVjnENhhh3jCiEMUkRFdGf5mO4FNohZaf91T+i2yKkfcoUuAnTOXCO60sJ5Ok2OLV/rUXV0K27LmoQ0lFrNSWKy4g883K2phNQDLIuqDH20uaITf1DMkPwB2JNvV3icbchBCoQwDEbh/Go7NXMWDxVtBoVgIC14/QHd+i3e4tFAD6Z3jAEjJiRkfFAwg/GlrPXoHmkzb1qqX6e51KQRHnzPZXWrcw85m0nX1HYJ5bvL7zDLl267dKI/JCwa6Q==') + format('woff'), + url('iconfont.ttf?t=1749287800675') format('truetype'); +} + +.j-icon { + font-family: 'j-icon' !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.j-icon-editor:before { + content: '\e72a'; +} + +.j-icon-close:before { + content: '\e704'; +} + +.j-icon-download:before { + content: '\e716'; +} + +.j-icon-error:before { + content: '\e73b'; +} + +.j-icon-close-bold:before { + content: '\e70d'; +} + +.j-icon-translate:before { + content: '\e73c'; +} + +.j-icon-share:before { + content: '\e729'; +} + +.j-icon-share-fill:before { + content: '\e728'; +} + +.j-icon-wechat:before { + content: '\e727'; +} diff --git a/miniprogram/assets/fonts/iconfont.ttf b/miniprogram/assets/fonts/iconfont.ttf new file mode 100644 index 0000000..f50027b Binary files /dev/null and b/miniprogram/assets/fonts/iconfont.ttf differ diff --git a/miniprogram/assets/fonts/iconfont.woff b/miniprogram/assets/fonts/iconfont.woff new file mode 100644 index 0000000..371f79b Binary files /dev/null and b/miniprogram/assets/fonts/iconfont.woff differ diff --git a/miniprogram/components/word-card/word-card.ts b/miniprogram/components/word-card/word-card.ts index 0dfbf9e..f2b0fdd 100644 --- a/miniprogram/components/word-card/word-card.ts +++ b/miniprogram/components/word-card/word-card.ts @@ -37,5 +37,10 @@ Component({ const { key, word } = this.data; this.triggerEvent('onDelete', { key, word }); }, + + onClickColor() { + const { key, word, color } = this.data; + this.triggerEvent('onClickColor', { key, word, color }); + }, }, }); diff --git a/miniprogram/components/word-card/word-card.wxml b/miniprogram/components/word-card/word-card.wxml index 1bea49f..a4b2d54 100644 --- a/miniprogram/components/word-card/word-card.wxml +++ b/miniprogram/components/word-card/word-card.wxml @@ -1,11 +1,14 @@ - + {{word}} diff --git a/miniprogram/pages/index/index.json b/miniprogram/pages/index/index.json index 15b733f..d88c0a7 100644 --- a/miniprogram/pages/index/index.json +++ b/miniprogram/pages/index/index.json @@ -6,7 +6,9 @@ "enablePullDownRefresh": false, "usingComponents": { "van-icon": "@vant/weapp/icon/index", + "van-popup": "@vant/weapp/popup/index", "word-input": "../../components/word-input/word-input", - "word-card": "../../components/word-card/word-card" + "word-card": "../../components/word-card/word-card", + "icon": "../../ui/icon/icon" } } diff --git a/miniprogram/pages/index/index.ts b/miniprogram/pages/index/index.ts index 38bb858..85bf8f0 100644 --- a/miniprogram/pages/index/index.ts +++ b/miniprogram/pages/index/index.ts @@ -10,6 +10,7 @@ Page({ data: { cardList: [] as Array<{ color: string; word: string }>, + showPopup: false, }, onReady() { @@ -30,37 +31,6 @@ Page({ .exec(); }, - // renderCanvas() { - // // wx.nextTick(() => { - // // this.setCanvasBoxSize(); - // // }); - // console.log('this.boxWidth:', this.boxWidth); - // console.log('this.boxHeight:', this.boxHeight); - // if (this.boxWidth && this.boxHeight) { - // this.initCanvas(this.boxWidth, this.boxHeight); - // } - // }, - - // setCanvasBoxSize() { - // const { windowWidth } = wx.getWindowInfo(); - // console.log('windowWidth---:', windowWidth); - // const query = wx.createSelectorQuery(); - // query - // .select('#canvasWrapper') - // .boundingClientRect((rect) => { - // if (rect) { - // const boxWidth = rect.width; - // const boxHeight = boxWidth / (width / height); - - // console.log('boxWidth----:', boxWidth); - // console.log('boxHeight----:', boxHeight); - - // this.initCanvas(boxHeight, boxWidth); - // } - // }) - // .exec(); - // }, - initCanvas(boxWidth: number, boxHeight: number) { wx.createSelectorQuery() .select('#canvasContent') @@ -150,4 +120,14 @@ Page({ return; } }, + + onClickColor(e: WechatMiniprogram.CustomEvent) { + const { key, word, color } = e.detail; + console.log('onClickColor key:', key, 'word:', word, 'color:', color); + this.setData({ showPopup: true }); + }, + + onClosePopup() { + this.setData({ showPopup: false }); + }, }); diff --git a/miniprogram/pages/index/index.wxml b/miniprogram/pages/index/index.wxml index 7cfb3a1..e836bab 100644 --- a/miniprogram/pages/index/index.wxml +++ b/miniprogram/pages/index/index.wxml @@ -12,12 +12,14 @@ key="{{index}}" word="{{item.word}}" color="{{item.color}}" + bind:onClickColor="onClickColor" bind:onDelete="deleteWordCard" /> @@ -36,10 +38,14 @@ + + 内容Joey + + 下载打印 diff --git a/miniprogram/style/theme.less b/miniprogram/style/theme.less index 7f98275..fa46a28 100644 --- a/miniprogram/style/theme.less +++ b/miniprogram/style/theme.less @@ -38,4 +38,4 @@ // @btn-border-radius: 12rpx; // // icon -// @font-size-icon: 40rpx; \ No newline at end of file +@font-size-icon: 40rpx; diff --git a/miniprogram/ui/icon/icon.less b/miniprogram/ui/icon/icon.less index 5f607cc..fe0bf21 100644 --- a/miniprogram/ui/icon/icon.less +++ b/miniprogram/ui/icon/icon.less @@ -1,5 +1,5 @@ @import '../../style/theme.less'; -@import '../../assets/font/iconfont.less'; +@import '../../assets/fonts/iconfont.less'; .icon { margin: 0;