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?

@TyleNiggel would you be able to share codesandbox/stackblitz? — Dipen Shah
– Dipen Shah, Commented Oct 14, 2020 at 13:40
@DipenShah unfortunately not, as the overall codebase is proprietary for our client. I can reference this SLDS sandbox, where the Icons seem to be working however: design-system-react-components.herokuapp.com/?path=/story/… — Tyler Niggel
– Tyler Niggel, Commented Oct 15, 2020 at 17:27
@TyleNiggel I did see that but wasn't able to get it working on codesandbox, will take a look again. — Dipen Shah
– Dipen Shah, Commented Oct 15, 2020 at 17:29

jesseb0rn · Accepted Answer · 2020-10-19 16:05:40Z

0

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>

)

answered Oct 19, 2020 at 16:05

jesseb0rn

8294 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tyler Niggel Over a year ago

Yes, there are some peculiarities with how the icons get uploaded in the build for this platform but I have verified that my path loads the asset into the DOM - just won't render it. I am working on a demo environment that will demonstrate this issue & am hoping to share it early next week.

Tyler Niggel Over a year ago

Yes, there are some peculiarities with how the icons get uploaded in the build for this platform but I have verified that my path loads the asset into the DOM - just won't render it. I am working on a demo environment that will demonstrate this issue & am hoping to share it early next week.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related