uniapp在自定义tabbar上动态修改svg图标颜色和字体颜色

需求：在uniapp项目内，自定义tabbar，需要将图标更换成svg格式，可动态修改图标及字体颜色。

效果图如下：

请添加图片描述

我使用的是uniapp结合uview2的组件使用，代码如下：

<u-tabbar :value="currentIndex" @change="tabbarChange" :fixed="true" :activeColor="themeColor":safeAreaInsetBottom="true" zIndex='99'><u-tabbar-item v-for="(item,index) in tabbarList" :key="index" :text="item.text":badge="item.isBadge?carNum:''"><!-- 选中的svg --><view class="u-page__item__slot-icon tabbarItemIcon"slot="active-icon" :style="{backgroundImage: 'url('+item.selectedIconPath+')'}"></view><!-- 未选中的svg --><view class="u-page__item__slot-icon tabbarItemIcon"slot="inactive-icon" :style="{backgroundImage: 'url('+item.iconPath+')'}"></view></u-tabbar-item>
</u-tabbar>

对上述代码进行解析：

currentIndex：是父组件传递过来的需要选中的下标
fixed：是否固定底部
themeColor：主题色
tabbarChange：切换tabbar的事件

数据来源：

// 将对应的svg导入进来
import {index,category,cart,mine} from "./svgUrls.js"
export default {props: {// 当前索引currentIndex: {type: Number,default: 0},},data() {let that=this;return {// 主题色themeColor:"#0cea39",// tabbar数据tabbarList: [{"pagePath": "/pages/index/index","iconPath": '"' + index+ '"',"selectedIconPath": that.changeColor('"' + index+ '"'),"text": "首页"},{"pagePath": "/pages/category/category","iconPath": '"' + category + '"',"selectedIconPath": that.changeColor('"' + category + '"'),"text": "分类"},{"pagePath": "/pages/cart/cart","iconPath": '"' + cart + '"',"selectedIconPath": that.changeColor('"' + cart + '"'),"text": "购物车"},{"pagePath": "/pages/mine/mine","iconPath": '"' + mine+ '"',"selectedIconPath": that.changeColor('"' + mine+ '"'),"text": "我的"}],}},methods:{// 改变svg的颜色changeColor(url) {let res = url.replace(/%23[a-zA-Z0-9]{6}/g, this.themeColor.replace("#", "%23"));return res;},}
}

各个图标的svg格式存放在svgUrls.js文件内[可随意存放位置和更改名称]

// 这里代码偏多只展示index的，其他的自行填写
export const index="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 81 81'%3E%3Cpath fill='%23909399' d='M13.19 44.83q-2.2.22-4.06-.69c-5.39-2.66-2.57-7.5.45-10.58 6.53-6.65 12.91-13.44 19.17-20.22q4.55-4.92 7.17-5.97c5.22-2.09 9.59.32 13.07 4.11q10.02 10.86 20.33 21.39c3.01 3.07 6.79 7.92 1.43 11.04q-2.12 1.23-4.76.86a.42.41 4.4 0 0-.47.4q-.17 8.72.02 18.34c.11 5.46-2.48 9.51-8.21 9.69q-9.35.29-33.94.12-9.43-.06-9.37-9.61.06-8.97.05-18.08 0-.88-.88-.8zm4.99-3.29q-.01 11.32-.01 23.46 0 3.3 3 4.01 1.53.36 3.7.35 16.19-.04 31.43-.09 5.01-.02 5-4.56-.05-11.31-.04-23.28 0-.62.62-.62c1.91 0 4.74.36 6.5-.26q1.79-.62.49-2-12.48-13.32-23.61-24.91-5.59-5.81-11.15.02-11.96 12.56-23.82 25.18a1.12 1.12 0 0 0 .79 1.89l6.49.18q.61.02.61.63z'/%3E%3Cpath fill='%23909399' d='M40.23 41.22c6.2-5.65 13.84 3.37 7.01 8.95q-3.62 2.95-7.03 5.96-.47.41-.93.01-3.51-3.02-7.45-6.4c-6.15-5.26 1.24-14.1 7.44-8.52q.48.43.96 0z'/%3E%3C/svg%3E";export const category ="";export const cart ="";export const mine="";