更新记录

1.0.6（2023-09-06）

• 更新网络地址图标库

1.0.5（2023-07-18）

• 增加最近使用的图标

1.0.4（2023-07-07）

• 修改版本展示图效果

平台兼容性

阿里矢量图-图标组件

组件名：h-icon

安装方式

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

基本用法

在 template 中使用组件

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

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

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

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

使用自己的阿里矢量图库

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

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

使用网络图片

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

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

在 template 中使用组件

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

使用本地地址

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

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

注意事项

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

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

在 template 中使用组件

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

API

Props

Events