@ember-eui/core

This project aims to provide ember components implementing the css layer of https://elastic.github.io/eui

Icons

EUI icons work out of the box: they are bundled with the addon, no build configuration is needed (this used to require ember-svg-jar).

<EuiIcon @type="chevronSingleDown" />

Each EUI icon is its own chunk, loaded the first time it renders, so apps only download the icons they use. Until it arrives an empty icon of the same size takes its place; await render() / settled() in tests wait for it. Preload icons that should show up right away:

import { preloadIcons } from '@ember-eui/core/utils/preload-icons';

export default class ApplicationRoute extends Route {
  async beforeModel() {
    await preloadIcons(['chevronSingleDown', 'cross', 'magnify']);
  }
}

To use your own icons, add @svg-jar/plugin to your app's vite.config.mjs (svgJar({ target: 'ember' })) so svg files can be imported as components. Then either pass the component directly:

import MyLogo from '../icons/my-logo.svg';

<EuiIcon @type={{MyLogo}} />
<EuiBadge @iconType={{MyLogo}}>New</EuiBadge>

or register them by name, e.g. a whole folder at once with iconsFromGlob (icons are named after their file, like ember-svg-jar did):

// app/routes/application.js
import Route from '@ember/routing/route';
import { service } from '@ember/service';
import { iconsFromGlob } from '@ember-eui/core/utils/icons-from-glob';

export default class ApplicationRoute extends Route {
  @service euiConfig;

  beforeModel() {
    this.euiConfig.updateConfig({
      'euiIcon.icons': iconsFromGlob(
        import.meta.glob('../icons/**/*.svg', { eager: true })
      ),
    });
  }
}

<EuiIcon @type="my-logo" />
<EuiButton @iconType="rocket">Launch</EuiButton>

Keep these svgs out of public/: Vite does not want files from the public directory imported from JavaScript (it warns in development). Moving e.g. public/assets/*.svg to app/icons/ keeps the same names.

Any other string is rendered as an <img> with that URL.

Compatibility

• Ember.js v7.1 or above
• Ember CLI v7.1 or above
• Node.js v20.19 or above

Installation

ember install @ember-eui/core

Contributing

See the Contributing guide for details.

PR's are truly welcome

License

This project is licensed under the MIT License, except for the parts derived from Elastic UI (EUI) (its component styles, icons, ported component logic and documentation examples), which remain Copyright Elasticsearch B.V. under the Elastic License 2.0 or the Server Side Public License, v 1. See NOTICE.md.

Ember EUI is a community project and is not affiliated with or endorsed by Elastic.