@lumx/icons NPM | npm.io

3.14.1 • Published 10 months ago

Install

Weekly downloads

486

License

MIT

Repository

Last release

10 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 @infinitebrahmanuniverse/nolb-_lum @hyliss-widget/common @lumapps-extensions-playground/common @lumapps-extensions-playground/devenv @lumapps-extensions-playground/playground-server @lumx/angularjs @lumx/react

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

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

10 months ago

11 months ago

1 year ago

1 year ago

11 months ago

1 year ago

12 months ago

11 months ago

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

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

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

3.7.6-alpha-no-lodash.0

2 years ago

2 years ago

3.7.6-alpha-no-lodash.1

2 years ago

2 years ago

2 years ago

2 years ago

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

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

3.6.9-alpha-split-esm-icons.0

2 years ago

3.6.9-alpha-new-icons.1

2 years ago

3.6.9-alpha-new-icons.0

2 years ago

2 years ago

3.6.8-alpha-new-icons.0

2 years ago

2 years ago

3.6.7-alpha-with-popover-change.0

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

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

3 years ago

3.5.4-alpha-remove-moment.1

3 years ago

3.5.4-alpha-remove-moment.2

3 years ago

3.5.4-alpha-remove-moment.0

3 years ago

3.5.6-alpha-icon-override-twitter.1

2 years ago

3.5.6-alpha-icon-override-twitter.0

2 years ago

3 years ago

3 years ago

3 years ago

3 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

3 years ago

3 years ago

2 years ago

2 years ago

3 years ago

3.5.4-alpha-remove-moment-repack.0

3 years ago

3.3.1-alpha-thumbnail-aspect-ratio.0

3 years ago

3 years ago

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

3 years ago

3 years ago

3.3.2-alpha-thumbnail-aspect-ratio.8

3 years ago

3.3.2-alpha-thumbnail-aspect-ratio.7

3 years ago

3.3.1-alpha-non-reg-sbv-7.0

3 years ago

3 years ago

3 years ago

3.3.2-alpha-thumbnail-aspect-ratio.2

3 years ago

3.3.2-alpha-thumbnail-aspect-ratio.1

3 years ago

3.3.2-alpha-thumbnail-aspect-ratio.0

3 years ago

3.3.2-alpha-thumbnail-aspect-ratio.6

3 years ago

3.3.2-alpha-thumbnail-aspect-ratio.5

3 years ago

3.3.2-alpha-thumbnail-aspect-ratio.4

3 years ago

3.3.2-alpha-thumbnail-aspect-ratio.3

3 years ago

3 years ago

3 years ago

3 years ago

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

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.1.4-alpha-popover.0

3 years ago

3.1.4-alpha-popover.2

3 years ago

3.1.4-alpha-popover.1

3 years ago

3.1.4-alpha-popover.4

3 years ago

3.1.4-alpha-popover.3

3 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

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3.0.2-alpha-react-utils.1

4 years ago

3.0.2-alpha-react-utils.2

4 years ago

3.0.2-alpha-react-utils.3

4 years ago

3 years ago

3.0.0-alpha-dart-sass.1

4 years ago

3.0.0-alpha-dart-sass.2

4 years ago

4 years ago

4 years ago

4 years ago

2.2.26-alpha-a11y-slideshow.6

4 years ago

2.2.26-alpha-a11y-slideshow.5

4 years ago

2.2.26-alpha-a11y-slideshow.7

4 years ago

2.2.26-alpha-a11y-slideshow.2

4 years ago

2.2.26-alpha-a11y-slideshow.4

4 years ago

2.2.26-alpha-a11y-slideshow.3

4 years ago

2.2.23-alpha-dart-sass.1

4 years ago

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

4 years ago

2.2.22-alpha-icons-tree-shake.1

4 years ago

2.2.22-alpha-dart-sass.1

4 years ago

2.2.23-alpha-thumbnail-focus-point.1

4 years ago

2.2.20-alpha.xss.datatable

4 years ago

4 years ago

2.2.22-alpha-fix-generic-block.1

4 years ago

2.2.22-alpha-fix-generic-block.2

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

2.2.20-alpha-type.1

4 years ago

4 years ago

4 years ago

2.2.18-alpha-hooks.1

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

4 years ago

2.2.9-alpha-exported-hooks1

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

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

4 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

4 years ago

2.1.9-alpha-thumbnail7

4 years ago

2.1.9-alpha-thumbnail5

4 years ago

2.1.9-alpha-thumbnail15

4 years ago

2.1.9-alpha-thumbnail16

4 years ago

2.1.9-alpha-thumbnail17

4 years ago

2.1.9-alpha-thumbnail18

4 years ago

2.1.9-alpha-thumbnail11

4 years ago

2.1.9-alpha-thumbnail12

4 years ago

2.1.9-alpha-thumbnail13

4 years ago

2.1.9-alpha-thumbnail14

4 years ago

2.1.9-alpha-thumbnail10

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

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

5 years ago

5 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 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

5 years ago

5 years ago

5 years ago

5 years ago

2.0.2-alpha-fix-scroll-modal

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

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

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

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago