You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+6-7Lines changed: 6 additions & 7 deletions
Original file line number
Diff line number
Diff line change
@@ -28,7 +28,7 @@ Welcome to the project! :wave: This library is the [React](https://facebook.gith
28
28
29
29
### Quick Setup (CommonJS)
30
30
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`:
32
32
33
33
```
34
34
import { Button } from '@salesforce/design-system-react';
@@ -59,10 +59,6 @@ import Button from '@salesforce/design-system-react/components/button';
59
59
60
60
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.
61
61
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
-
66
62
#### Serve icons publicly
67
63
68
64
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:
@@ -94,7 +90,6 @@ If you use a module bundler, like Webpack, you can let your module bundler manag
94
90
95
91
```
96
92
import IconSettings from '@salesforce/design-system-react/components/icon-settings';
97
-
98
93
import standardSprite from '@salesforce-ux/design-system/assets/icons/standard-sprite/svg/symbols.svg';
99
94
...
100
95
...
@@ -107,6 +102,10 @@ ReactDOM.render(
107
102
)
108
103
```
109
104
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
+
110
109
Bundled script files are provided _only_ for convenience. Do not use in production.
111
110
112
111
*`design-system-react.min.js` (700KB+) - includes icons in the JavaScript
0 commit comments