更新记录

1.0（2023-08-21） 下载此版本

上线

平台兼容性

阿里矢量图-图标组件

组件名：ttp-icon

安装方式

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。

基本用法

在 template 中使用组件

<!-- 基本用法 -->
<ttp-icon icon="h-tubiao"></ttp-icon>

<!-- 自定义图标颜色 -->
<ttp-icon icon="h-tubiao" color="#f15723"></ttp-icon>

<!-- 自定义图标大小 -->
<ttp-icon icon="h-tubiao" size="40rpx"></ttp-icon>

<!-- 自定义图标颜色、大小 -->
<ttp-icon icon="h-tubiao" size="40rpx" color="#f15723"></ttp-icon>

使用自己的阿里矢量图库

自定义的阿里矢量图库，可使用网络地址（数据丢失，阿里不负责；小程序必须下载到本地使用），也可以下载下来放在本地

建议开发时使用网络地址，上线时下载到本地

使用网络图片

复制自己的阿里矢量图项目图片链接，替换ttp-icon.vue 中的网络链接即可

<style lang="scss" scoped>
    // 本地地址，需从阿里矢量图中下载相关文件
    // @import url('./iconfont.css');
    .iconfont {
        font-size: 32rpx;
    }
</style>

在 template 中使用组件

<ttp-icon icon="h-tubiao"></ttp-icon>

使用本地地址

下载自己的阿里矢量图项目，放入static下即可（iconfont.css 、iconfont.woff2、iconfont.woff、iconfont.ttf）

<style lang="scss" scoped>
    // 本地地址，需从阿里矢量图中下载相关文件
    @import url('./iconfont.css');
    .iconfont {
        font-size: 32rpx;
    }
</style>

注意事项

iconfont.css 文件中引用其他三个文件，注意引用路径的正确性

微信小程序必须使用 本地地址

在 template 中使用组件

<ttp-icon icon="h-tubiao"></ttp-icon>

API

Props

Events