介绍

对于一个大型系统而言，无论框架内置多少图标都是不够用的。为此，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-vendor/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-vendor/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-vendor/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图标，并且可以方便的进行复制，从而应用于代码之中