实现 icon 自定义颜色主题

分类：uni-app x

项目需要实现图标可以自定义主题颜色，需要适配微信小程序、ios和安卓app。
如果是小程序可以直接加载 Base64 字体的方式，然后在 uvue 文件用 text 标签显示 unicode 字符即可。
但是这样在安卓上显示异常，有什么支持三端并可行的方案吗？

2025-08-06 18:48 负责人:无分享

6 个回复

DCloud_UNI_yuhe

提供一下一个复现代码，看下是怎么用的

1***@163.com (作者)

@font-face {  
  font-family: "iconfont"; /* Project id 4906560 */  
  src:   
       url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAJZ8AAsAAAABBrwAAJYr+zdAQ==') format('woff')  
}  

.iconfont {  
  font-family: "iconfont" !important;  
  font-size: 40rpx;  
  font-style: normal;  
  -webkit-font-smoothing: antialiased;  
  -moz-osx-font-smoothing: grayscale;  
}

1***@163.com (作者)

export const iconMap = {  
  "look_over": "",  
  "check": "",  
  "app_edit": "",  
  "app_logout": "",  
};

1***@163.com (作者)

<template>  
    <text class="iconfont" :style="{ fontSize: size   'px', color }">  
        {{ iconMap[name] as string }}  
    </text>  
</template>  

<script setup lang="ts">  

    import { iconMap } from '@/constant/iconMap.uts'  

    const props = defineProps({  
        name: {  
            type: String,  
            default: ''  
        },  
        size: {  
            type: Number,  
            default: 20  
        },  
        color: {  
            type: String,  
            default: '#ccc'  
        }  
    })  

</script>  

<style scoped>  
    .iconfont {  
        font-family: 'iconfont';  
        font-style: normal;  
    }  
</style>