更新记录

1.0.1（2023-08-14） 下载此版本

修改说明

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

发布上线

平台兼容性

阿里矢量图-图标组件

组件名：al-icon

安装方式

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

基本用法

在 template 中使用组件

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

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

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

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

使用自己的阿里矢量图库

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

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

使用网络图片

复制自己的阿里矢量图项目图片链接，替换al-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 中使用组件

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

使用本地地址

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

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

注意事项

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

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

在 template 中使用组件

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

API

Props

Events