图片图标​

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

平台差异说明 ​App(vue)H5微信小程序支付宝小程序...√√√√适配中单独使用 ​图鸟为了方便开发者单独使用 icon 图标字体，将 icon 的字体图标字体单独分出一个 node 包进行管理

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

bashnpm install @tuniao/tn-icon@<版本号>npm install @tuniao/tn-icon@<版本号>1基本使用 ​1. 单独引入 ​由于图鸟在这次的更新中将 icon 图标字体单独出来了，在图鸟 ui 框架之外使用仅需将对应的 css 文件引入即可。

css 文件所在位置

@import '@tuniao/tn-icon/dist/index.css'@import '@tuniao/tn-icon/dist/index.css'1图鸟 icon 图标字体是使用tn-icon-<图标名称>做为类名

2.1 使用 tuniaoui-vue3-uniappUI 组件库 ​TnIcon组件所在位置

typescriptimport TnIcon from '@tuniao/tnui-vue3-uniapp/components/icon/src/icon.vue'import TnIcon from '@tuniao/tnui-vue3-uniapp/components/icon/src/icon.vue'12.2 使用 uni_modules 组件库 ​TnIcon组件所在位置

typescriptimport TnIcon from '@/uni_modules/tuniaoui-vue3/components/icon/src/icon.vue'import TnIcon from '@/uni_modules/tuniaoui-vue3/components/icon/src/icon.vue'1通过TnIcon形式来调用，设置name来设置图标

vue1修改图标样式 ​通过color参数修改图标的颜色 以tn-<图鸟内置颜色值>可以设置图标使用图鸟的颜色通过type参数可以使用主题色作为图标颜色 type值可选的有primary、success、warning、danger、info，默认为空通过transparent-bg参数可以设置字体的颜色为以背景颜色作为基准颜色，需要搭配transparent参数一起使用 以tn-<图鸟内置颜色值>可以设置图标使用图鸟的颜色以gradient__<图鸟渐变颜色值>可以设置图标使用图鸟的渐变颜色通过size参数来修改图标的大小，默认单位为 rpx，接受传入带单位的参数通过bold参数来设置图标是否加粗vue

12345vue

1234vue

123vue

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

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

vue

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

vue

123使用外部定义的样式 ​针对非微信小程序平台，组件的根元素就是组件，所以修改样式很容易，直接给组件定义类名或者嵌入内联样式即可。如果是微信小程序，编译后页面会有组件同名的元素存在，导致样式传递有问题。所以：组件提供了一个custom-class和custom-style参数，可以用来给组件定义类名或者嵌入内联样式，这样就可以修改组件的样式了。自定义样式的时候需要注意驼峰命名法，比如font-size需要写成fontSize。

vue

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