Javascript 使用包含日期的本机Svg图标日历作出反应

我想得到的结果是：

我创建的结果是，一个内有文字的图标：

从下面的代码可以看出，该图标是使用SVG创建的

但是我得到的结果并不让我满意，我无法得到我在考虑第一幅图像时提出的结果，问题如下

1） 图标部分的圆角，灰色区域

我不知道如何使用svg做到这一点

考虑到图像的大小可以变化，并且灰度部分必须与所提出的图像相似

2） 考虑到图标的大小可能会改变，将日期文本置于中间位置

有什么建议吗

链接：

代码：

import React，{Component}来自'React'；
从“react native”导入{View，StyleSheet，Text}；
从“expo”导入{Constants，Svg}；
从“@expo/vector icons”导入{MaterialCommunityIcons}；
变量大小=30//300
导出默认类应用程序扩展组件{
render（）{
返回(
在编辑器中更改代码，并在手机上观看代码的更改！保存到
获取可共享的url。
21
在编辑器中更改代码，并在手机上观看代码的更改！保存到
获取可共享的url。
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
//对齐项目：“居中”，
为内容辩护：“中心”，
paddingTop:Constants.statusBarHeight，
背景颜色：“#ecf0f1”，
},
});

我的想法有点不同：使用一个包装器（一个

视图

组件），并使用日历图标作为它的“背景图像”。然后将动态日期号定位在这个包装器的中间：

<View style={styles.calendar}>
     <MaterialCommunityIcons name="calendar-blank" size={30} color="#000" style={styles.calendarIcon} />
     <Text style={styles.date}>21</Text>
</View>

---

这是一个可行的解决方案。

实际上我想尝试使用svg，但解决方案很好。我做了以下测试：我喜欢这个结果。@Paul，看起来不错：）

<View style={styles.calendar}>
     <MaterialCommunityIcons name="calendar-blank" size={30} color="#000" style={styles.calendarIcon} />
     <Text style={styles.date}>21</Text>
</View>

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
  calendar: {
    position: 'relative',
    alignItems: 'center',
    justifyContent: 'center',
    width: 30,
    height: 30, 
  },
  calendarIcon: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0
  },
  date: {
    fontSize: 9,
    marginTop: 4
  }
});