图标组件 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>
1
本地图标是完全由原生svg渲染,所以可以通过css的方式来修改图标的样式,比如颜色、大小等。
vue
<jb-icon local-icon="avatar" class="text-30px" ></jb-icon>
<jb-icon local-icon="avatar" class="text-30px" ></jb-icon>
1