图标组件 svg-icon
图标组件支持以下功能：
- 显示本地
assets/svg-icon文件夹下的svg图标 - 显示iconify中的图标
Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| localIcon | string | undefined | 要显示的本地assets/svg-icon文件夹下的svg图标的文件名 |
| 以下属性只针对iconify图标有效 | |||
| icon | string | undefined | 图标名，常用的图标建议定义为常量，在src/constants/icons.ts中定义了内置页面常用的一些图标。 |
| inline | boolean | false | 影响垂直对齐 |
| width | string | number | undefined | 图标宽度 |
| height | string | number | undefined | 图标高度 |
| horizontalFlip | boolean | false | 水平翻转 |
| verticalFlip | boolean | false | 垂直翻转 |
| rotate | string | number | undefined | 旋转 |
| color | string | undefined | 颜色 |
示例代码
vue
<jb-icon icon="ph:user-fill" color="red"></jb-icon><jb-icon icon="ph:user-fill" color="red"></jb-icon>本地图标是完全由原生svg渲染，所以可以通过css的方式来修改图标的样式，比如颜色、大小等。
vue
<jb-icon local-icon="avatar" class="text-30px" ></jb-icon><jb-icon local-icon="avatar" class="text-30px" ></jb-icon>