介绍

对于一个大型系统而言,无论框架内置多少图标都是不够用的。为此,CabloyJS提供了一个图标引擎。通过这个图标引擎,我们不仅可以引用内置的图标,同时也可以非常方便的添加自定义图标

旧方案分析

CabloyJS前端采用的是Framework7组件库。Framework7组件库支持两种风格的图标:F7图标Material图标,比如:

  1. 1<!-- F7 Icons font icon -->
  2. 2<f7-icon f7="house"></f7-icon>
  3. 3<!-- Material Icons font icon -->
  4. 4<f7-icon material="home"></f7-icon>

这些图标有一个缺点:就是在打开页面时,如果图标文件还没有下载完毕,就会显示图标对应的名称。当图标加载完毕,这些图标名称才会转换为真正的图标。因此,用户体验非常突兀

新方案分析

为了解决以上缺陷,CabloyJS提供了基于SVG的图标引擎。首先,Framework7的material图标方案保持不变。然后,把Framework7的f7图标进行了变更

我们知道CabloyJS架构的核心就是模块化体系。为了适应大型项目的需求,图标也可以通过业务模块来提供。这样,我们就可以通过安装业务模块来动态添加图标,从而满足大型项目的动态需求

图标命名规范

由于图标由业务模块提供,为了进一步规范管理,在业务模块内部还将提供的图标进行分组。因此,图标命名规范如下:

  1. 1moduleName:groupName:iconName

比如,模块a-iconbooster提供了一个分组default,分组default提供了一个add 图标,那么,完整的图标命名就是:a-iconbooster:default:add

  • 特殊约定:为了简化图标的使用,特别做了如下约定:
  1. 如果模块名称是a-iconbooster,则可以不输入

  2. 如果分组名称是default,则可以不输入

举例如下:

全称 简称
a-iconbooster:default:add ::add
a-iconbooster:auth:github :auth:github
test-party:default:birthday test-party::birthday

新方案使用方式

  • f7-icon

src/suite/test-party/modules/test-party/front/src/kitchen-sink/pages/framework7/chips.vue

  1. 1 <f7-block strong>
  2. 2 <f7-chip text="Add Contact" media-bg-color="blue">
  3. 3 <f7-icon slot="media" f7="::add"></f7-icon>
  4. 4 </f7-chip>
  5. 5 <f7-chip text="London" media-bg-color="green">
  6. 6 <f7-icon slot="media" f7="::location-on"></f7-icon>
  7. 7 </f7-chip>
  8. 8 <f7-chip text="John Doe" media-bg-color="red">
  9. 9 <f7-icon slot="media" f7="::person"></f7-icon>
  10. 10 </f7-chip>
  11. 11 </f7-block>
  • f7-link

src/suite/test-party/modules/test-party/front/src/kitchen-sink/pages/framework7/cards-expandable.vue

  1. 1 <f7-link
  2. 2 card-close
  3. 3 color="white"
  4. 4 class="card-opened-fade-in"
  5. 5 :style="{ position: 'absolute', right: '15px', top: '15px' }"
  6. 6 icon-f7="::close"
  7. 7 ></f7-link>
  • 菜单图标

src/suite/test-party/modules/test-party/backend/src/config/static/resources.js

  1. 1// menu
  2. 2 {
  3. 3 atomName: 'Create Party',
  4. 4 atomStaticKey: 'createParty',
  5. 5 ...
  6. 6 resourceIcon: '::add',
  7. 7 appKey: 'test-party:appParty',
  8. 8 ...
  9. 9 },

查询图标

CabloyJS提供了一个管理页面,可以方便的查询当前系统一共有多少SVG图标,并且可以方便的进行复制,从而应用于代码之中