@lumx/icons NPM | npm.io

3.7.0 • Published 14 days ago

Install

Weekly downloads

486

License

MIT

Repository

Last release

14 days ago

@lumx/icons

LumApps Design System icon library based on Material Design Icons (@mdi/js and @mdi/font) version 5 with backward compatibility with version 4 and with some icon overrides and added icons.

There is two ways to use the icons:

Import SVG path from JS (ex: import { mdiHeart } from '@lumx/icons';) which you can display with the Icon react component (ex: import { Icon } from '@lumx/react'; <Icon icon={mdiHeart} />)
Import the SCSS style (ex: @import '@lumx/icons/font';) and use MDI classes (ex: .mdi .mdi-heart)

Warning: The SCSS/Font icons will get deprecated in the future as they force you to import all icons even if you only use a few.

Overrides & aliases

While we are based on MDI, we have overrides of both the JS and font icons handles in override dir:

override/override-icons: contains SVG icons and config to override MDI
override/alias-icons.js: config contains mapping from icon name to aliases
override/generate/run-all.js: script that generate the TS & Font/SCSS overrides and then TS & Font/SCSS aliases

Aliases have been used to keep retro-compatibility when migrating from MDI v4 to v5 and for brand renaming (ex: twitter). Overrides helped us update or restore brand logo because MDI is deprecating them.

Overrides

To add or replace an icons in MDI:

Add the SVG icon in override/override-icons and make sure they are defined with a single svg path in a view box at 24/24dp and follows the MDI icons guidelines (3dp margin around the edge)
Add the configuration of the icon in override/override-icons/config.json. Set the unicode to know where to place the icon in the font (at which code point) and set replace: '<name>' if you want the icon to replace an existing MDI icon. (If you don't set it to true on existing icon, you'll get the error: Error: Repeat unicode...)
Run the yarn generate:icons script to re-generate
Validate the changes & commit them

Aliases

To add an alias for an icon:

Edit the override/alias-icons.js config putting the original icon name in key and the aliases in value.
Run the yarn generate:icons script to re-generate
Validate the changes & commit them

Preview & Test

To display all the CSS font icons, you can run yarn test:css-font which will generate a demo of all the icons on an HTTP server on localhost:8080.

To display all JS SVG path icons, you can run the demo site with yarn start or go to https://design.lumapps.com/. Then, go to the "Iconography" page on which the full icon library is displayed.

@hyliss-widget/playground @everything-registry/sub-chunk-565 @hyliss-widget/common @infinitebrahmanuniverse/nolb-_lum @lumx/react @lumx/angularjs @lumapps-extensions-playground/common @lumapps-extensions-playground/devenv @lumapps-extensions-playground/playground-server

14 days ago

3.6.9-alpha-split-esm-icons.0

19 days ago

3.6.9-alpha-new-icons.1

21 days ago

3.6.9-alpha-new-icons.0

24 days ago

25 days ago

3.6.8-alpha-new-icons.0

26 days ago

1 month ago

3.6.7-alpha-with-popover-change.0

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

3.6.1-alpha-chore-dependency-updates.0

5 months ago

5 months ago

3.5.6-alpha-refine-colors.0

5 months ago

6 months ago

10 months ago

3.5.4-alpha-remove-moment.1

8 months ago

3.5.4-alpha-remove-moment.2

7 months ago

3.5.4-alpha-remove-moment.0

8 months ago

3.5.6-alpha-icon-override-twitter.1

6 months ago

3.5.6-alpha-icon-override-twitter.0

6 months ago

9 months ago

9 months ago

10 months ago

10 months ago

3.5.5-alpha-line-height.3

6 months ago

3.5.5-alpha-line-height.2

6 months ago

3.5.5-alpha-line-height.1

6 months ago

3.5.5-alpha-line-height.0

6 months ago

3.5.4-alpha-optimize-lumx-react-bundle.0

8 months ago

10 months ago

6 months ago

7 months ago

10 months ago

3.5.4-alpha-remove-moment-repack.0

8 months ago

3.3.1-alpha-thumbnail-aspect-ratio.0

11 months ago

11 months ago

3.3.1-alpha-uploader-a-11-y.0

11 months ago

12 months ago

3.3.2-alpha-thumbnail-aspect-ratio.8

11 months ago

3.3.2-alpha-thumbnail-aspect-ratio.7

11 months ago

3.3.1-alpha-non-reg-sbv-7.0

1 year ago

11 months ago

1 year ago

3.3.2-alpha-thumbnail-aspect-ratio.2

11 months ago

3.3.2-alpha-thumbnail-aspect-ratio.1

11 months ago

3.3.2-alpha-thumbnail-aspect-ratio.0

11 months ago

3.3.2-alpha-thumbnail-aspect-ratio.6

11 months ago

3.3.2-alpha-thumbnail-aspect-ratio.5

11 months ago

3.3.2-alpha-thumbnail-aspect-ratio.4

11 months ago

3.3.2-alpha-thumbnail-aspect-ratio.3

11 months ago

1 year ago

1 year ago

1 year ago

3.2.2-non-reg-storybook-7-vite.0

1 year ago

1 year ago

2 years ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

3.1.4-alpha-popover.0

1 year ago

3.1.4-alpha-popover.2

1 year ago

3.1.4-alpha-popover.1

1 year ago

3.1.4-alpha-popover.4

1 year ago

3.1.4-alpha-popover.3

1 year ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

3.0.8-alpha-auto-release.0

1 year ago

1 year ago

1 year ago

1 year ago

3.1.4-alpha-poc-build-components.0

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

3.0.2-alpha-react-utils.1

2 years ago

3.0.2-alpha-react-utils.2

2 years ago

3.0.2-alpha-react-utils.3

2 years ago

2 years ago

3.0.0-alpha-dart-sass.1

2 years ago

3.0.0-alpha-dart-sass.2

2 years ago

2 years ago

2 years ago

2 years ago

2.2.26-alpha-a11y-slideshow.6

2 years ago

2.2.26-alpha-a11y-slideshow.5

2 years ago

2.2.26-alpha-a11y-slideshow.7

2 years ago

2.2.26-alpha-a11y-slideshow.2

2 years ago

2.2.26-alpha-a11y-slideshow.4

2 years ago

2.2.26-alpha-a11y-slideshow.3

2 years ago

2.2.23-alpha-dart-sass.1

2 years ago

2.2.25-alpha-icons-bundle-both-cjs-esm.1

2 years ago

2.2.22-alpha-icons-tree-shake.1

2 years ago

2.2.22-alpha-dart-sass.1

2 years ago

2.2.23-alpha-thumbnail-focus-point.1

2 years ago

2.2.20-alpha.xss.datatable

2 years ago

2 years ago

2.2.22-alpha-fix-generic-block.1

2 years ago

2.2.22-alpha-fix-generic-block.2

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2.2.20-alpha-type.1

2 years ago

2 years ago

2 years ago

2.2.18-alpha-hooks.1

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2.2.9-alpha-exported-hooks2

2 years ago

2.2.9-alpha-exported-hooks1

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2.1.9-prefer-css-color-variables

2 years ago

2.1.9-prefer-css-color-variables2

2 years ago

2.2.3-alpha-export-hook1

2 years ago

2.1.9-prefer-css-color-variables3

2 years ago

2.1.9-prefer-css-color-variables4

2 years ago

2.1.9-alpha-thumbnail8

2 years ago

2.1.9-alpha-thumbnail9

2 years ago

2.1.9-alpha-thumbnail7

2 years ago

2.1.9-alpha-thumbnail5

2 years ago

2.1.9-alpha-thumbnail15

2 years ago

2.1.9-alpha-thumbnail16

2 years ago

2.1.9-alpha-thumbnail17

2 years ago

2.1.9-alpha-thumbnail18

2 years ago

2.1.9-alpha-thumbnail11

2 years ago

2.1.9-alpha-thumbnail12

2 years ago

2.1.9-alpha-thumbnail13

2 years ago

2.1.9-alpha-thumbnail14

2 years ago

2.1.9-alpha-thumbnail10

2 years ago

3 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2.1.9-fix-design-tokens

2 years ago

2.1.9-alpha-thumbnail4

2 years ago

2.1.9-alpha-thumbnail2

2 years ago

2.1.9-alpha-thumbnail3

2 years ago

2.1.9-alpha-thumbnail

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

2.1.0-alpha-css-test2

3 years ago

2.0.4-fix-popover-boundary

3 years ago

2.1.0-alpha.13-css-test1

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

2.0.2-alpha-fix-scroll-modal

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago