Icon
For a large system, no matter how many icons are built into the framework, it is not enough. For this purpose, Zova provides an icon engine
Advantages
Easy to maintain
: icons can be added very convenientlyExcellent performance
: Taking into account bothfile size
anddownload speed
performance considerations. No matter how many icons are used in the system, the best balance is always maintainedAsynchronous loading
: All icons are loaded asynchronously on demand, using grouped files as the loading unitUI library independent
: no matter which UI library is used, the same icon engine is used
Basic principles
Icon group
: Combine several SVG icons into one group. Each group represents anasynchronously loaded
icon fileIcon module
: An icon module can contain multiple groups, and a system can create multiple icon modules
Icon naming convention
For ease of use, it is necessary to develop a unified icon naming convention:
{moduleName}:{groupName}:{iconName}
For example, Zova provides an icon module home-icon
, which has a group default
and an icon add
in the group. Then, the full name of this icon is: home-icon:default:add
Special conventions
In order to further simplify the use of icons, the following conventions have been made:
- Can be omitted if module name is
home-icon
- Can be omitted if group name is
default
Examples are as follows:
Full name | Short name |
---|---|
home-icon:default:add | ::add |
home-icon:auth:github | :auth:github |
test-othericon:default:icon | test-othericon::icon |
icon function
The typed icon name can be obtained through icon
function in any bean instance, thus supporting auto-completion
iconh function
The vnode
object of icon can be directly generated in any bean instance through iconh
function
Use Icon
The icon engine provides a unified interface that can be used directly in any UI library
1. antdv
import { Button } from 'ant-design-vue';
<Button icon={iconh('::add')}></Button>
2. element-plus
import { ElButton } from 'element-plus';
<ElButton icon={icon('::add')}></ElButton>
3. quasar
import { QBtn } from 'quasar';
<QBtn icon={icon('::add')}></QBtn>;
4. vuetify
import { VBtn } from 'vuetify/components';
<VBtn icon={icon('::add')}></VBtn>;
Create Icon
1. Prepare icon
Place the SVG icon into the icon module's group directory. For example, the default
group of module home-icon
has the group directory path: src/suite/a-home/modules/home-icon/icons
2. Build icon
Executing the build through the cli command will automatically group the SVG icons into icon files
$ zova :tools:icons home-icon
Create Icon Module
In addition to the module home-icon
, you can also create several new icon modules and add icons to them
Icon modules can be created through the cli command:
$ zova :create:module test-icon --template=icon --suite=a-demo