Is it possible to use SVG files within SLDS React Datepicker components?

Question

I am working in the Quip platform (which runs on React), using the SLDS-React Datepicker component within a SLDS-React DataTableCell but have been unable to render any of the SLDS icons (.SVG files) within the Datepicker. It seems the following code snippet (which is generated from SLDS, and should be rendering the right arrow used to navigate between months) is restricting the SVG icon from displaying at all. I have included these assets in my build and can open & view the asset in another tab using the same link included below.

This code is just an example of icon usage, but this occurs in multiple places.

<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>

This is how I am instantiating the Datepicker component:

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>
)

I have not added any styling to the components. I have also seen that editing the Button HTML inline from the browser and replacing the <svg component with an <img component, passing in the path to the icon as the src parameter, works perfectly.

Since I cannot modify the SLDS code directly to change these tags and replace the <svg with an <img, how can I get my icons to render within the Datepicker component?

Answer 1

Are you sure that you are in the right directory for the usage of the icons and that you are not missing a /?

So that it's:

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>

)