Icon 图标
介绍
pumpkin-ui组件库的图标来自于ant-design-icons。字体图标转换可查看yranky/ant-design-icons。
感谢ant-design-icons开源图标库和svgtofont。
基本使用
<pk-icon></pk-icon>
代码示例
基础用法
创建一条分割线。
template
<pk-icon name="mail-outlined"></pk-icon>
script
import { PkIcon } from "@pumpkin-ui/mobile"
style
自定义颜色和大小
通过设置color和size属性来改变图标的颜色和大小。默认情况下，color和size分别继承于父节点的color和font-size样式。
template
<pk-icon name="mail-outlined" color="red" :size="50"></pk-icon>
script
import { PkIcon } from "@pumpkin-ui/mobile"
style
使用url图片
name属性传递url即可使用url图片。同时可通过size设置图片的大小，如果您的图片不是正方形，可通过height设置高度(这时候size是宽度)。
注意
您可能需要根据图片大小手动设置size和height。
template
<pk-icon name="https://at.douyeblog.top/anydoor/www/anydoor_www@2.2.0/favicon.ico"></pk-icon>
<pk-icon name="https://at.douyeblog.top/anydoor/www/anydoor_www@2.2.0/favicon.ico" :size="12"></pk-icon>
script
import { PkIcon } from "@pumpkin-ui/mobile"
style
API
Props
| 属性名 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| name | 图标类名或图标url地址 | string | ||
| class-prefix | 用于自定义图标库，自定义类名 | string | ||
| size | 图标的大小，单位为px | number | ||
| height | 当图标为url地址时，自定义高度，单位为px | number | ||
| color | 自定义图标颜色 | string |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click | 点击事件 | (e:MouseEvent)=>void |
Slots
| 插槽名 | 说明 |
|---|
Exposes
| 名称 | 说明 | 类型说明 |
|---|
样式变量
| 名称 | 默认值 | 说明 |
|---|---|---|
| --pk-icon-size | inherit | |
| --pk-icon-color | inherit |