介绍
对于一个大型系统而言,无论框架内置多少图标都是不够用的。为此,CabloyJS提供了一个图标引擎。通过这个图标引擎,我们不仅可以引用内置的图标,同时也可以非常方便的添加自定义图标
旧方案分析
CabloyJS前端采用的是Framework7组件库。Framework7组件库支持两种风格的图标:F7图标
、Material图标
,比如:
- 1<!-- F7 Icons font icon -->
- 2<f7-icon f7="house"></f7-icon>
- 3<!-- Material Icons font icon -->
- 4<f7-icon material="home"></f7-icon>
- Framework7的原始方案,参见:Icon Vue Component
这些图标有一个缺点:就是在打开页面时,如果图标文件还没有下载完毕,就会显示图标对应的名称。当图标加载完毕,这些图标名称才会转换为真正的图标。因此,用户体验非常突兀
新方案分析
为了解决以上缺陷,CabloyJS提供了基于SVG的图标引擎。首先,Framework7的material图标
方案保持不变。然后,把Framework7的f7图标
进行了变更
我们知道CabloyJS架构的核心就是模块化体系
。为了适应大型项目的需求,图标也可以通过业务模块来提供。这样,我们就可以通过安装业务模块来动态添加图标,从而满足大型项目的动态需求
图标命名规范
由于图标由业务模块提供,为了进一步规范管理,在业务模块内部还将提供的图标进行分组。因此,图标命名规范如下:
- 1moduleName:groupName:iconName
比如,模块a-iconbooster
提供了一个分组default
,分组default
提供了一个add
图标,那么,完整的图标命名就是:a-iconbooster:default:add
特殊约定:
为了简化图标的使用,特别做了如下约定:
-
如果模块名称是
a-iconbooster
,则可以不输入 -
如果分组名称是
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 <f7-block strong>
- 2 <f7-chip text="Add Contact" media-bg-color="blue">
- 3 <f7-icon slot="media" f7="::add"></f7-icon>
- 4 </f7-chip>
- 5 <f7-chip text="London" media-bg-color="green">
- 6 <f7-icon slot="media" f7="::location-on"></f7-icon>
- 7 </f7-chip>
- 8 <f7-chip text="John Doe" media-bg-color="red">
- 9 <f7-icon slot="media" f7="::person"></f7-icon>
- 10 </f7-chip>
- 11 </f7-block>
- f7-link
src/suite-vendor/test-party/modules/test-party/front/src/kitchen-sink/pages/framework7/cards-expandable.vue
- 1 <f7-link
- 2 card-close
- 3 color="white"
- 4 class="card-opened-fade-in"
- 5 :style="{ position: 'absolute', right: '15px', top: '15px' }"
- 6 icon-f7="::close"
- 7 ></f7-link>
- 菜单图标
src/suite-vendor/test-party/modules/test-party/backend/src/config/static/resources.js
- 1// menu
- 2 {
- 3 atomName: 'Create Party',
- 4 atomStaticKey: 'createParty',
- 5 ...
- 6 resourceIcon: '::add',
- 7 appKey: 'test-party:appParty',
- 8 ...
- 9 },
查询图标
CabloyJS提供了一个管理页面,可以方便的查询当前系统一共有多少SVG图标,并且可以方便的进行复制
,从而应用于代码之中
评论: