uniapp图标的使用方法

在uniapp中如何使用自定义图标？是否需要引入特定的图标库，还是可以直接使用本地图片？具体该如何配置和调用？求详细的操作步骤和示例代码。

2 回复

在uniapp中使用图标，推荐使用uni-icons组件。首先在页面引入组件，然后直接使用<uni-icons type="home" size="30"></uni-icons>即可。支持多种内置图标类型，也可自定义图标。记得先安装uni-ui扩展。


在 UniApp 中使用图标有多种方法，以下是常见方式及示例代码：

1. 使用 Unicode 或 Font Class 方式（如 iconfont）

  • 步骤：
    1. 在 iconfont 网站 选择图标并生成项目。
    2. 下载字体文件（如 .ttf），或复制 Font Class 链接。
    3. 在 UniApp 项目中引入：
      • 方式一（本地字体文件）：将 .ttf 文件放入 static/fonts 目录，在 App.vue 中全局引入：
        <style>
  @font-face {
    font-family: 'iconfont';
    src: url('/static/fonts/iconfont.ttf') format('truetype');
  }
  .icon {
    font-family: 'iconfont';
  }
</style>
      • 方式二（在线 Font Class）：在 App.vue 或页面中通过 @import 引入：
        <style>
  @import url('https://at.alicdn.com/t/font_xxx.css');
</style>
    4. 在页面中使用：
      <text class="icon">&#xe601;</text> <!-- Unicode -->
<text class="icon iconfont icon-home"></text> <!-- Font Class -->

2. 使用图片图标

  • 将图标图片（如 PNG、SVG）放入 static 目录，通过 <image> 组件引用：
    <image src="/static/icon-home.png" mode="widthFix"></image>

3. 使用 UI 框架内置图标（如 uView UI）

  • 安装 uView UI 后，直接使用组件：
    <u-icon name="home" size="32"></u-icon>

注意事项：

  • 兼容性：Unicode/Font Class 方式需注意小程序和 H5 的兼容性，部分平台可能需调整路径。
  • 性能：图片图标需控制大小，避免影响加载速度。
  • 自定义：UI 框架的图标可通过配置主题色或尺寸灵活调整。

根据项目需求选择合适的方式，推荐优先使用 Font Class 或 UI 框架以保持一致性。

回到顶部