Tuniao UI Uniapp V3

Appearance

On this page

TnIcon-图标 ​

基于字体的图标集，图鸟将所有图标进行了统一化，重绘了大多数的常见图标。

平台差异说明 ​

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

单独使用 ​

图鸟为了方便开发者单独使用 icon 图标字体，将 icon 的字体图标字体单独分出一个 node 包进行管理

可以通过以下命令安装更新到指定版本的图鸟 icon 图标字体

bash
npm install @tuniao/tn-icon@<版本号>
npm install @tuniao/tn-icon@<版本号>

基本使用 ​

1. 单独引入 ​

由于图鸟在这次的更新中将 icon 图标字体单独出来了，在图鸟 ui 框架之外使用仅需将对应的 css 文件引入即可。

css 文件所在位置

@import '@tuniao/tn-icon/dist/index.css'
@import '@tuniao/tn-icon/dist/index.css'

图鸟 icon 图标字体是使用tn-icon-<图标名称>做为类名

2.1 使用 tuniaoui-vue3-uniappUI 组件库 ​

TnIcon组件所在位置

typescript
import TnIcon from '@tuniao/tnui-vue3-uniapp/components/icon/src/icon.vue'
import TnIcon from '@tuniao/tnui-vue3-uniapp/components/icon/src/icon.vue'

2.2 使用 uni_modules 组件库 ​

TnIcon组件所在位置

typescript
import TnIcon from '@/uni_modules/tuniaoui-vue3/components/icon/src/icon.vue'
import TnIcon from '@/uni_modules/tuniaoui-vue3/components/icon/src/icon.vue'

通过TnIcon形式来调用，设置name来设置图标

vue
<TnIcon name="logo-tuniao" />
<TnIcon name="logo-tuniao" />

修改图标样式 ​

  • 通过color参数修改图标的颜色
    • 以tn-<图鸟内置颜色值>可以设置图标使用图鸟的颜色
  • 通过type参数可以使用主题色作为图标颜色
    • type值可选的有primary、success、warning、danger、info，默认为空
  • 通过transparent-bg参数可以设置字体的颜色为以背景颜色作为基准颜色，需要搭配transparent参数一起使用
    • 以tn-<图鸟内置颜色值>可以设置图标使用图鸟的颜色
    • 以gradient__<图鸟渐变颜色值>可以设置图标使用图鸟的渐变颜色
  • 通过size参数来修改图标的大小，默认单位为 rpx，接受传入带单位的参数
  • 通过bold参数来设置图标是否加粗
vue
<TnIcon name="logo-tuniao" type="primary" />
<TnIcon name="logo-tuniao" type="success" />
<TnIcon name="logo-tuniao" type="danger" />
<TnIcon name="logo-tuniao" type="warning" />
<TnIcon name="logo-tuniao" type="info" />
<TnIcon name="logo-tuniao" type="primary" />
<TnIcon name="logo-tuniao" type="success" />
<TnIcon name="logo-tuniao" type="danger" />
<TnIcon name="logo-tuniao" type="warning" />
<TnIcon name="logo-tuniao" type="info" />
vue
<TnIcon name="logo-tuniao" color="tn-blue" />
<TnIcon name="logo-tuniao" color="tn-blue-light" />
<TnIcon name="logo-tuniao" color="#01beff" />
<TnIcon name="logo-tuniao" color="rgb(1, 190, 255)" />
<TnIcon name="logo-tuniao" color="tn-blue" />
<TnIcon name="logo-tuniao" color="tn-blue-light" />
<TnIcon name="logo-tuniao" color="#01beff" />
<TnIcon name="logo-tuniao" color="rgb(1, 190, 255)" />
vue
<TnIcon name="logo-tuniao" transparent transparent-bg="tn-green" />
<TnIcon name="logo-tuniao" transparent transparent-bg="gradient__cool-1" />
<TnIcon name="logo-tuniao" transparent transparent-bg="gradient__teal" />
<TnIcon name="logo-tuniao" transparent transparent-bg="tn-green" />
<TnIcon name="logo-tuniao" transparent transparent-bg="gradient__cool-1" />
<TnIcon name="logo-tuniao" transparent transparent-bg="gradient__teal" />
vue
<TnIcon name="logo-tuniao" size="20" />
<TnIcon name="logo-tuniao" size="20px" />
<TnIcon name="logo-tuniao" size="30rpx" />
<TnIcon name="logo-tuniao" size="40vw" />
<TnIcon name="logo-tuniao" size="20" />
<TnIcon name="logo-tuniao" size="20px" />
<TnIcon name="logo-tuniao" size="30rpx" />
<TnIcon name="logo-tuniao" size="40vw" />
vue
<TnIcon name="logo-tuniao" bold />
<TnIcon name="logo-tuniao" bold />

图片图标 ​

这里说的图片图标是指小图标，理论上这个小图标应该是png格式的正方形图片

这里只需给name参数传入一个图片的地址即可，但是这里只支持绝对路径和网络图片，在这只为图片图标之后的size属性用于设置图片的宽高大小，由于是图片，color等参数会失效

vue
<TnIcon name="/static/imgs/avatar.jpg" />
<TnIcon name="https://tnuiimage.tnkjapp.com/logo/tuniao.png" />
<TnIcon name="/static/imgs/avatar.jpg" />
<TnIcon name="https://tnuiimage.tnkjapp.com/logo/tuniao.png" />

设置图标距离顶部偏移位置 ​

由于字体图标有时候虽然设置了水平、垂直方向上居中，但是在视觉的情况下还是会有一些偏差，这时候可以通过offset-top参数来设置图标距离顶部的偏移位置，默认单位为 rpx，接受传入带单位的参数

vue
<TnIcon name="logo-tuniao" offset-top="10" />
<TnIcon name="logo-tuniao" offset-top="10px" />
<TnIcon name="logo-tuniao" offset-top="20rpx" />
<TnIcon name="logo-tuniao" offset-top="10" />
<TnIcon name="logo-tuniao" offset-top="10px" />
<TnIcon name="logo-tuniao" offset-top="20rpx" />

使用外部定义的样式 ​

  1. 针对非微信小程序平台，组件的根元素就是组件，所以修改样式很容易，直接给组件定义类名或者嵌入内联样式即可。
  2. 如果是微信小程序，编译后页面会有组件同名的元素存在，导致样式传递有问题。

所以：组件提供了一个custom-class和custom-style参数，可以用来给组件定义类名或者嵌入内联样式，这样就可以修改组件的样式了。自定义样式的时候需要注意驼峰命名法，比如font-size需要写成fontSize。

vue
<script lang="ts" setup>
import type { CSSProperties } from 'vue'

const style: CSSProperties = {
  fontSize: '20px',
  color: 'red',
}
</script>

<template>
  <TnIcon custom-class="my-icon" :custom-style="style" />
</template>
<script lang="ts" setup>
import type { CSSProperties } from 'vue'

const style: CSSProperties = {
  fontSize: '20px',
  color: 'red',
}
</script>

<template>
  <TnIcon custom-class="my-icon" :custom-style="style" />
</template>

API ​

Props ​

参数说明类型默认值可选值
name图标名称，详细名称见图标展示，如果带/会被认为是图片图标String--
type图标颜色类型String-primary / success / warning / danger / info
color图标颜色，支持图鸟内置的颜色值、hex、rgb、rgba 值String--
size图标尺寸大小，默认单位为 rpx，可以传入带单位的尺寸值String | Number--
bold是否加粗图标Booleanfalsetrue
transparent是否为透明图标Booleanfalsetrue
transparent-bg设置透明图标的背景色，需要搭配transparent使用，可以使用图鸟内置的背景色、hex、rgb、rgbaString--
img-mode图片模式，在图片图标下有效StringaspectFitscaleToFill / aspectFit / aspectFill / widthFix / heightFix / top / bottom / center / left / right / top left / top right / bottom left / bottom right
offset-top垂直方向上的偏移量String | Number--
custom-style自定义样式Object--
custom-class自定义类名String--

Event ​

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

图标展示 ​

点击图标可以复制图标名称。

Tuniao UI

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