图标模块

在CabloyJS中，任何业务模块都可以提供SVG图标。当然为了让业务逻辑更加内聚，我们可以单独创建一个模块专门管理图标集。为了方便开发，CabloyJS提供了一个模块模版module-icon。比如，我们要创建一个图标模块demo-myicon，如下：

  1. 1$ cd /path/to/project
  2. 2$ npm run cli :create:module demo-myicon -- --template=module-icon

添加SVG图标

这里，仍然以模块test-party为例，说明如何添加SVG图标

1. 制作图标、查找图标

我们可以自行制作SVG图标，也可以直接从线上图标库中检索所需图标

2. 创建图标文件

将准备好的图标文件放置到模块的图标目录，如：test-party/icons/src/default/birthday.svg

  • icons/src：约定的图标目录

  • default：默认的图标分组，一个目录代表一个图标分组。可以在一个模块中创建多个分组

  • birthday.svg：SVG图标文件

构建SVG图标

按照以上步骤添加的SVG图标不能直接使用。还需要把这些SVG图标按分组打包，将每个分组内所有的图标打包成一个xml文件。这样就兼顾了文件体积和下载速度两方面的性能考量

构建SVG图标也非常简单，只需如下操作即可：

  1. 1$ cd /path/to/project
  2. 2$ npm run cli :tools:icons test-party

使用SVG图标

接下来，我们就可以在任何一个业务模块的前端代码中使用图标了。由于birthday图标是模块test-party提供的，并且位于default分组中，那么，引用这个图标的名称应该是这样：

全称 简称
test-party:default:birthday test-party::birthday 
  1. 1<f7-icon f7="test-party::birthday"></f7-icon>