Skip to content

Commit 65afb01

Browse files
Readme: Update icon paths
1 parent 9604a8d commit 65afb01

File tree

1 file changed

+6
-7
lines changed

1 file changed

+6
-7
lines changed

README.md

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ Welcome to the project! :wave: This library is the [React](https://facebook.gith
2828

2929
### Quick Setup (CommonJS)
3030

31-
For a no hassle setup and compatibility with Create React App v1, a CommonJS version has been included within the NPM package to allow usage without transpiling. Use the following named `import` syntax to access CommonJS components from `/lib/index.js`:
31+
For a no hassle setup and compatibility with Create React App v1, a CommonJS version has been included within the NPM package. If using this setup, please re-write the `import` statement in the documentation site examples. Use the following named `import` syntax to access CommonJS components from `/lib/index.js`:
3232

3333
```
3434
import { Button } from '@salesforce/design-system-react';
@@ -59,10 +59,6 @@ import Button from '@salesforce/design-system-react/components/button';
5959

6060
This library does not contain any Cascading Style Sheets (CSS). You will need to add `<link rel="stylesheet" type="text/css" href="/node_modules/@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.min.css" />` to your page and serve that file from a publicly available folder.
6161

62-
### Icon Usage
63-
64-
Prior to v0.7.0, SLDS icons were bundled with the JavaScript. The 400KB+ icons bundle from [SLDS](https://www.lightningdesignsystem.com/) is no longer included. You will need to download the SLDS CSS and icons separately.
65-
6662
#### Serve icons publicly
6763

6864
Typically, scripts should be downloaded in the background without blocking the DOM. With React, this works best with [server side rendering](https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup). SLDS recommends placeholder stencils while scripts are initializing if the HTML cannot be served immediately. If you can serve the HTML, then icon SVGs should not be bundled and served like any other file. Set a path `context` for all child components with `<IconSettings>` at the top of your render tree:
@@ -85,7 +81,7 @@ ReactDOM.render(
8581

8682
```
8783
// ExpressJS example
88-
app.use('/assets/icons', express.static('node_modules/@salesforce-ux/icons/dist/salesforce-lightning-design-system-icons/'));
84+
app.use('/assets/icons', express.static('node_modules/@salesforce-ux/design-system/assets/icons/'));
8985
```
9086

9187
#### Bundle icons
@@ -94,7 +90,6 @@ If you use a module bundler, like Webpack, you can let your module bundler manag
9490

9591
```
9692
import IconSettings from '@salesforce/design-system-react/components/icon-settings';
97-
9893
import standardSprite from '@salesforce-ux/design-system/assets/icons/standard-sprite/svg/symbols.svg';
9994
...
10095
...
@@ -107,6 +102,10 @@ ReactDOM.render(
107102
)
108103
```
109104

105+
### Icon Usage
106+
107+
Prior to v0.7.0, SLDS icons were bundled with the JavaScript. The 400KB+ icons bundle from [SLDS](https://www.lightningdesignsystem.com/) is no longer included. You will need to download the SLDS CSS and icons separately.
108+
110109
Bundled script files are provided _only_ for convenience. Do not use in production.
111110

112111
* `design-system-react.min.js` (700KB+) - includes icons in the JavaScript

0 commit comments

Comments
 (0)