如何在uni-app中大量使用阿里巴巴矢量图图标

阿里巴巴矢量图标库地址 https://www.iconfont.cn/

第一步添加图标：

如果没有账号, 可以先去注册阿里矢量图标库账号
登录去图库里面找自己喜欢的图标
加入购物车
点击购物车把选择好的图标全部添加到一个项目里面

第二步下载图标文件到本地：

在添加完项目后就会出现这样一个界面，点击下载到本地

第三步将文件拖入 uniapp 项目

把下载的文件(除 demo_index.html 外) 全部拖到 uniapp 项目根目录的 static/styles/iconfont/ (自定义目录) 里面

第四步在 App.vue 中引用

<style lang="scss">
    @import "@/static/styles/iconfont/iconfont.css";
</style>

( 我这里也在 uni.scss 也引用了, 具体是否需要引入有待优化 )

使用方法 (我这里是 class 引入)

如果想固定每个图标的样式, 可以在 static/styles/iconfont/目录( 自定义目录 )的 iconfont.css 文件中修改 font-size 的值

图标使用格式 , 其中 icon-xxx, 直接在下方这个页面上, 点击 fontclass, 之后点击图标中的复制代码即可使用

<text class="iconfont icon-xxx "></text>

uniapp 使用大量阿里巴巴矢量图标完整代码

我这里 uniapp 项目使用的 vue3 版本, uview-plus 框架
因为图标太多, 代码冗余, 所以新建了个 js 文件, 在页面上引用

类似写法见博客, 这里就不多赘述了:
uni-app 读取本地数据文件，并渲染到页面上

<template>
<view class="chooseIcon" :style="{maxHeight:iconHeaght+'px'}">
        <u-grid :border="false" col="6">
            <u-grid-item v-for="(item,index) in iconList" :key="index">
                <text class="iconfont" :class="item" style="color: #908e9d;"></text>
            </u-grid-item>
        </u-grid>
    </view>
</template>

<script setup>
    import {
        ref
        onMounted
    } from "vue";
    import {
        iconIcon
    } from "@/static/data/icon.js"
    const iconHeaght = ref(420)
    const iconList = ref(iconIcon)
    onMounted(() => {
        //这里是 uni-app 提供的异步获取设备系统信息的 API
        uni.getSystemInfo({
            success: res => {
                //获取设备高度, 适应图标数量或多或少的背景高度
                iconHeaght.value = res.windowHeight - 410
            }
        });
    })
</script>

<style lang="scss" scoped>
    .chooseIcon {
        background-color: #fff;
        overflow-y: auto;
    }
</style>