更新记录

1.0.0(2024-02-17)

  1. 剥离图鸟框架,可通过 uni_modules 进行导入 节省开发成本
  2. 方便其余图鸟组件进行使用

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 app-vue
钉钉小程序 快手小程序 飞书小程序 京东小程序
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

使用说明

使用方法:

<template>
    <view class="content">
        <view class="icon">
          <view class="title">
            基础使用:
          </view>
      <view class="data">
        <tn-icon icon="logo-tuniao"></tn-icon>
      </view>
        </view>
    <view class="icon">
      <view class="title">
        加粗使用:
      </view>
      <view class="data">
        <tn-icon icon="logo-tuniao" bold></tn-icon>
      </view>
    </view>
    <view class="icon">
      <view class="title">
        使用公共类:
      </view>
      <view class="data">
        <tn-icon icon="logo-tuniao" class-name="tuniao-color"></tn-icon>
      </view>
    </view>
    <view class="icon">
      <view class="title">
        显示图片:
      </view>
      <view class="data">
        <tn-icon icon="/static/logo108.png"></tn-icon>
      </view>
    </view>
    <view class="icon">
      <view class="title">
        默认尺寸:
      </view>
      <view class="data">
        <tn-icon icon="logo-tuniao" size="sm"></tn-icon>
        <tn-icon icon="logo-tuniao"></tn-icon>
        <tn-icon icon="logo-tuniao" size="lg"></tn-icon>
        <tn-icon icon="logo-tuniao" size="xl"></tn-icon>
        <tn-icon icon="logo-tuniao" size="80"></tn-icon>
      </view>
    </view>
    <view class="icon">
      <view class="title">
        默认尺寸:
      </view>
      <view class="data">
        <tn-icon icon="/static/logo108.png" size="sm"></tn-icon>
        <tn-icon icon="/static/logo108.png"></tn-icon>
        <tn-icon icon="/static/logo108.png" size="lg"></tn-icon>
        <tn-icon icon="/static/logo108.png" size="xl"></tn-icon>
        <tn-icon icon="/static/logo108.png" size="80"></tn-icon>
      </view>
    </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {

            }
        },
        onLoad() {

        },
        methods: {

        }
    }
</script>

<style lang="scss" scoped>
    .content {
    position: relative;
    padding: 30rpx;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    .icon {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      .data {
        margin-left: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .icon + .icon {
      margin-top: 20rpx;
    }
  }
</style>

参数说明:

参数 说明 类型 默认值 可选值
icon 图标名称,可以传入图片地址(支持jpg、jpeg、png, gif) String - -
size 图标大小;如果是图标,可填写数字/字符串 数字默认单位rpx;如果是图片类型的图片则定义宽高(内置sm、lg、xl) String sm sm/lg/xl/200/200px
bold 是否加粗图标 Boolean false true
imgMode 图片模式mode,当图片为图片时生效。图片裁剪、缩放的模式 参考uniapp img mode(https://uniapp.dcloud.net.cn/component/image.html#image) String scaleToFill
top 垂直方向的偏移量,单位rpx String - -
className 公共class名称 String - -
color 图标颜色 String - -

图标预览

问题反馈/提出建议

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问