Reactjs 是否可以在SLD React Datepicker组件中使用SVG文件？

我在Quip平台（在React上运行）中工作，在SLDS React DataTableCell中使用SLDS React Datepicker组件，但无法在Datepicker中呈现任何SLDS图标（.SVG文件）。下面的代码片段（从SLD生成，应该呈现用于在月份之间导航的右箭头）似乎限制了SVG图标的显示。我已将这些资产包括在我的构建中，并且可以使用下面包含的相同链接在另一个选项卡中打开和查看资产

这段代码只是图标使用的一个示例，但这在多个地方都会发生

<button class="slds-button slds-button_icon-container" type="button">
        <svg aria-hidden="true" class="slds-button__icon">
                <use href="dist/assets/right.svg">
                </use>
        </svg>
        <span class="slds-assistive-text">Next month</span>
</button>

下个月

以下是我实例化Datepicker组件的方式：

return (
        <IconSettings onRequestIconPath={({category, name}) => `dist/assets/${name}.svg`}>
                <DatePicker
                 align='right'
                 labels={{}}
                 onChange={(event, data) => {
                 this.state.editMode = false;
                 this.passUpdate(this.state.property, this.state.rowId, this.state.children);
                                }}
                 formatter={(date) => {
                          let newDate = date ? moment(date).format('YYYY-MM-DD') : '';
                          this.state.children = newDate;
                          return newDate;
                 }}
                 menuPosition='overflowBoundaryElement'
                 parser={(dateString) => {
                         return moment(dateString, 'MM-DD-YYYY').toDate();
                 }}
                 value={this.state.children}
                 />
        </IconSettings>
)

返回(
`dist/assets/${name}.svg`}>
{
this.state.editMode=false；
this.passUpdate（this.state.property、this.state.rowId、this.state.children）；
}}
格式化程序={（日期）=>{
让newDate=日期？时刻（日期）。格式（'YYYY-MM-DD'）：''；
this.state.children=newDate；
返回newDate；
}}
menuPosition='overflowBoundaryElement'
解析器={（日期字符串）=>{
返回时刻（日期字符串'MM-DD-YYYY'）。toDate（）；
}}
值={this.state.children}
/>
)

---

我没有向组件添加任何样式。我还看到，从浏览器内联编辑按钮HTML并替换，您是否确定您位于使用图标的正确目录中，并且没有缺少

/

因此：

return (
    <IconSettings onRequestIconPath={({category, name}) => `/dist/assets/${name}.svg`}>
            <DatePicker
             align='right'
             labels={{}}
             onChange={(event, data) => {
             this.state.editMode = false;
             this.passUpdate(this.state.property, this.state.rowId, this.state.children);
                            }}
             formatter={(date) => {
                      let newDate = date ? moment(date).format('YYYY-MM-DD') : '';
                      this.state.children = newDate;
                      return newDate;
             }}
             menuPosition='overflowBoundaryElement'
             parser={(dateString) => {
                     return moment(dateString, 'MM-DD-YYYY').toDate();
             }}
             value={this.state.children}
             />
    </IconSettings>

返回(
`/dist/assets/${name}.svg`}>
{
this.state.editMode=false；
this.passUpdate（this.state.property、this.state.rowId、this.state.children）；
}}
格式化程序={（日期）=>{
让newDate=日期？时刻（日期）。格式（'YYYY-MM-DD'）：''；
this.state.children=newDate；
返回newDate；
}}
menuPosition='overflowBoundaryElement'
解析器={（日期字符串）=>{
返回时刻（日期字符串'MM-DD-YYYY'）。toDate（）；
}}
值={this.state.children}
/>

---

)

@Tylenigel您能分享codesandbox/stackblitz吗？@DipenShah遗憾的是不能，因为整个代码库是我们客户专有的。我可以参考这个SLDS沙盒，其中的图标似乎正在工作，但是：@Tylenigel我确实看到了，但无法在codesandbox上工作，我将再次查看。是的，在这个平台的构建中，图标的上传方式有一些特殊性，但我已经验证了我的路径是否将资产加载到DOM中——只是不会呈现它。我正在开发一个演示环境来演示这个问题，并希望在下周早些时候与大家分享。是的，在这个平台的构建中上传图标有一些特殊之处，但我已经验证了我的路径是否将资产加载到DOM中-只是不会呈现它。我正在开发一个演示环境来演示这个问题&我希望在下周初与大家分享。