Jetpack Compose Iconfont的使用

发表于 | 分类于
Jetpack Compose Iconfont的使用

前言

https://www.iconfont.cn/

在Iconfont下载图标字体后

将其中的iconfont.ttf文件放入 app/src/main/res/font 目录（若没有该目录则创建)

组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.Font
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.unit.sp
import com.xhkjedu.zxs_android.R

// 1. 定义图标字体资源
val IconFontFamily = FontFamily(
    Font(
        resId = R.font.iconfont // 替换为你的字体文件资源ID
    )
)

// 2. 定义图标常量（对应字体文件中的Unicode编码）
object IconFont {
    const val Zhanghao = "\ue686"       // 账号图标
}

// 3. 创建通用图标组件
@Composable
fun IconFont(
    icon: String,
    modifier: Modifier = Modifier,
    size: Float = 24f,
    color: Color = MaterialTheme.colorScheme.onSurface
) {
    Text(
        text = icon,
        fontFamily = IconFontFamily,
        fontSize = size.sp,
        color = color,
        modifier = modifier
    )
}

使用

1
2
3
4
5
IconFont(
    icon = IconFont.Zhanghao,
    size = 28f,
    color = Color.Green
)

图标对应

image-20250730164514170

我们可以看到图标的编码是，使用的时候把前面的&#x和后面的;去掉，然后添加上\u就是我们要用的编码\ue686。

生成工具

方便直接读取iconfont.json生成常量的工具

https://www.psvmc.cn/zjtools/z/iconfont_tools/index.html