Press UI

# IconPlus 图标

# 引入

import PressIconPlus from 'press-ui/press-icon-plus/press-icon-plus';

export default {
  components: {
    PressIconPlus,
  }
}

# 代码演示

# 基础用法

Icon的name属性支持传入图标名称或图片链接。

<press-icon-plus name="close" />
<press-icon-plus name="https://mike-1255355338.cos.ap-guangzhou.myqcloud.com/article/2023/5/own_mike_ce77489af93cb34c4b.png" />

# 提示信息

设置dot属性后，会在图标右上角展示一个小红点。设置info属性后，会在图标右上角展示相应的徽标。

<press-icon-plus name="chat" dot />
<press-icon-plus name="chat" info="9" />
<press-icon-plus name="chat" info="99+" />

# 图标颜色

设置color属性来控制图标颜色。

<press-icon-plus name="chat" color="red" />

# 图标大小

设置size属性来控制图标大小。

<press-icon-plus name="chat" size="50px" />

# 自定义图标

如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。例如，可以在 app.wxss 文件中引入。

/* 引入第三方或自定义的字体图标样式 */
@font-face {
  font-family: 'my-icon';
  src: url('./my-icon.ttf') format('truetype');
}

.my-icon {
  font-family: 'my-icon';
}

.my-icon-extra::before {
  content: '\e626';
}

<!-- 通过 class-prefix 指定类名为 my-icon -->
<press-icon-plus class-prefix="my-icon" name="extra" />

# API

# Props

参数 说明 类型 默认值
name 图标名称或图片链接 string -
dot 是否显示图标右上角小红点 boolean false
info 图标右上角文字提示 string | number -
color 图标颜色 string inherit
size 图标大小，如 20px，2em，默认单位为px string | number inherit
custom-style 自定义样式 string -
class-prefix 类名前缀 string press-icon-plus

# Events

事件名 说明 参数
click 点击图标时触发 -

# 在线调试

# 常见问题

# 开发者工具上提示 Failed to load font 是什么情况？

这个是开发者工具本身的问题，可以忽略，具体可以查看微信小程序文档 (opens new window) - 注意事项第 4 条。

横屏

← Image →