@lumx/icons NPM | npm.io

3.9.3 • Published 9 months ago

Install

Weekly downloads

486

License

MIT

Repository

Last release

9 months 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

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

12 months ago

1 year ago

1 year ago

1 year ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

3.7.6-alpha-no-lodash.0

11 months ago

11 months ago

3.7.6-alpha-no-lodash.1

11 months ago

11 months ago

1 year ago

1 year ago

3.7.5-alpha-list-item-focus-ring.0

12 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

1 year ago

1 year ago

3.6.9-alpha-split-esm-icons.0

1 year ago

3.6.9-alpha-new-icons.1

1 year ago

3.6.9-alpha-new-icons.0

1 year ago

1 year ago

3.6.8-alpha-new-icons.0

1 year ago

1 year ago

3.6.7-alpha-with-popover-change.0

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

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

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3.6.1-alpha-chore-dependency-updates.0

2 years ago

2 years ago

3.5.6-alpha-refine-colors.0

2 years ago

2 years ago

2 years ago

3.5.4-alpha-remove-moment.1

2 years ago

3.5.4-alpha-remove-moment.2

2 years ago

3.5.4-alpha-remove-moment.0

2 years ago

3.5.6-alpha-icon-override-twitter.1

2 years ago

3.5.6-alpha-icon-override-twitter.0

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3.5.5-alpha-line-height.3

2 years ago

3.5.5-alpha-line-height.2

2 years ago

3.5.5-alpha-line-height.1

2 years ago

3.5.5-alpha-line-height.0

2 years ago

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

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3.5.4-alpha-remove-moment-repack.0

2 years ago

3.3.1-alpha-thumbnail-aspect-ratio.0

2 years ago

2 years ago

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

2 years ago

2 years ago

3.3.2-alpha-thumbnail-aspect-ratio.8

2 years ago

3.3.2-alpha-thumbnail-aspect-ratio.7

2 years ago

3.3.1-alpha-non-reg-sbv-7.0

2 years ago

2 years ago

2 years ago

3.3.2-alpha-thumbnail-aspect-ratio.2

2 years ago

3.3.2-alpha-thumbnail-aspect-ratio.1

2 years ago

3.3.2-alpha-thumbnail-aspect-ratio.0

2 years ago

3.3.2-alpha-thumbnail-aspect-ratio.6

2 years ago

3.3.2-alpha-thumbnail-aspect-ratio.5

2 years ago

3.3.2-alpha-thumbnail-aspect-ratio.4

2 years ago

3.3.2-alpha-thumbnail-aspect-ratio.3

2 years ago

2 years ago

2 years ago

2 years ago

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

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 years ago

3.1.4-alpha-popover.0

2 years ago

3.1.4-alpha-popover.2

2 years ago

3.1.4-alpha-popover.1

2 years ago

3.1.4-alpha-popover.4

2 years ago

3.1.4-alpha-popover.3

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3.0.8-alpha-auto-release.0

3 years ago

3 years ago

3 years ago

3 years ago

3.1.4-alpha-poc-build-components.0

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3.0.2-alpha-react-utils.1

3 years ago

3.0.2-alpha-react-utils.2

3 years ago

3.0.2-alpha-react-utils.3

3 years ago

3 years ago

3.0.0-alpha-dart-sass.1

3 years ago

3.0.0-alpha-dart-sass.2

3 years ago

3 years ago

3 years ago

3 years ago

2.2.26-alpha-a11y-slideshow.6

3 years ago

2.2.26-alpha-a11y-slideshow.5

3 years ago

2.2.26-alpha-a11y-slideshow.7

3 years ago

2.2.26-alpha-a11y-slideshow.2

3 years ago

2.2.26-alpha-a11y-slideshow.4

3 years ago

2.2.26-alpha-a11y-slideshow.3

3 years ago

2.2.23-alpha-dart-sass.1

3 years ago

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

3 years ago

2.2.22-alpha-icons-tree-shake.1

3 years ago

2.2.22-alpha-dart-sass.1

3 years ago

2.2.23-alpha-thumbnail-focus-point.1

3 years ago

2.2.20-alpha.xss.datatable

3 years ago

3 years ago

2.2.22-alpha-fix-generic-block.1

3 years ago

2.2.22-alpha-fix-generic-block.2

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

2.2.20-alpha-type.1

3 years ago

3 years ago

3 years ago

2.2.18-alpha-hooks.1

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.2.9-alpha-exported-hooks2

3 years ago

2.2.9-alpha-exported-hooks1

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

2.1.9-prefer-css-color-variables

4 years ago

2.1.9-prefer-css-color-variables2

4 years ago

2.2.3-alpha-export-hook1

3 years ago

2.1.9-prefer-css-color-variables3

4 years ago

2.1.9-prefer-css-color-variables4

4 years ago

2.1.9-alpha-thumbnail8

4 years ago

2.1.9-alpha-thumbnail9

3 years ago

2.1.9-alpha-thumbnail7

4 years ago

2.1.9-alpha-thumbnail5

4 years ago

2.1.9-alpha-thumbnail15

3 years ago

2.1.9-alpha-thumbnail16

3 years ago

2.1.9-alpha-thumbnail17

3 years ago

2.1.9-alpha-thumbnail18

3 years ago

2.1.9-alpha-thumbnail11

3 years ago

2.1.9-alpha-thumbnail12

3 years ago

2.1.9-alpha-thumbnail13

3 years ago

2.1.9-alpha-thumbnail14

3 years ago

2.1.9-alpha-thumbnail10

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

2.1.9-fix-design-tokens

4 years ago

2.1.9-alpha-thumbnail4

4 years ago

2.1.9-alpha-thumbnail2

4 years ago

2.1.9-alpha-thumbnail3

4 years ago

2.1.9-alpha-thumbnail

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

2.1.0-alpha-css-test2

4 years ago

2.0.4-fix-popover-boundary

4 years ago

2.1.0-alpha.13-css-test1

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

2.0.2-alpha-fix-scroll-modal

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

5 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

5 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

5 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

5 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

5 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

5 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

5 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

5 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

5 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

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago