Icon Distribution

.github/pull_request_template.md

@@ -34,7 +34,9 @@ Cross out all that don't apply with ~~ ~~ around it like ~~this~~
   - [ ] Have you updated the dependency graph?
   - [ ] Have you updated the docs?
 - [ ] Do you need to update the package version?
-  - [ ] Did you update the example pages in /public?
+  - [ ] Did you update the example pages in `.storybook/assets`?
+- [ ] Were any changes made to the top level optics.css file?
+  - [ ] Were those changes reflected in the other top level files?
 
 ## Screenshots
 

.storybook/assets/example-layout.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="Example layout for the Optics design system" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rolemodel/[email protected].0/dist/css/optics.min.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rolemodel/[email protected].1/dist/css/optics.min.css" />
     <!-- <link rel="stylesheet" href="../src/optics.css" /> Enable this during development to see local changes -->
     <script type="module" src="https://esm.sh/invokers-polyfill"></script>
     <title>Optics Example Layout</title>

.storybook/assets/login-layout.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="Example layout for the Optics design system" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rolemodel/[email protected].0/dist/css/optics.min.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rolemodel/[email protected].1/dist/css/optics.min.css" />
     <!-- <link rel="stylesheet" href="../src/optics.css" /> Enable this during development to see local changes -->
     <title>Optics Login Layout</title>
     <style>

.storybook/assets/spinner-layout.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="Example layout for the Optics design system" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rolemodel/[email protected].0/dist/css/optics.min.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rolemodel/[email protected].1/dist/css/optics.min.css" />
     <!-- <link rel="stylesheet" href="../src/optics.css" /> Enable this during development to see local changes -->
     <title>Optics Spinner Layout</title>
     <style>

package.json

@@ -1,14 +1,14 @@
 {
   "name": "@rolemodel/optics",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "packageManager": "[email protected]",
   "description": "Optics is a css package that provides base styles and components that can be integrated and customized in a variety of projects.",
   "main": "dist/css/optics.css",
   "scripts": {
     "test": "exit 0",
     "build": "yarn build:css && yarn build:css-min && yarn build:tokens && yarn build:files",
-    "build:css": "postcss src/optics.css -o dist/css/optics.css",
-    "build:css-min": "postcss src/optics.css -o dist/css/optics.min.css --env=minify",
+    "build:css": "postcss 'src/optics*.css' -d dist/css",
+    "build:css-min": "postcss 'src/optics*.css' -d dist/css --ext .min.css --env=minify",
     "build:tokens": "node build_token_json --source=src/core/tokens --output=dist/tokens/tokens.json",
     "build:files": "mkdir -p dist/css/addons; cp LICENSE README.md package.json dist/; cp -rL src/addons src/core src/components dist/css",
     "storybook": "storybook dev -p 6006 --docs",

src/optics+feather_icons.css

@@ -0,0 +1,17 @@
+/* Third party Vendors */
+@import 'modern-css-reset/dist/reset';
+
+/* Fonts */
+@import 'core/fonts/text_fonts.css';
+@import 'addons/fonts/feather_icons.css';
+
+/* Tokens */
+@import 'core/tokens';
+
+/* Base styles and utilities */
+@import 'core/base';
+@import 'core/layout';
+@import 'core/utilities';
+
+/* Components */
+@import 'components';

src/optics+lucide_icons.css

@@ -0,0 +1,17 @@
+/* Third party Vendors */
+@import 'modern-css-reset/dist/reset';
+
+/* Fonts */
+@import 'core/fonts/text_fonts.css';
+@import 'addons/fonts/lucide_icons.css';
+
+/* Tokens */
+@import 'core/tokens';
+
+/* Base styles and utilities */
+@import 'core/base';
+@import 'core/layout';
+@import 'core/utilities';
+
+/* Components */
+@import 'components';

src/optics+material_outlined_variable.css

@@ -0,0 +1,17 @@
+/* Third party Vendors */
+@import 'modern-css-reset/dist/reset';
+
+/* Fonts */
+@import 'core/fonts/text_fonts.css';
+@import 'addons/fonts/material_symbols_outlined_variable.css';
+
+/* Tokens */
+@import 'core/tokens';
+
+/* Base styles and utilities */
+@import 'core/base';
+@import 'core/layout';
+@import 'core/utilities';
+
+/* Components */
+@import 'components';

src/optics+phosphor_icons.css

@@ -0,0 +1,17 @@
+/* Third party Vendors */
+@import 'modern-css-reset/dist/reset';
+
+/* Fonts */
+@import 'core/fonts/text_fonts.css';
+@import 'addons/fonts/phosphor_icons.css';
+
+/* Tokens */
+@import 'core/tokens';
+
+/* Base styles and utilities */
+@import 'core/base';
+@import 'core/layout';
+@import 'core/utilities';
+
+/* Components */
+@import 'components';

src/optics+tabler_icons.css

@@ -0,0 +1,17 @@
+/* Third party Vendors */
+@import 'modern-css-reset/dist/reset';
+
+/* Fonts */
+@import 'core/fonts/text_fonts.css';
+@import 'addons/fonts/tabler_icons.css';
+
+/* Tokens */
+@import 'core/tokens';
+
+/* Base styles and utilities */
+@import 'core/base';
+@import 'core/layout';
+@import 'core/utilities';
+
+/* Components */
+@import 'components';

src/stories/Components/Icon/Icon.mdx

@@ -56,13 +56,55 @@ Icon can be used as a standalone component, however, it does have a few dependen
 
 Optics supports a variety of [Additional icon libraries](?path=/docs/overview-addons--docs) that can be imported. Due to the nature of these libraries, not all of the same icon class modifiers may be available.
 
+There are two ways these icon libraries can be used.
+
+First is as an addon. This means that the default Material Symbols Outlined icons will still be loaded and both can be used.
+
+```css
+@import '@rolemodel/optics';
+@import '@rolemodel/optics/dist/css/addons/fonts/phosphor_icons';
+```
+
+Second is to use an alternate Optics import that does not include the default Material Symbols Outlined icons, and only includes the additional icon library of your choice.
+
+```css
+@import '@rolemodel/optics/dist/css/optics+phosphor_icons';
+```
+
+### Material Symbols Outline Variable Icons
+
+Optics ships with a simplified version of [Material Symbols Outlined](https://fonts.google.com/icons?icon.style=Outlined). It only includes the font weight variable aspect of the icon library which means you won't be able to utilize the fill, or emphasis properties.
+If your app does want to use the full Material Symbols Outlined library, you can import the full library by using the addon shown below.
+This will increase the page load time but will allow you to use the full capabilities of the icon library.
+
+```css
+@import '@rolemodel/optics/dist/css/optics+material_symbols_outlined_variable';
+```
+
+```html
+<i class="icon ph ph-smiley"></i>
+```
+
+The filled, size and weight modifiers can be used with Phosphor Icons.
+
+Phosphor adds `.icon--weight-thin` but does not support `.icon--weight-semi-bold`.
+It also adds a dual tone variation by replacing `.ph` with `.ph-duotone`.
+
+```html
+<i class="icon ph-duotone ph-smiley"></i>
+```
+
+Note: Phosphor Icons do not support the use of emphasis variations or the use of `.icon--filled` in combination with `.ph-duotone` or any weight variations.
+
 ### Phosphor Icons
 
 [Phosphor Icons](https://phosphoricons.com/) can be created with the `<i>` tag and uses the `.ph` prefix with `.ph-{name}` to define a specific icon.
 
 ```css
 @import '@rolemodel/optics';
 @import '@rolemodel/optics/dist/css/addons/fonts/phosphor_icons';
+/* Or */
+@import '@rolemodel/optics/dist/css/optics+phosphor_icons';
 ```
 
 ```html
@@ -87,6 +129,8 @@ Note: Phosphor Icons do not support the use of emphasis variations or the use of
 ```css
 @import '@rolemodel/optics';
 @import '@rolemodel/optics/dist/css/addons/fonts/tabler_icons';
+/* Or */
+@import '@rolemodel/optics/dist/css/optics+tabler_icons';
 ```
 
 ```html
@@ -114,6 +158,8 @@ Note: Tabler Icons do not support the use of weight or emphasis variations.
 ```css
 @import '@rolemodel/optics';
 @import '@rolemodel/optics/dist/css/addons/fonts/feather_icons';
+/* Or */
+@import '@rolemodel/optics/dist/css/optics+feather_icons';
 ```
 
 ```html
@@ -139,6 +185,8 @@ you can use the Feather Icons for a smaller icon pack instead. It is important t
 ```css
 @import '@rolemodel/optics';
 @import '@rolemodel/optics/dist/css/addons/fonts/lucide_icons';
+/* Or */
+@import '@rolemodel/optics/dist/css/optics+lucide_icons';
 ```
 
 ```html

src/stories/Overview/Addons.mdx

@@ -33,27 +33,41 @@ Optics supports alternative icon libraries. It currently supports
 - [Feather](https://feathericons.com/)
 - [Lucide](https://lucide.dev/icons/)
 
-These can be imported alongside the base design system to provide additional icon options.
+These can be imported alongside the base design system to provide additional icon options. They can also be integrated with the base design system instead of as an addon if you don't want to use the default Material Symbols Outlined icons. This will reduce the page load time by not loading the Material Symbols Outlined icons.
+Note: This alternate import approach (optics+icon_library) supports the minified versions as well. Just add `.min.css` to the end of the file name.
 
 For more information on how to use these icons, see the [Icon Component](?path=/docs/components-icon--docs).
 
 ```css
-@import '@rolemodel/optics';
-
 /* Full Material Symbols Outlined Package */
+@import '@rolemodel/optics';
 @import '@rolemodel/optics/dist/css/addons/fonts/material_symbols_outlined_variable';
+/* Or */
+@import '@rolemodel/optics/dist/css/optics+material_symbols_outlined_variable';
 
 /* Phosphor Icons */
+@import '@rolemodel/optics';
 @import '@rolemodel/optics/dist/css/addons/fonts/phosphor_icons';
+/* Or */
+@import '@rolemodel/optics/dist/css/optics+phosphor_icons';
 
 /* Tabler Icons */
+@import '@rolemodel/optics';
 @import '@rolemodel/optics/dist/css/addons/fonts/tabler_icons';
+/* Or */
+@import '@@rolemodel/optics/dist/css/optics+tabler_icons';
 
 /* Feather Icons */
+@import '@rolemodel/optics';
 @import '@rolemodel/optics/dist/css/addons/fonts/feather_icons';
+/* Or */
+@import '@rolemodel/optics/dist/css/optics+feather_icons';
 
 /* Lucide Icons (a fork of feather with more icons) */
+@import '@rolemodel/optics';
 @import '@rolemodel/optics/dist/css/addons/fonts/lucide_icons';
+/* Or */
+@import '@rolemodel/optics/dist/css/optics+lucide_icons';
 ```
 
 ## Tom Select

src/stories/Overview/Introduction.mdx

@@ -76,6 +76,10 @@ You can add this import to the top of your root level `css` file.
 @import '@rolemodel/optics/dist/css/optics'; /* Using a different compiler */
 /* Or */
 @import '@rolemodel/optics/dist/css/optics.min.css'; /* If you want a single file with all the styles in it. */
+/* Or */
+@import '@rolemodel/optics/dist/css/optics+phosphor_icons.css'; /* Using a different icon pack */
+/* Or */
+@import '@rolemodel/optics/dist/css/optics+phosphor_icons.min.css'; /* If you want a single file with all the styles in it and a different icon pack. */
 ```
 
 ### Importing without a compiler
@@ -88,6 +92,11 @@ Add a link in your HTML head or an `@import` to the top of your root level `css`
   rel="stylesheet"
   href="https://cdn.jsdelivr.net/npm/@rolemodel/optics@[desired version]/dist/css/optics.min.css"
 />
+<!-- Or -->
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/@rolemodel/optics@[desired version]/dist/css/optics+phosphor_icons.min.css"
+/>
 ```
 
 ```css