docs: add information about export conditions to install docs

Closes hperrin#641

INSTALL.md

@@ -26,22 +26,42 @@ You will always import Svelte components from the individual packages.
 </script>
 ```
 
-## Material Fonts
+## Fonts
 
-If you want the Material Icon, Roboto, and Roboto Mono fonts, be sure to include these stylesheets (or include them from a package).
+Material uses the Roboto fonts, so be sure to include these stylesheets (or include them from a package).
 
 ```html
 <!-- Hint where we get fonts from. -->
 <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 
-<!-- Material Icons, Roboto, and Roboto Mono fonts -->
+<!-- Roboto, and Roboto Mono fonts -->
 <link
-  href="https://fonts.googleapis.com/css2?family=Material+Icons&Roboto+Mono:ital@0;1&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+  href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital@0;1&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
   rel="stylesheet"
 />
 ```
 
+## Icons
+
+The easiest way to get Material icons is the font. If you'd like to use the Material Icons font, include that, also in the `head` section.
+
+```html
+<!-- Material Icons fonts -->
+<link
+  href="https://fonts.googleapis.com/css2?family=Material+Icons&display=swap"
+  rel="stylesheet"
+/>
+```
+
+However, you can get a greatly expanded icon library and reduce over-the-wire sizes by using [the MDI library](https://pictogrammers.com/library/mdi/) instead.
+
+```sh
+npm install --save-dev @mdi/js
+```
+
+You can see how to use these icons on the "Using SVGs" demo on the [Icon Button demo page](https://sveltematerialui.com/demo/icon-button/).
+
 ## Installing a Theme
 
 ### A Custom Theme
@@ -121,3 +141,41 @@ Or with a CDN. **Remember to update the version!**
   media="screen and (prefers-color-scheme: dark)"
 />
 ```
+
+## Making Your Tooling Svelte-Aware
+
+A lot of tooling is already Svelte-aware, but if you are installing into a Rollup or Webpack project, you will need to configure its export conditions names to see Svelte libraries correctly.
+
+### Rollup
+
+You will need to add `'svelte'` to the [`exportConditions` config](https://github.com/rollup/plugins/tree/master/packages/node-resolve#exportconditions) of `nodeResolve`.
+
+```js
+// ...
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+
+export default {
+  // ...
+  plugins: [
+    // ...
+    nodeResolve({
+      // ...
+      exportConditions: ['svelte'],
+    }),
+  ],
+};
+```
+
+### Webpack
+
+You will need to add `'svelte'` to the [`resolve.conditionNames` config](https://webpack.js.org/configuration/resolve/#resolveconditionnames).
+
+```js
+module.exports = {
+  // ...
+  resolve: {
+    // ...
+    conditionNames: ['svelte', 'require', 'node'],
+  },
+};
+```

SVELTEKIT.md

@@ -2,7 +2,7 @@
 
 You will need to install the packages you use individually as well as the theme package.
 
-Note: After you install a new package, you will need to restart SvelteKit.
+Note: After you install a new package, you will need rebuild your themes and restart SvelteKit.
 
 ```sh
 npm install --save-dev @smui/button
@@ -64,20 +64,40 @@ Or, without Dark Mode support.
 
 ### Fonts
 
-Material uses the Roboto fonts, so include those as well. If you'd like to use the Material Icons font, include that as well.
+Material uses the Roboto fonts, so be sure to include these stylesheets (or include them from a package).
 
 ```html
 <!-- Hint where we get fonts from. -->
 <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 
-<!-- Material Icons, Roboto, and Roboto Mono fonts -->
+<!-- Roboto, and Roboto Mono fonts -->
 <link
-  href="https://fonts.googleapis.com/css2?family=Material+Icons&Roboto+Mono:ital@0;1&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+  href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital@0;1&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
   rel="stylesheet"
 />
 ```
 
+### Icons
+
+The easiest way to get Material icons is the font. If you'd like to use the Material Icons font, include that, also in the `head` section.
+
+```html
+<!-- Material Icons fonts -->
+<link
+  href="https://fonts.googleapis.com/css2?family=Material+Icons&display=swap"
+  rel="stylesheet"
+/>
+```
+
+However, you can get a greatly expanded icon library and reduce over-the-wire sizes by using [the MDI library](https://pictogrammers.com/library/mdi/) instead.
+
+```sh
+npm install --save-dev @mdi/js
+```
+
+You can see how to use these icons on the "Using SVGs" demo on the [Icon Button demo page](https://sveltematerialui.com/demo/icon-button/).
+
 ## Finishing Up
 
 After that, run `npm run prepare` to build your CSS file, then you can run `npm run dev` to start developing. Happy coding!

THEMING.md

@@ -53,7 +53,7 @@ Or if you don't need dark mode support.
 <link rel="stylesheet" href="/smui.css" />
 ```
 
-Important: The smui-theme compiler will only include the Sass for the packages installed when it is run. If you install a new SMUI package, you should run `npm run prepare` to rebuild the CSS.
+**Important: The smui-theme compiler will only include the Sass for the packages installed when it is run. If you install a new SMUI package, you should run `npm run prepare` to rebuild the CSS.**
 
 ### Theme Variables