uniapp icon有哪些

### uniapp 支持的图标库及使用方法

#### 1. 阿里巴巴矢量图标库 (IconFont)

阿里巴巴矢量图标库是一个非常流行的图标资源平台，在uni-app中可以通过简单的配置来集成这些图标[^1]。

为了在项目中使用 IconFont 图标，首先需要访问 [iconfont.cn](https://www.iconfont.cn/) 并创建一个新的项目。在这个过程中可以选择所需的图标并将其添加到该项目内[^3]。

完成上述操作之后，可以下载生成的 `iconfont.css` 文件，并按照说明将链接标签 `<link>` 添加至项目的公共样式文件或单页应用入口处（如 `App.vue`）。此时就可以通过类名的方式调用所需图标的 Unicode 编码了[^4]。

对于动态加载更多图标的情况，只需要更新已有的 IconFont 项目并将最新的 CSS 文件替换掉旧版本即可实现无缝升级而无需修改其他地方的代码逻辑[^5]。

<!-- 在 App.vue 或者全局样式文件中 -->
<link rel="stylesheet" href="//at.alicdn.com/t/font_8dizm9rohfrjtkmi.css">

当要在组件内部显示某个特定图标时，可利用 HTML 实体字符或者直接设置元素的 class 属性：

<i class="iconfont icon-example"></i>
<span>&#xe600;</span> <!-- 假设这是 example 图标的编码 -->

另外一种更为推荐的做法是在 Vue 组件模板中借助于 `uni-icons` 组件配合自定义前缀(`custom-prefix`) 和 类型 (`type`) 来展示来自 IconFont 的图标:

<template>
    <view>
        <uni-icons custom-prefix="iconfont" type="icon-name-from-iconfont" size="24"/>
    </view>
</template>

<script setup lang="ts">
// ...
</script>

以上就是关于如何在uni-app应用程序中引入和使用阿里巴巴矢量图标库的方法概述[^2]。