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/[email protected]/favicon.ico"></pk-icon>
    <pk-icon name="https://at.douyeblog.top/anydoor/www/[email protected]/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