Skip to content

tzellman/ember-heroicons

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ember-heroicons

NPM Build Status Ember Observer Score Ember Version Download count

This addon provides access to the heroicons SVG icons within your Ember applications.

Installation

ember install ember-heroicons

Demo

Demo

Usage

The basic usage:

<HeroIcon @icon="check-circle" />

The HeroIcon component supports the following arguments:

  • @icon - the name of the icon to render
  • @type - one of outline, solid, mini or micro

Custom configuration

By default, all icons for all types will be available within your application. Additionally, the default icon type, if not specified, will be outline.

If you know you will only be using a subset of icons, then you can reduce the size of your app by customizing the configuration.

You can customize defaults and available icons by adding a ember-heroicons configuration object to your application's ember-cli-build.js and environment.js files. As an example:

// ember-cli-build.js
module.exports = function (defaults) {
    let app = new EmberApp(defaults, {
        // instruct ember-heroicons to include/omit specific icons/sets
        "ember-heroicons": {
            // default type to use if not specified to the HeroIcon component
            defaultType: "outline",
            // omit matching icons (array of string or RegExp)
            omit: [/chevron/, "camera"],
            // include only certain matching icons (array of string or RegExp)
            include: [/.*/],
            // include only certain types (outline, solid, mini, micro)
            types: ["outline"],
        },
    });
    return app.toTree();
};
// environment.js
module.exports = function (environment) {
    let ENV = {
        // at runtime, if no type is given, you can specify which type to use
        "ember-heroicons": {
            // default type to use if not specified to the HeroIcon component
            // this takes precedence over the value provided in ember-cli-build.js
            defaultType: "mini",
        },
    };
    // ...
    return ENV;
};

Compatibility

  • Ember.js v4.8 or above
  • Ember CLI v4.8 or above
  • Node.js v18 or above

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.