Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions src/optics+no_icons.css
Original file line number Diff line number Diff line change
@@ -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';
8 changes: 7 additions & 1 deletion src/stories/Components/Icon/Icon.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand All @@ -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.
Expand Down
2 changes: 2 additions & 0 deletions src/stories/Overview/Introduction.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down