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

I believe the issue here is that you're using IconSettings but not including any sprites. The docs here are admittedly light, but when we've implemented this in the past using webpack, a solution was to include the sprites as symbols on the page, so they can be referenced directly in the SVGs via onRequestIconPath.

<IconSettings onRequestIconPath={({name}) => `#${name}` }>
    <div>
        <StandardSprite/>
        <ActionSprite/>
        <UtilitySprite/>
        {content}
    </div>
</IconSettings>