Tuniao UI Uniapp V3

Appearance

12:13

图鸟 UI vue3 uniapp 插件 - 酷炫图标 ​

该组件一般用于展示图标用作丰富内容的场景

仓库地址 ​

Github

npmjs

组件安装 ​

bash
npm i tnuiv3p-tn-cool-icon
npm i tnuiv3p-tn-cool-icon
bash
pnpm add tnuiv3p-tn-cool-icon
pnpm add tnuiv3p-tn-cool-icon
bash
yarn i tnuiv3p-tn-cool-icon
yarn i tnuiv3p-tn-cool-icon

组件位置 ​

typescript
import TnCoolIcon from 'tnuiv3p-tn-cool-icon/index.vue'
import TnCoolIcon from 'tnuiv3p-tn-cool-icon/index.vue'

平台差异说明 ​

App(vue)H5微信小程序支付宝小程序...
√√√√适配中

基础使用 ​

  • 通过name传入图标的名称
vue
<template>
  <TnCoolIcon name="logo-tuniao" />
</template>
<template>
  <TnCoolIcon name="logo-tuniao" />
</template>

修改显示图标背景样式 ​

  • 通过type设置图标背景模式
  • 通过color可以设置图标的颜色，如果是以gradient开头的颜色，可以设置渐变色
  • 通过bg-color可以设置背景颜色

在不同的模式下，color和bg-color的作用不同

新拟态 - mimic (默认) ​

  • 将type设置为mimic可以将图标设置为新拟态风格，在该模式下只有color的设置生效，bg-color不生效
vue
<template>
  <TnCoolIcon name="logo-tuniao" type="mimic" color="tn-red" />
</template>
<template>
  <TnCoolIcon name="logo-tuniao" type="mimic" color="tn-red" />
</template>
vue
<template>
  <TnCoolIcon name="logo-tuniao" type="mimic" color="gradient__cool-5" />
</template>
<template>
  <TnCoolIcon name="logo-tuniao" type="mimic" color="gradient__cool-5" />
</template>

圆形 - circle ​

  • 将type设置为circle可以将图标设置为圆形风格，在该模式下color和bg-color都生效
vue
<template>
  <TnCoolIcon
    name="logo-tuniao"
    type="circle"
    bg-color="tn-indigo"
    color="tn-white"
  />
</template>
<template>
  <TnCoolIcon
    name="logo-tuniao"
    type="circle"
    bg-color="tn-indigo"
    color="tn-white"
  />
</template>
vue
<template>
  <TnCoolIcon
    name="logo-tuniao"
    type="circle"
    bg-color="gradient__cool-1"
    color="tn-white"
  />
</template>
<template>
  <TnCoolIcon
    name="logo-tuniao"
    type="circle"
    bg-color="gradient__cool-1"
    color="tn-white"
  />
</template>

椭圆 - oval ​

  • 将type设置为oval可以将图标设置为椭圆风格，在该模式下color和bg-color都生效
vue
<template>
  <TnCoolIcon
    name="logo-tuniao"
    type="oval"
    bg-color="tn-indigo"
    color="tn-white"
  />
</template>
<template>
  <TnCoolIcon
    name="logo-tuniao"
    type="oval"
    bg-color="tn-indigo"
    color="tn-white"
  />
</template>
vue
<template>
  <TnCoolIcon
    name="logo-tuniao"
    type="oval"
    bg-color="gradient__cool-1"
    color="tn-white"
  />
</template>
<template>
  <TnCoolIcon
    name="logo-tuniao"
    type="oval"
    bg-color="gradient__cool-1"
    color="tn-white"
  />
</template>

方形 - square ​

  • 将type设置为square可以将图标设置为方形风格，在该模式下color和bg-color都生效
vue
<template>
  <TnCoolIcon
    name="logo-tuniao"
    type="square"
    bg-color="tn-indigo"
    color="tn-white"
  />
</template>
<template>
  <TnCoolIcon
    name="logo-tuniao"
    type="square"
    bg-color="tn-indigo"
    color="tn-white"
  />
</template>
vue
<template>
  <TnCoolIcon
    name="logo-tuniao"
    type="square"
    bg-color="gradient__cool-1"
    color="tn-white"
  />
</template>
<template>
  <TnCoolIcon
    name="logo-tuniao"
    type="square"
    bg-color="gradient__cool-1"
    color="tn-white"
  />
</template>

三角形 - triangle ​

  • 将type设置为triangle可以将图标设置为三角形风格，在该模式下color和bg-color都生效
vue
<template>
  <TnCoolIcon
    name="logo-tuniao"
    type="triangle"
    bg-color="tn-indigo"
    color="tn-white"
  />
</template>
<template>
  <TnCoolIcon
    name="logo-tuniao"
    type="triangle"
    bg-color="tn-indigo"
    color="tn-white"
  />
</template>
vue
<template>
  <TnCoolIcon
    name="logo-tuniao"
    type="triangle"
    bg-color="gradient__cool-1"
    color="tn-white"
  />
</template>
<template>
  <TnCoolIcon
    name="logo-tuniao"
    type="triangle"
    bg-color="gradient__cool-1"
    color="tn-white"
  />
</template>

胶囊 - capsule ​

  • 将type设置为capsule可以将图标设置为胶囊风格，在该模式下color和bg-color都生效
vue
<template>
  <TnCoolIcon
    name="logo-tuniao"
    type="capsule"
    bg-color="tn-indigo"
    color="tn-white"
  />
</template>
<template>
  <TnCoolIcon
    name="logo-tuniao"
    type="capsule"
    bg-color="tn-indigo"
    color="tn-white"
  />
</template>
vue
<template>
  <TnCoolIcon
    name="logo-tuniao"
    type="capsule"
    bg-color="gradient__cool-1"
    color="tn-white"
  />
</template>
<template>
  <TnCoolIcon
    name="logo-tuniao"
    type="capsule"
    bg-color="gradient__cool-1"
    color="tn-white"
  />
</template>

暗黑金边 - dark-goldborder ​

  • 将type设置为dark-goldborder可以将图标设置为暗黑金边风格，在该模式下color和bg-color都不生效
vue
<template>
  <TnCoolIcon name="logo-tuniao" type="dark-goldborder" />
</template>
<template>
  <TnCoolIcon name="logo-tuniao" type="dark-goldborder" />
</template>
vue
<template>
  <TnCoolIcon name="logo-tuniao" type="dark-goldborder" />
</template>
<template>
  <TnCoolIcon name="logo-tuniao" type="dark-goldborder" />
</template>

花朵 - flower ​

  • 将type设置为flower可以将图标设置为花朵风格，在该模式下color和bg-color都生效
vue
<template>
  <TnCoolIcon
    name="logo-tuniao"
    type="flower"
    bg-color="tn-indigo"
    color="tn-white"
  />
</template>
<template>
  <TnCoolIcon
    name="logo-tuniao"
    type="flower"
    bg-color="tn-indigo"
    color="tn-white"
  />
</template>
vue
<template>
  <TnCoolIcon
    name="logo-tuniao"
    type="flower"
    bg-color="gradient__cool-1"
    color="tn-white"
  />
</template>
<template>
  <TnCoolIcon
    name="logo-tuniao"
    type="flower"
    bg-color="gradient__cool-1"
    color="tn-white"
  />
</template>

API ​

Props ​

参数说明类型默认值可选值
name图标名称String-图标
color图标颜色，具体模式允许设置的说明可查看上方说明，以 tn 开头使用图鸟内置的text 颜色，如果是 gradient 开头则使用图鸟内置的渐变色String--
bg-color背景颜色，具体模式允许设置的说明可查看上方说明，以 tn 开头使用图鸟内置的颜色String--
size图标尺寸，默认单位为 rpxString100-
type图标背景类型Stringminiccircle \ square \ oval \ triangle \ flower \ capsule \ dark-goldborder

Event ​

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

Tuniao UI

Copyright © 2019-present Evan You,Made with ❤️ by Tuniao UI