diff --git a/src/optics+no_icons.css b/src/optics+no_icons.css new file mode 100644 index 00000000..e5690c46 --- /dev/null +++ b/src/optics+no_icons.css @@ -0,0 +1,16 @@ +/* Third party Vendors */ +@import 'modern-css-reset/dist/reset'; + +/* Fonts */ +@import 'core/fonts/text_fonts.css'; + +/* Tokens */ +@import 'core/tokens'; + +/* Base styles and utilities */ +@import 'core/base'; +@import 'core/layout'; +@import 'core/utilities'; + +/* Components */ +@import 'components'; diff --git a/src/stories/Components/Icon/Icon.mdx b/src/stories/Components/Icon/Icon.mdx index 0a01a01c..9149c519 100644 --- a/src/stories/Components/Icon/Icon.mdx +++ b/src/stories/Components/Icon/Icon.mdx @@ -56,7 +56,7 @@ 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. +There are three 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. @@ -71,6 +71,12 @@ Second is to use an alternate Optics import that does not include the default Ma @import '@rolemodel/optics/dist/css/optics+phosphor_icons'; ``` +Third is to remove the default Material Symbols Outlined icons and handle icons completely on your own. This will reduce the page load time by not loading any icons. + +```css +@import '@rolemodel/optics/dist/css/optics+no_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. diff --git a/src/stories/Overview/Introduction.mdx b/src/stories/Overview/Introduction.mdx index 996abb1e..ec827a22 100644 --- a/src/stories/Overview/Introduction.mdx +++ b/src/stories/Overview/Introduction.mdx @@ -75,6 +75,8 @@ You can add this import to the top of your root level `css` file. /* Or */ @import '@rolemodel/optics/dist/css/optics'; /* Using a different compiler */ /* Or */ +@import '@rolemodel/optics/dist/css/optics+no_icons'; /* Don't load the default icons library */ +/* 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 */