如何使用.ttf字体文件中的CoreUI图标？

我来给你一步步说清楚怎么操作，其实字体图标本质就是特殊的Unicode字符，只要把对应的字符配上你已经定义好的字体就能显示图标了，操作起来很简单：

第一步：找到图标对应的Unicode编码 #

首先你得搞清楚每个CoreUI图标对应的Unicode值，一般有两种方式找：

• 如果你下载的CoreUI图标包里附带了css或者json元数据文件，打开就能看到，比如会有类似.cui-icon-home:before { content: "\f015"; }的内容，这里的\f015就是图标的编码，转成Compose能用的格式只要把\f换成\u，也就是\uF015。
• 要是没有这些辅助文件，也可以用字体查看工具（比如系统自带的字体预览器，或者专门的字体查看软件）打开你的CoreUI_Icons_Linear.ttf，找到目标图标后查看它的字符编码就行。

第二步：在Compose中用Text组件渲染图标 #

你已经定义好了CoreUIIconsFamily，现在直接用Text组件搭配这个字体，再传入对应的Unicode字符就可以显示图标了。给你写个示例：

@Composable
fun CoreUIIcon(unicode: String, size: TextUnit = 24.sp, color: Color = Color.Black) {
    Text(
        text = unicode,
        fontFamily = CoreUIIconsFamily(),
        fontSize = size,
        color = color
    )
}

// 调用示例：假设home图标对应的Unicode是\uF015
@Composable
fun DemoIconDisplay() {
    CoreUIIcon(unicode = "\uF015")
}

第三步：封装成更易用的组件（可选） #

为了不用每次都记一堆Unicode编码，你可以把常用图标封装成单独的函数，用起来更顺手：

// 先把常用图标的Unicode统一管理
object CoreUIIcons {
    val Home = "\uF015"
    val Settings = "\uF013"
    val User = "\uF007"
    // 其他需要的图标依次添加就行
}

// 封装成单独的Icon组件
@Composable
fun HomeIcon(size: TextUnit = 24.sp, color: Color = Color.Black) {
    CoreUIIcon(unicode = CoreUIIcons.Home, size = size, color = color)
}

// 调用的时候直接用，和系统Icon组件一样方便
@Composable
fun DemoScreen() {
    Row {
        HomeIcon(color = Color.Blue)
        // 其他图标...
    }
}

这样用起来就完全没门槛啦！

内容来源于stack exchange