如何修改NativeScript + Vue中SearchBar组件的图标颜色？

当前使用的SearchBar代码如下：

<SearchBar
    class="w-full rounded-full"
    textFieldHintColor="#fff"
    color="#fff"
    textProperty="#fff"
    backgroundImage="none"
    v-model="search"
    hint="Search..."
    @submit="fetchData"/>

当前搜索栏呈现无背景、白色文字的圆角样式。由于官方文档未提及任何图标相关配置项，可通过以下两种方案添加搜索图标：

• CSS伪元素方案：通过自定义样式给搜索栏添加前置图标，无需修改组件结构

/* 先给搜索栏容器设置相对定位 */
.w-full.rounded-full {
  position: relative;
  padding-left: 2.5rem; /* 为图标预留左侧空间 */
}

/* 插入放大镜图标（使用Unicode字符） */
.w-full.rounded-full::before {
  content: "\1F50D";
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
}

• 嵌套元素方案（尝试插槽）：若组件支持匿名插槽（即便文档未标注），可直接在SearchBar内部插入图标元素

<SearchBar
    class="w-full rounded-full relative"
    textFieldHintColor="#fff"
    color="#fff"
    textProperty="#fff"
    backgroundImage="none"
    v-model="search"
    hint="Search..."
    @submit="fetchData">
  <div class="absolute left-3 top-1/2 -translate-y-1/2 text-white">🔍</div>
</SearchBar>

若插槽方案无效，优先使用CSS伪元素方案，该方案兼容性更强，无需依赖组件内部实现。

内容的提问来源于stack exchange，提问作者IskDev