时间戳

首页 > 解决方案 > 是否可以在 SLDS React Datepicker 组件中使用 SVG 文件？

reactjs - 是否可以在 SLDS React Datepicker 组件中使用 SVG 文件？

问题描述

我在 Quip 平台（在 React 上运行）中工作，使用 SLDS-React DataTableCell 中的 SLDS-React Datepicker 组件，但无法在 Datepicker 中呈现任何 SLDS 图标（.SVG 文件）。似乎以下代码片段（由 SLDS 生成，应该呈现用于在月份之间导航的右箭头）完全限制了 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>
)

我没有为组件添加任何样式。我还看到从浏览器编辑 Button HTML 内联并用 <img 组件替换 <svg 组件，将图标的路径作为 src 参数传递，效果很好。

由于我无法直接修改 SLDS 代码以更改这些标签并将 <svg 替换为 <img，我如何才能让我的图标在 Datepicker 组件中呈现？

标签： reactjssvg

解决方案

你确定你在正确的目录中使用图标并且你没有丢失一个/吗？

所以它是：

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>

)

推荐阅读